Vue socket.io模块实现聊天室流程详解
volit_ 人气:01.定义
socket.io是一个可以在客户端和服务器之间实现 低延迟, 双向 和 基于事件的 通信的库。它建立在websocket之上,且当浏览器不支持websocket时会自动切换为HTTP长轮询或自动重新连接。
ps.虽然socket.io可能使用websocket进行传输,但是由于它为每个数据包添加了额外的元数据,所以websocket客户端无法连接socket.io客户端,而socket.io客户端同样也无法连接websocket客户端。
2.特点
(1)HTTP长轮询回退
若无法建立Websocket连接,将自动回退为HTTP长轮询
(2)自动重新连接
在某些情况下,服务器和客户端之间的websocket连接可能会中断,且连接双方可能都不知道链接断开的状态。而socket.io包含一个心跳机制来定期检测客户端的连接状态。当客户端最终断开连接,它会以指数回退延迟自动重新连接,以免服务器不堪重负。
(3)数据包缓冲
当客户端断开连接时,数据包会自动缓冲,并在重新连接时发送
(4)广播/单播
socket.io提供了可以方便的对消息进行广播和单播的api
(5)多路复用
可以通过单条共享连接拆分应用程序的逻辑,实际应用上可以理解为聊天室里的房间
3.实例
(1)安装
npm install socket.io
(2)初始化
服务器端:
const { Server } = require("socket.io"); const io = new Server(3000, { /* options */ }); io.on("connection", (socket) => { // ... });
客户端:
<script src="/socket.io/socket.io.js"></script> <script> const socket = io(); </script>
(3)发送消息
服务器端:
io.on("connection", (socket) => { socket.on("send_msg",(data)){ console.log(data); io.emit("send_msg",data); //群发消息 socket.emit("send_msg",data); //私发消息 } });
客户端:
<script> const socket = io(); socket.emit("send_msg","你好"); socket.on("send_msg",(msg)=> { console.log(msg); }) </script>
通过上述代码就可以实现一个基本聊天室的雏形了,总体操作实现起来非常简单。
加载全部内容