recherche

Maison >développement back-end >tutoriel php >Méthode de mise en œuvre du logiciel de chat en version Web PHP

Méthode de mise en œuvre du logiciel de chat en version Web PHP

墨辰丷
墨辰丷original
2018-06-01 15:32:362760parcourir

Cet article présente principalement le code d'implémentation de la version Web PHP du logiciel de chat, qui peut réaliser un chat anonyme. Les amis intéressés peuvent s'y référer

Le contenu spécifique est le suivant

. 1. index.html 

<html>
 <head>
  <title>聊天室</title>
  <meta charset="utf-8"/>
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  <link href="./css/style.css" rel="stylesheet"/>
  <script>
   var maxid = 0;
   function showmessage() {
    //创建ajax对象
    var xhr = new XMLHttpRequest();
    //监听
    xhr.onreadystatechange = function () {
     if (xhr.readyState === 4) {
      eval("var info=" + xhr.responseText);
      var text = "";
      for (var i = 0; i < info.length; i++)
      {
       text += "<p class=&#39;alert alert-success&#39;>" +
         "<span class=&#39;name&#39;>" + info[i].send + ":</span>" +
         "<span class=&#39;message&#39;>" + info[i].content + "</span>" +
         "<span>(" + info[i].time + ")</span>" +
         "</p>";
       maxid = info[i].id;
      }
 
      var old = document.getElementById("msg").innerHTML;
      document.getElementById("msg").innerHTML = old + text;
      document.getElementById("msg").scrollTop = document.getElementById("msg").scrollHeight;
     }
    };
    //初始化
    xhr.open("get", "./action.php?maxid=" + maxid);
    //发送
    xhr.send();
   }
 
   $(document).ready(
     function ()
     {
      showmessage()
      self.setInterval("showmessage()", 2000);
     }
   );
   function send() {
    var postData ="content="+document.getElementById(&#39;content&#39;).value;
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "./add.php", true);
    //一定要写头信息不然服务器接收不到
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function () {
     var XMLHttpReq = xhr;
     if (XMLHttpReq.readyState == 4) {
      if (XMLHttpReq.status == 200) {
       document.getElementById(&#39;content&#39;).value="";
      }
     }
    };
    xhr.send(postData);
   }
  </script>
 </head>
 <body>
 
  <p class="panel panel-default" id="main">
   <!--聊天室名字--> 
   <p class="panel-heading">
    <h3 class="panel-title">
     匿名者聊天室
    </h3>
   </p>
   <!--聊天室名字-->
   <!--聊天室消息框-->
   <p class="panel-body ">
    <p class="well no-bottom ">
     <!--     消息框样式-->
     <!--
     <p class="alert alert-success">成功！很好地完成了提交。</p>
     <p class="alert alert-info">信息！请注意这个信息。</p>
     <p class="alert alert-warning">警告！请不要提交。</p>
     <p class="alert alert-danger">错误！请进行一些更改。</p>
     -->
     <p id="msg" class="showmessage">
     </p>
     <!--聊天室消息框-->
     <p class="well" >
      <form role="form">
       <p class="form-group">
        <label for="name">发送消息</label>
        <textarea class="form-control" id="content" name="content"
           style="resize: none;font-family: Microsoft YaHei;" rows="3" >
        </textarea>
       </p>
       <p style="text-align: right">
        <button type="button" class="btn btn-primary" onclick="send()">
         <span class="glyphicon glyphicon-envelope"></span>
         发送
        </button>
       </p>
      </form>
     </p>
     <!--聊天室发送框-->
    </p>
   </p>
  </p>
 </body>
</html>

2. action.php 

<?php
 
$link = mysqli_connect(&#39;localhost&#39;, &#39;root&#39;, &#39;123&#39;, &#39;test&#39;);
mysqli_query($link, &#39;set names utf8&#39;);
$info= array();
header("Content-type: text/html; charset=utf-8");
$id=$_GET[&#39;maxid&#39;];
$data = mysqli_query($link, "select * from talk where id>$id");
while ($array = mysqli_fetch_assoc($data)) {
 $info[] = $array;
};
 
 echo json_encode($info);

3. chat.sql 

DROP TABLE IF EXISTS `talk`;
CREATE TABLE `talk` (
 `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT &#39;id&#39;,
 `send` varchar(10) CHARACTER SET utf8 DEFAULT NULL COMMENT &#39;发送者昵称&#39;,
 `ip` varchar(12) CHARACTER SET utf8 DEFAULT NULL,
 `content` varchar(500) CHARACTER SET utf8 DEFAULT NULL,
 `time` varchar(50) DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=52 DEFAULT CHARSET=utf8;

4. >

<?php
 
/**
 * @功能 将表单插入数据库
 */
$content=$_POST[&#39;content&#39;];
print_r($_POST);
$time= date("Y-m-d H:i:s", time(0));
$link = mysqli_connect(&#39;localhost&#39;, &#39;root&#39;, &#39;123&#39;, &#39;test&#39;);
mysqli_query($link, &#39;set names utf8&#39;);
$ip = $_SERVER["REMOTE_ADDR"];
$sql="INSERT INTO talk VALUES(NULL,&#39;匿名者&#39;,&#39;$ip&#39;,&#39;$content&#39;,&#39;$time&#39;)";
$data = mysqli_query($link,$sql);
echo "$content";
if($data)
 echo "1";
 else
  echo "0";
Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

Recommandations associées :

Exemples détaillés sur la façon d'utiliser des variables statiques en PHP


Remarques sur l'accès au crédit PHP Sesame


Méthode de thinkPHP pour implémenter la fonction de rappel numérique de commande


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de la requête PHP Exemple de test d'interface SocketArticle suivant：Explication détaillée de la requête PHP Exemple de test d'interface Socket

Articles Liés

Voir plus