WebSockt 实现聊天室
1. websocket 是什么？
- WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
- 在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
2. 作用场景
- 即时通讯（各种聊天软件）
- 多玩家在线游戏（数据需要同步刷新）
- 协同编辑/编程
- 股票基金报价
- 体育实况、新闻更新
- … 通常来说，对数据敏感度高、需要及时更新数据的产品基本都会用到 websocket
3. 传统http实现推送技术的弊端
- 传统的技术一般使用 http + 定时器的方式（轮询）去实现
- 很多网站为了实现推送技术，所用的技术都是轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。
- 这种传统的模式带来很明显的缺点，即：浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
- 而比较新的技术去做轮询的效果是Comet。
- 这种技术虽然可以双向通信，但依然需要反复发出请求。而且在Comet中，普遍采用的长链接，也会消耗服务器资源。
4. WebSockt 常用API
- 实例化websocket的对象
const ws =newWebSocket('ws://127.0.0.1:8080')
- 监听连接状态
ws.onopen=function(){
console.log('ws连接状态：'+ ws.readyState);// 成功则发送一个数据
ws.send('111');}
- 接收消息
ws.onmessage=function(data){// data.data 就是接收到的数据}
- 发送消息
ws.send(data)// data必须是字符串
- 监听连接关闭事件
ws.onclose=function(){
console.log('ws连接状态：'+ ws.readyState);}
- 监听错误
ws.onerror=function(error){
console.log(error);}
5. WebSocket实现聊天室
1. 项目结构
2.app.js 代码
let WebSocketServer =require('ws').Server;
wss =newWebSocketServer({ip:'0.0.0.0',port:8080});let wsolist =[]
console.log('启动服务器：ws://127.0.0.1:8080');
wss.on('connection',function(ws, req){
wsolist.push(ws)
console.log('和客服端'+ req.connection.remoteAddress
+'建立了一个连接，是连接的第'+(wsolist.length +1)+'个用户');
ws.on('message',function(message){
console.log(message.toString());
wsolist.forEach((wso)=>{
wso.send(message.toString())})});
ws.on('close',functionclose(){
wsolist = wsolist.filter(obj=> obj !== ws)});});
3. index.html
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container{margin: 10px 0;border: 1px solid pink;}</style></head><body><h1>websocket聊天室</h1><div><inputtype="text"placeholder="请输入消息内容"id="msg"><buttonid="sendBtn">发送</button><buttonid="closeBtn">关闭ws聊天室</button></div><divclass="container"></div></body></html>
4. js 代码
// 1. 获取元素let msg = document.querySelector('#msg')let send_btn = document.querySelector('#sendBtn')let close_btn = document.querySelector('#closeBtn')let container = document.querySelector('.container')// 2. 建立ws连接let ws =newWebSocket('ws://192.168.29.54:8080')// 3. 实现消息的发送
send_btn.addEventListener('click',function(){
ws.send(msg.value)
msg.value =''})// 4. 实现消息的接收
ws.onmessage=function(data){
console.log(data.data);
container.innerHTML +=` <div>${data.data}</div>`}// 5. 关闭ws连接
close_btn.addEventListener('click',function(){
ws.close()})
1. 希望本文能对大家有所帮助，如有错误，敬请指出
2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）
3. 拜谢各位！后续将继续奉献优质好文
4. 如果存在疑问，可以私信我(主页有Q)
本文转载自: https://blog.csdn.net/qq_35942348/article/details/126657298
版权归原作者 欧阳呀 所有， 如有侵权，请联系我们删除。
版权归原作者 欧阳呀 所有， 如有侵权，请联系我们删除。