ajax短輪詢+php與服務器交互制作簡易即時聊天網站
主流的Web端即時通訊方案大致有4種：傳統Ajax短輪詢、Comet技術、WebSocket技術、SSE（Server-sent Events）。
本文主要介紹ajax短輪詢的簡易實現方式。
看懂此文需要：ajax基礎，php基礎，mysql基礎，html/jquery基礎
————————————————————————————
本人也是web新手，今天聽說女票在學websocket，還做了個簡易的網站利用廣播和我通信。但是刷新一下數據就沒了。。
我覺得這個還是挺有意思的，，就想著能不能做一個刷新後數據依然存在然後可以實時顯示的呢。。就跟web上的qq一樣。。做一個簡易的對話板
因為我不會websocket，就想著好像ajax可以實現，一查果然可以，原來ajax短輪詢也是一種即時通訊的方案。
於是我心血來潮就開始做了。。
最後結果如下：
GIF演示：
我本地開兩個瀏覽器自己和自己聊天是完全沒問題的，可以顯示最後聊的12條消息，輸入框輸入後按回車消息實時顯示在最下面，頁面不自動刷新。
後面部署到服務器上和舍友測試了一下也是完全沒問題的，和遠在臺灣的女票測試有時候消息會閃。。應該是網絡問題吧。。畢竟使用的是ajax短輪詢還是挺受網絡影響的。
——————————————————————————————————————————
原理：
輸入框輸入原理：給輸入框賦上按回車的事件，按下回車用ajax把當前選擇的身份和輸入框內的內容提交到後臺，存儲在數據庫中。
顯示聊天記錄的原理：利用ajax從後端獲取數據庫中最後12條的數據（我這裏用了jquery的$.get()方法）。然後設置交互時間，前端不斷從後端獲取數據，我這裏設置的是每0.5秒從後端獲取一次數據並顯示。所以實際使用起來和QQ的效果一樣，基本感受不到對方聊天的延時。
——————————————————————————————————————————
代碼：
chat.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- jQuery靜態庫。-->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
var message = "";
setInterval(function(){
getdata();
},500);
function getdata() {
$.get("getdata.php",function (data) {
var count = 0;
for (a in data){
count++;
}
var show = 0;
for (a in data){
if ( show >= count-15 ){
message += "<p>"+ data[a].username + "：" + data[a].message+"</p>";
$("#show_message").html(message);
}
show++;
}
message = "";
});
}
$("#ckq").keydown(function(e){ //按下鍵盤觸發函數
if(e.keyCode==13){ //如果按下的是回車
var user = $(‘input:radio:checked‘).val();
$.ajax({
url: "chat.php",
type: "post",
async: false,
data: {"in":$("#ckq").val(),"username":user}
});
getdata();
$("#ckq").val("");
}
});
})
</script>
<style type="text/css">
</style>
</head>
<body>
<p id="message">小董與晴晴的對話：</p>
選擇身份：<input type="radio" name="sex" value="小董" checked>小董
<input type="radio" name="sex" value="晴晴">晴晴
<br>
<div id="show_message">
</div>
<input type="text" id="ckq" name="in">
</body>
</html>
connection.php：（都是默認用戶名密碼，選擇了我自己的數據庫app_phptest2017，如果有改就改成對應的就行了）
<?php
session_start();
error_reporting(0); //。。加這個就不顯示提示
$servername = "localhost";
$username = "root";
$password = "";
//$server_db_name = "app_phptest2017";
$con = mysql_connect($servername,$username,$password);
if (!$con)
{
die(‘Could not connect: ‘ . mysql_error());
}
mysql_query("set names ‘utf8‘");
mysql_select_db("app_phptest2017", $con);
$sql = "CREATE TABLE IF NOT EXISTS `mymessage` (
messageID int NOT NULL AUTO_INCREMENT,
username char(30) NOT NULL,
message char(30) NOT NULL,
PRIMARY KEY (messageID)
) ENGINE=InnoDB DEFAULT CHARSET=gbk; " ;
mysql_query($sql);
?>
chat.php （用來插入數據）：
<?php
include ("connection.php");
$sql = "INSERT INTO mymessage (message,username) VALUES(‘$_POST[in]‘,‘$_POST[username]‘)";
mysql_query($sql);
?>
getdata.php （用來從後端獲取json格式數據並輸出）：
<?php
include ("connection.php");
header(‘content-type:application/json;charset=utf8‘);
$result = mysql_query("select message,username from mymessage");
$results = array();
while ($row = mysql_fetch_assoc($result)) { //mysql_fetch_assoc() 函數從結果集中取得一行作為關聯數組，返回根據從結果集取得的行生成的關聯數組!，如果沒有更多行，則返回 false。
$results[] = $row;
}
$jsonResult = json_encode($results);
echo $jsonResult;
mysql_close();
?>
————————————————————————————————
在本地服務器下創建以上四個文件並把代碼復制進去就可以了，大家可以開兩個瀏覽器運行一下試試看。
目前只能顯示最後十二條，之後還可以添加一些滾動欄顯示之前的消息之類的功能，以後再說了，本來也是做著玩。
——————————————————————————————————
結論：初步嘗試了一下Web端即時通訊，還是挺有意思的。然而ajax短輪詢與服務器交互太頻繁了，沒消息的時候總是進行一些無意義的交互，浪費資源，現在這項技術已經被淘汰了，還是學學websocket好。
ajax短輪詢+php與服務器交互制作簡易即時聊天網站