步骤：（1）先写接口文档
(2)写客户端（AJAX）
(3)写服务端（node.js）
1、接口文档
地址：10.9.164.180：3006
发送数据：JSON
发送方式：POST
a、将当前用户和需要发送的消息发送给服务器，并且从服务器取回所有的聊天数据
请求：(req)
{type:0,user:"user",msg:"msg"};
返回：（res）
{
result:["user:msg",
"user:msg",
"user:msg",
"user:msg"
],
error:null
}
b、每隔16毫秒向服务器请求最新的聊天信息
请求：(req)
{type:1};
返回：（res）
{
result:["user:msg",
"user:msg",
"user:msg",
"user:msg"
],
error:null
}
AJAX（客户端）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<textarea id="msgText" cols="120" rows="30"></textarea><br>
<input type="text" id="names">
<input type="text" id="msgs">
<button id="bn">发送</button>
<script>
var dic={};
getElemId(document.body);
console.log(dic);
dic["bn"].addEventListener("click",clickHandler);
document.addEventListener("keydown",keydownHandler);
setInterval(ajax,16);
function keydownHandler(e) {
if(e.keyCode===13){
clickHandler();
}
}
function clickHandler() {
if(dic["names"].value.trim().length===0) return;//判断用户名是否存在
if(dic["msgs"].value.trim().length===0) return;//判断发送信息是否存在
var obj={type:0,user:dic["names"].value,msg:dic["msgs"].value};
ajax(obj);
dic["msgs"].value="";
}
function ajax(data) {
if(!data){
data={type:1};
}
var xhr=new XMLHttpRequest();
xhr.addEventListener("readystatechange",readyHandler);
xhr.open("POST","http://10.9.164.180:3006");
xhr.send(encodeURIComponent(JSON.stringify(data)));
}
function readyHandler() {
if(this.readyState===4 && this.status===200){
var obj=JSON.parse(decodeURIComponent(this.response));
dic["msgText"].value=obj.result.join("\n");
dic["msgText"].scrollTop=dic["msgText"].scrollHeight;
}
}
function getElemId(elem) {
if(elem.id){//标签id存在
dic[elem.id]=elem;//将标签放在对象内，以id为属性名，以标签为属性值
}
for(var i=0;i<elem.children.length;i++){
getElemId(elem.children[i]);
}
return dic;
}
</script>
</body>
</html>node.js(服务端)
var http=require("http");
var list=[];
var server=http.createServer(function (req,res) {
var data="";
req.on("data",function (d) {
data+=d;
});
req.on("end",function () {
var obj=JSON.parse(decodeURIComponent(data));
if(obj.type===0){
list.push(obj.user+":"+obj.msg);
}
var resObj={
result:list,
error:null
};
res.writeHead(200,{"content-type":"text/plane","Access-Control-Allow-Origin":"*"});
res.write(encodeURIComponent(JSON.stringify(resObj)));
res.end();
});
});
server.listen(3006,"10.9.164.180",function () {
console.log("服务开启，开始侦听！");
});