亲宝软件园·资讯

展开

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

volit_ 人气:0

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>

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

加载全部内容

相关教程
猜你喜欢
用户评论