溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

php如何實(shí)現(xiàn)網(wǎng)頁版聊天軟件

發(fā)布時(shí)間：2021-08-27 09:31:14 來源：億速云 閱讀：110 作者：小新 欄目：開發(fā)技術(shù)

這篇文章給大家分享的是有關(guān)php如何實(shí)現(xiàn)網(wǎng)頁版聊天軟件的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

具體內(nèi)容如下

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() {
    //創(chuàng)建ajax對(duì)象
    var xhr = new XMLHttpRequest();
    //監(jiān)聽
    xhr.onreadystatechange = function () {
     if (xhr.readyState === 4) {
      eval("var info=" + xhr.responseText);
      var text = "";
      for (var i = 0; i < info.length; i++)
      {
       text += "<div class='alert alert-success'>" +
         "<span class='name'>" + info[i].send + ":</span>" +
         "<span class='message'>" + info[i].content + "</span>" +
         "<span>(" + info[i].time + ")</span>" +
         "</div>";
       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);
    //發(fā)送
    xhr.send();
   }
 
   $(document).ready(
     function ()
     {
      showmessage()
      self.setInterval("showmessage()", 2000);
     }
   );
   function send() {
    var postData ="content="+document.getElementById('content').value;
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "./add.php", true);
    //一定要寫頭信息不然服務(wù)器接收不到
    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('content').value="";
      }
     }
    };
    xhr.send(postData);
   }
  </script>
 </head>
 <body>
 
  <div class="panel panel-default" id="main">
   <!--聊天室名字--> 
   <div class="panel-heading">
    <h4 class="panel-title">
     匿名者聊天室
    </h4>
   </div>
   <!--聊天室名字-->
   <!--聊天室消息框-->
   <div class="panel-body ">
    <div class="well no-bottom ">
     <!--     消息框樣式-->
     <!--
     <div class="alert alert-success">成功！很好地完成了提交。</div>
     <div class="alert alert-info">信息！請(qǐng)注意這個(gè)信息。</div>
     <div class="alert alert-warning">警告！請(qǐng)不要提交。</div>
     <div class="alert alert-danger">錯(cuò)誤！請(qǐng)進(jìn)行一些更改。</div>
     -->
     <div id="msg" class="showmessage">
     </div>
     <!--聊天室消息框-->
     <div class="well" >
      <form role="form">
       <div class="form-group">
        <label for="name">發(fā)送消息</label>
        <textarea class="form-control" id="content" name="content"
            rows="3" >
        </textarea>
       </div>
       <div >
        <button type="button" class="btn btn-primary" onclick="send()">
         <span class="glyphicon glyphicon-envelope"></span>
         發(fā)送
        </button>
       </div>
      </form>
     </div>
     <!--聊天室發(fā)送框-->
    </div>
   </div>
  </div>
 </body>
</html>

2. action.php 

<?php
 
$link = mysqli_connect('localhost', 'root', '123', 'test');
mysqli_query($link, 'set names utf8');
$info= array();
header("Content-type: text/html; charset=utf-8");
$id=$_GET['maxid'];
$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 'id',
 `send` varchar(10) CHARACTER SET utf8 DEFAULT NULL COMMENT '發(fā)送者昵稱',
 `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. add.php

<?php
 
/**
 * @功能 將表單插入數(shù)據(jù)庫
 */
$content=$_POST['content'];
print_r($_POST);
$time= date("Y-m-d H:i:s", time(0));
$link = mysqli_connect('localhost', 'root', '123', 'test');
mysqli_query($link, 'set names utf8');
$ip = $_SERVER["REMOTE_ADDR"];
$sql="INSERT INTO talk VALUES(NULL,'匿名者','$ip','$content','$time')";
$data = mysqli_query($link,$sql);
echo "$content";
if($data)
 echo "1";
 else
  echo "0";

感謝各位的閱讀！關(guān)于“php如何實(shí)現(xiàn)網(wǎng)頁版聊天軟件”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

php
AI
助
手