聊天室（js+node.js）

時間 2019-11-16

原文原文鏈接

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#names{
width:120px;
}
#msgs{
width:680px;
}
</style>
</head>
<body>
<textarea name="" id="msgText" cols="120" rows="30"></textarea>
<br/>
<br/>
<input type="text" id="names">
<input type="text" id="msgs">
<button id="bn">發送</button>
<script>

var dic={};
dic=getElemId(document.body);
dic["bn"].addEventListener("click",clickHandler);
document.addEventListener("keydown",keydownHandler);
setInterval(ajax,16);

function keydownHandler(e) {
if(e.keyCode===13){
clickHandler();
}
}

function clickHandler(e) {
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.137:3004");
xhr.send(encodeURIComponent(JSON.stringify(data)));
}

function readyHandler(e) {
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){
dic[elem.id]=elem;
}
for(var i=0;i<elem.children.length;i++)
{
getElemId(elem.children[i]);
}
return dic;
}html

</script>
</body>
</html>node

node.js服務端部分：

res.writeHead(200,{"Content-Type":"text/plane","Access-Control-Allow-Origin":"*"});
res.write(encodeURIComponent(JSON.stringify(resObj)));
res.end();
})
});
server.listen(3004,"10.9.164.137",function () {
console.log("服務已開啓");
});ui

效果圖：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。