JQuery AJAX NodeJs 构建 简陋聊天室

 

//html 文件


<!DOCTYPE html>

 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 #user
 {
 width: 80px;
 }
 #msg
 {
 width: 450px;
 }
 </style>
 <script src="js/jquery-3.2.1.js"></script>
 </head>
 <body>
 <textarea rows="30" cols="80" id="chatArea" readonly></textarea><br>
 <input id="user" type="text">:
 <input id="msg" type="text">
 <button>发送</button>
 <script>
 $("button").click(function () {
 var msg={name:$("#user").val(),msg:$("#msg").val()};
 if(msg.name.trim().length===0 || msg.msg.trim().length===0) return;
 sendMsg(msg)
 });
 setInterval(sendMsg,16);
 function sendMsg(msg) {
 $.post("http://192.168.27.57:3002",msg,function (res) {
 res=JSON.parse(decodeURIComponent(res));
 var str="";
 for(var i=0;i<res.length;i++){
 str+=res[i].name+":"+res[i].msg+"\n"
 }
 $("#chatArea").val(str)
 })
 }
 </script>
 </body>
 

</html>



// nodeJs

var http=require("http");
var querystring=require("querystring");
var chatList=[];
var server=http.createServer(function(req,res){
    var msg="";
    req.on("data",function (data) {
        msg+=data;
    });
    req.on("end",function () {
        if(msg){
            var s=querystring.parse(msg);
            chatList.push(s);
            if(chatList.length>20){
                chatList.shift();
            }
        }

        res.writeHead(200,{"Content-Type":"text/plain","Access-Control-Allow-Origin":"*"});

        res.write(encodeURIComponent(JSON.stringify(chatList)));
        res.end();
    })
});
server.listen(3002,"192.168.27.57",function(){
    console.log("开始监听...");
});


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值