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, {  });
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>

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

到此这篇关于Vue socket.io模块实现聊天室流程详解的文章就介绍到这了,更多相关Vue socket.io实现聊天室内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！