前言
Socket.io 是一个流行的实时网络库，它提供了一个简单易用的 API 来处理实时通信。在创造这个库的时候，它的创造者就已经考虑到发送失败消息的机制。本文将深入了解如何在 Socket.io 中处理发送失败的消息以及如何在前端界面中展示这些消息。
Socket.io 发送消息的机制
在 Socket.io 中，发送消息有两个步骤：发送和即时确认。发送发生在客户端，即当我们调用 socket.emit(event, data) 方法时，这条消息就会被发送到服务器。然后服务器会将这条消息广播给所有客户端。广播发生在服务器端，所以在这个环节中也有可能出现错误。如果一切正常，应该可以在接收的客户端中立即看到这条消息。客户端通过 socket.on(event, callback) 方法来监听这条消息。
如果它接收到了这条消息，就会立即向服务器发送一个确认，服务器再将此确认消息发送回发送者。如果发送者在一定时间内没有收到确认消息，则会认为消息发送失败。接收者在多次尝试之后仍然没有收到送达消息，则出现了发送失败的状态。
在 Socket.io 中，处理发送失败的消息需要在客户端和服务器端都进行处理。
客户端处理发送失败的消息
在客户端，我们可以在 connect_error 和 connect_timeout 事件中处理发送失败的消息。
socket.on('connect_error', (error) => {
console.log(`connect_error: ${error.message}`);
});
socket.on('connect_timeout', () => {
console.log('connect_error');
});在这里，我们可以使用 connect_error 事件和 connect_timeout 事件来监视连接错误和连接超时。这些事件是发生在 Socket.IO 客户端和服务器之间的，它们意味着通信已经被中止。我们可以使用这些事件来处理发送失败的消息。
服务器端处理发送失败的消息
在服务器端，我们可以使用 message 事件来监视消息的发送情况。这种情况下，我们需要处理服务器端的 socket 对象。
-- -------------------- ---- -------
------------------- -------- -- -
-------------------- ------ --------- -- -
-- --------------
-----------
---
----------------------- -- -- -
-- ---------
---
---在这里，我们可以看到服务器处理消息的逻辑。我们可以在回调函数中处理发送失败的消息。
如何在前端界面中展示发送失败的消息
最后，需要考虑一下如何在前端界面中展示发送失败的消息。最简单的方法是使用弹出式通知。每当客户端尝试发送消息时，我们可以设置一个计时器，在一定时间内检查该消息是否已成功到达。这就意味着，在确定一定时间内没有收到确认消息后，应该向用户显示一个通知。此时，有一个广泛使用的库可以帮助我们实现这个目标，即 Toastify。
-- -------------------- ---- ------- ------ - ----- - ---- ----------------- ---------------------- ----- -- -- - ---------------------- --- ------------- -- - -------------------- -- ------
在上面的代码中，我们首先使用 react-toastify 库导入通知功能。接下来，在成功发送后，我们向用户显示了一条成功的通知。然后，我们设置了一个定时器，在一定的时间内检查这条消息是否成功到达。如果没有，则向用户展示一条失败的通知。
总结
本文深入探讨了 Socket.io 如何处理发送失败的消息，并提供了相应的代码示例。我们希望这篇文章能够详细介绍如何在前端界面中展示这些消息，并为您的开发工作带来一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b24ad548841e9894e8dce6