利用Ajax將數據提交到后台，再由后台發送到前端，渲染內容
代碼如下：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
#textBox{width: 800px;height: 600px;border: 1px solid black;margin: 50px 0;font-size: 20px;}
</style>
</head>
<body>
<textarea id="textBox"></textarea><br>
<input type="text">:<input type="text" style="width:600px;"><button>Send</button>
<script>
var names = document.querySelectorAll("input")[0];
var msgs = document.querySelectorAll("input")[1];
var box = document.getElementById("textBox");
var btn = document.querySelectorAll("button")[0];
//設置刷新時間為一秒一次
setInterval(loadHandler, 1000);
// 點擊發送。監聽事件
btn.addEventListener("click", sendText);
// 點擊后執行Ajax
function loadHandler(data) {
if (!data) {
data = {
id: 2
};
}
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", startPost);
xhr.open("POST", "http://10.9.48.155:1024/"); //這里一定是主機的IP地址
xhr.send(JSON.stringify(data));
}
function startPost(e) {
box.value = (JSON.parse(this.response)).resu.join("\n"); //將后台拼接好的數據返回到聊天面板
}
function sendText(e) {
// 將從輸入框獲取的內容添加到對象發送到后端
if (names.value.length === 0) return;
if (msgs.value.length === 0) return;
var obj = {
id: 1,
user: names.value,
mas: msgs.value
}
loadHandler(obj);
}
</script>
</body>
</html>node代碼：
var http = require("http");//獲取http請求（前面的文章有詳細注釋）
var arr = []; //新建消息容器，存放消息集
var server = http.createServer(function (req, res) {
var data = "";
req.on("data", function (d) {
data += d;
});
req.on("end", function () {
var obj = JSON.parse(data);
//解析對象，將user和msg取出
if (obj.id === 1) {
arr.push(obj.user + ":" + obj.mas);
}
// 返回數組和錯誤信息（沒有則為空）
var result = {
resu: arr,
error: null
};
res.writeHead(200, {
"Content-Type": "text/plain",
"Access-Control-Allow-Origin": "*"
});
res.write(JSON.stringify(result));//將打包好的對象傳到前端
res.end();
});
});
// 監聽服務
server.listen(1024, "10.9.48.155", function () {
console.log("偵聽開始");
})