mirror of
https://github.com/Daotin/Web.git
synced 2024-11-01 13:34:47 +08:00
142 lines
3.6 KiB
Markdown
142 lines
3.6 KiB
Markdown
|
这个聊天室的案例是:
|
|||
|
|
|
|||
|
|
填写用户名和发送的消息,点击发送按钮,就会在textarea中显示出来。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
node后台：
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
var http=require("http"); // 导入http.js文件
|
|||
|
|
var msgList=[];
|
|||
|
|
// 创建server服务
|
|||
|
|
// req：接收前端的数据
|
|||
|
|
// res：发送给前端的数据
|
|||
|
|
var server=http.createServer(function (req,res) {
|
|||
|
|
var data="";
|
|||
|
|
// post请求接收数据的函数
|
|||
|
|
// post接收到的数据就在函数的参数d里面
|
|||
|
|
req.on("data",function (d) {
|
|||
|
|
data+=d;
|
|||
|
|
});
|
|||
|
|
// get请求接收数据的函数
|
|||
|
|
req.on("end",function () {
|
|||
|
|
var obj=JSON.parse(decodeURIComponent(data));
|
|||
|
|
if(obj.type===0){
|
|||
|
|
delete obj.type;
|
|||
|
|
msgList.push(obj);
|
|||
|
|
}
|
|||
|
|
res.writeHead(200,{"Access-Control-Allow-Origin":"*"});
|
|||
|
|
res.write(encodeURIComponent(JSON.stringify(msgList)));
|
|||
|
|
res.end();
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
// 地址 http://192.168.53.213:3002
|
|||
|
|
server.listen(3002,"192.168.53.213",function () {
|
|||
|
|
console.log("开启服务了");
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
前端代码：
|
|||
|
|
|
|||
|
|
```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 id="msgText" rows="30" cols="120"></textarea>
|
|||
|
|
<br>
|
|||
|
|
<input id="names" type="text">:
|
|||
|
|
<input id="msgs" type="text">
|
|||
|
|
<button id="bn">发送</button>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
|
|||
|
|
// 接口文档
|
|||
|
|
// 1、
|
|||
|
|
// req
|
|||
|
|
// type=0
|
|||
|
|
// user="xie"
|
|||
|
|
// msg="聊天信息"
|
|||
|
|
// res
|
|||
|
|
// [
|
|||
|
|
// {user:"xie",msg:"聊天信息"},
|
|||
|
|
// {user:"xie",msg:"聊天信息"},
|
|||
|
|
// {user:"xie",msg:"聊天信息"},
|
|||
|
|
// {user:"xie",msg:"聊天信息"},
|
|||
|
|
// {user:"xie",msg:"聊天信息"},
|
|||
|
|
// ]
|
|||
|
|
|
|||
|
|
// 2、实时获取聊天信息
|
|||
|
|
// req
|
|||
|
|
// type=1
|
|||
|
|
// res
|
|||
|
|
// [
|
|||
|
|
// {user:"xie",msg:"聊天信息"},
|
|||
|
|
// {user:"xie",msg:"聊天信息"},
|
|||
|
|
// {user:"xie",msg:"聊天信息"},
|
|||
|
|
// {user:"xie",msg:"聊天信息"},
|
|||
|
|
// {user:"xie",msg:"聊天信息"},
|
|||
|
|
// ]
|
|||
|
|
|
|||
|
|
|
|||
|
|
var msgText=document.querySelector("#msgText");
|
|||
|
|
var names=document.querySelector("#names");
|
|||
|
|
var msgs=document.querySelector("#msgs");
|
|||
|
|
var bn=document.querySelector("#bn");
|
|||
|
|
bn.addEventListener("click",clickHandler);
|
|||
|
|
|
|||
|
|
function clickHandler(e) {
|
|||
|
|
// 判断输入的姓名和留言信息是否为空
|
|||
|
|
if(names.value.trim().length===0 || msgs.value.trim().length===0)return;
|
|||
|
|
// type为0是发送消息
|
|||
|
|
ajax({type:0,user:names.value,msg:msgs.value});
|
|||
|
|
}
|
|||
|
|
function ajax(data) {
|
|||
|
|
var xhr=new XMLHttpRequest();
|
|||
|
|
xhr.addEventListener("load",loadHandlder);
|
|||
|
|
xhr.open("POST","http://192.168.53.213:3002");
|
|||
|
|
xhr.send(encodeURIComponent(JSON.stringify(data)));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function loadHandlder(e) {
|
|||
|
|
var arr=JSON.parse(decodeURIComponent(this.response));
|
|||
|
|
// 将服务器返回的消息进行格式处理，方便显示
|
|||
|
|
arr=arr.map(function (item) {
|
|||
|
|
return item.user+":"+item.msg;
|
|||
|
|
});
|
|||
|
|
//每条消息换行显示
|
|||
|
|
msgText.value=arr.join("\n");
|
|||
|
|
//设置滚动条一直在底部
|
|||
|
|
msgText.scrollTop=msgText.scrollHeight;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 每16ms向后台获取一次消息
|
|||
|
|
setInterval(getMsg,16);
|
|||
|
|
// type为1是获取消息
|
|||
|
|
function getMsg() {
|
|||
|
|
ajax({type:1});
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|