在现代的 Web 应用中，实时通信是不可避免的一部分。Socket.io 是一种广泛使用的实时通信库，它允许服务器和客户端之间进行实时的双向通信。但是，在 Socket.io 中，数据包的重复发送是一个常见的问题。
当服务器向客户端发送消息时，Socket.io 会将消息发送给所有连接到该服务器的客户端。如果客户端断开连接并重新连接，Socket.io 会将该消息再次发送给该客户端，从而导致数据包的重复发送。
在本文中，我们将介绍 Socket.io 如何避免数据包的重复发送，并提供示例代码。
避免数据包重复发送的方案
方案一：使用 acknowledgments 来确认消息
在 Socket.io 中，服务器可以使用 acknowledgments 来确认消息是否被客户端正确接收。当客户端接收到服务器发送的消息后，它可以通过调用 callback 函数来通知服务器。如果服务器收到了来自客户端的确认消息，它将不会再次发送相同的消息。
以下是服务器端代码示例：
const socket = io();
socket.on('message', function (data, fn) {
fn('received');
});以下是客户端代码示例：
-- -------------------- ---- -------
----- ------ - -----
-------------------- -------- -- -
---------------------- - -------- ------ ------ -- -------- ---------- -
-- --------- --- ----------- -
-------------------- -----------
-
---
---在上面的示例中，当客户端接收到服务器发送的 message 事件时，它将调用 fn 函数来确认消息已经被正确接收。如果服务器接收到了来自客户端的确认消息，它将不会再次发送相同的消息。
方案二：使用 localStorage 存储消息 ID
另一个避免 Socket.io 数据包重复发送的方案是使用 localStorage 存储消息 ID。每当服务器向客户端发送消息时，它会将消息 ID 添加到 localStorage 中。当客户端重新连接时，它将检查 localStorage 中是否存在这个消息 ID。如果存在，则客户端将不再接收这条消息。
以下是服务器端代码示例：
const socket = io();
socket.on('message', function (data) {
const messageId = data.messageId;
localStorage.setItem(messageId);
});以下是客户端代码示例：
-- -------------------- ---- -------
----- ------ - -----
-------------------- -------- -- -
-------------------- -------- ------ -
----- --------- - ---------------
-- --------------------------------- -
-------
-
-- ----
---
---在上述示例中，当服务器向客户端发送 message 事件时，它会将消息 ID 添加到 localStorage 中。当客户端重新连接时，它将在 message 事件中检查 localStorage 中是否存在这个消息 ID。如果存在，则客户端将不再接收这条消息。
结论
在本文中，我们介绍了两种避免 Socket.io 数据包重复发送的方案。这些方案可以防止客户端在重新连接时接收重复的消息，从而提高了应用程序的稳定性。在实际使用 Socket.io 进行开发时，根据实际需要选择适合自己的解决方案，并根据需要进行修改。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671206d8ad1e889fe2023bfc