聊天室AJAX+node.js

新建一个node js文件 写入以下内容
var http=require(“http”);
var msgList=[];
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){
msgList.push(obj.user+":"+obj.msg);
}
var result={result:msgList,error:null};
res.writeHead(200,{“Content-Type”:“text/html”,“Access-Control-Allow-Origin”:"*"});
res.write(encodeURIComponent(JSON.stringify(result)));
res.end();
});
});
server.listen(3002,“10.9.170.6”,function () {
console.log(“开启服务”)
});

3002端口号是随便起的,可以修改 ,后面是本机ip地址 自行查看
写在前端的



:

发送

部分javascript代码如下:
var bn=document.getElementById(“bn”);
var names=document.getElementById(“names”);
var msgs=document.getElementById(“msgs”);
var msgText=document.getElementById(“msgText”);
bn.addEventListener(“click”,clickHandler);
document.addEventListener(“keydown”,keydownHandler);

setInterval(ajax,16);
function keydownHandler(e) {
    if(e.keyCode===13){
        clickHandler();
    }
}
function clickHandler(e) {
    if(msgs.value.trim().length===0)return;
    if(names.value.trim().length===0)return;
    var obj={type:0,user:names.value,msg:msgs.value};
    ajax(obj);
    msgs.value="";
}

function ajax(obj) {
    if(!obj){
        obj={type:1};
    }
    var xhr=new XMLHttpRequest();
    xhr.addEventListener("load",loadHandler);
    xhr.open("POST","http://10.9.170.6:3002");
    xhr.send(encodeURIComponent(JSON.stringify(obj)));
}

function loadHandler(e) {
    msgText.value=JSON.parse(decodeURIComponent(this.response)).result.join("\n");
    msgText.scrollTop=msgText.scrollHeight;
}

内容比较简单 属于AJAX的一个小案例 使用前先开启服务!!

猜你喜欢

转载自blog.csdn.net/weixin_43922021/article/details/84872545
今日推荐