Vue socket.io模块实现聊天室流程详解

1.定义

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>

​ 通过上述代码就可以实现一个基本聊天室的雏形了，总体操作实现起来非常简单。