简易的聊天室
Server.js
const http=require('http');
const io=require('socket.io');
let httpServer=http.createServer((req, res)=>{
});
httpServer.listen(8087);
//
let wsServer=io.listen(httpServer);//io监听http服务
let aSock=[];//用来放左右连接的数组
wsServer.on('connection', sock=>{//监听客户端连接
aSock.push(sock);//连接全部放入数组
//断开连接
sock.on('disconnect', ()=>{//监听客户端断开
let n=aSock.indexOf(sock);//获取断开客户端在数组中的下标
if(n!=-1){//判断不为空
aSock.splice(n, 1);//将数组中第N为，删掉一个;
}
});
sock.on('msg', str=>{//接收来自前端的msg数据
aSock.forEach(s=>{//循环向当前连接的客户端发送消息
if(s!=sock){//不给自己发
s.emit('msg', str);
}
});
});
});
setInterval(function (){//定时器 每个5毫秒 查看一次当前客户端连接数
console.log(aSock.length);
}, 500);
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
#ul1 {width:400px; height:300px; border:1px solid black; overflow:auto;}
#ul1 li.me {color:green}
.err_box {width:100%; height:20px; line-height: 20px; text-align:center; color:red; display:none}
</style>
<script src="http://localhost:8087/socket.io/socket.io.js" charset="utf-8"></script>
<script>
let sock=io.connect('ws://localhost:8087/');//连接wsServer
sock.on('connect', ()=>{//前端监听与服务器以连接
document.getElementsByClassName('err_box')[0].style.display='none';//屏蔽提示
});
sock.on('disconnect', ()=>{//前端监听与服务器断开
document.getElementsByClassName('err_box')[0].style.display='block';//显示提示
});
//聊天室
window.onload=function (){//页面加载完后操作
let oTxt=document.getElementById('txt1');
let oBtn=document.getElementById('btn1');
let oUl=document.getElementById('ul1');
oBtn.onclick=function (){//点击发送 就给服务器发送msg数据
sock.emit('msg', oTxt.value);
let oLi=document.createElement('li');//创建li 在发送数据的客户端界面显示发送的消息
oLi.innerHTML=oTxt.value;
oLi.className='me';
oTxt.value='';//情况发送框数据
oUl.appendChild(oLi);
};
sock.on('msg', str=>{//接收来自服务端的msg数据
let oLi=document.createElement('li');
oLi.innerHTML=str;
oUl.appendChild(oLi);
});
};
</script>
</head>
<body>
<div class="err_box">
无法连接到服务器，请检查网络
</div>
<ul id="ul1"></ul>
<textarea rows="4" cols="60" id="txt1"></textarea>
<input type="button" value="发送" id="btn1">
</body>
</html>
webSocket 详情
webSocket 在前台.socket在后台
nodeJS中的原生socket是net模块.
我好懒,我不想写了.
用WebSocket：
1.socket.io
2.原生WebSocket
i.net模块
ii.流程
a.握手
C:version:13、sec-websocket-key:xxxxx、sha1(key+mask)=>base64
S:101 Switching Protocols、sec-websocket-accept: base64
C <-> S
Client：
onopen
onmessage
onclose
Server:
net.createServer(sock=>{});
sock.once('data', 握手);
sock.on('data', 数据请求);
sock.on('end');
b.数据帧解析
扩展
计算机基础
数据帧也叫数据包、数据块等。是一个结构化数据
数据帧底层由位(bit)组成，8位组成一个字节(byte);
网友评论