在使用 Socket.io 进行移动端实时通讯的时候，有时会出现事件重复触发的情况。这是一个很常见的问题，但解决起来却需要一定的技巧。
问题分析
事件重复触发的原因是因为移动端网络环境的不稳定性以及 Socket.io 内部的事件机制。当网络不稳定时，Socket.io 客户端会尝试重新连接服务器，因此会产生多个连接实例。在连接实例没有断开之前，事件会被重复触发。
解决方案
为了解决这个问题，我们需要在客户端和服务器端都做出相应的调整。
客户端
在客户端，我们需要对事件进行节流（throttling）操作。节流操作可以通过 lodash 的 throttle 方法来实现。为了避免一些操作被阻塞，我们设置一个时间间隔，例如 100 毫秒。
import throttle from 'lodash/throttle';
// ...
socket.on('event', throttle(() => {
// 处理事件
}, 100));服务器端
在服务器端，我们需要对事件进行防抖（debouncing）操作。防抖操作可以通过 lodash 的 debounce 方法来实现。防抖操作会将多个连续的事件合并成一个，只有在一定时间内没有再次触发事件才会执行。
import debounce from 'lodash/debounce';
// ...
socket.on('event', debounce(() => {
// 处理事件
}, 100));代码示例
在下面的示例中，我们创建了一个简单的聊天室应用程序。在客户端和服务器端都使用了节流和防抖操作，以解决 Socket.io 在移动端出现事件重复触发的问题。
客户端代码示例
-- -------------------- ---- -------
------ -------- ---- ------------------
------ -- ---- -------------------
----- ------ - ----------------------------
-- ------
--------------- --------- -------------- -- -
----- -------- - -----------------------------
-------------------- - ----
--------------------------------------------------------------
-- ------
-- ------
---------------------------------------
--------------------------- ------- -- -
-----------------------
----- ----- - -----------------------------------------
----- ------- - -------------------
-- --------- -
----------------- --------- ---------
----------- - ---
-
---服务器端代码示例
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - ---------------------
----- ------ - -----------------------
----- -- - -----------------------------
-- ------
------------------- -------- -- -
--------------- --------- -------------- -- -
------------- --------- -----
-- ------
---
------------------- -- -- -
---------------------- -- ---------
---总结
在移动端使用 Socket.io 进行实时通讯时，可能会出现事件重复触发的问题。为了解决这个问题，我们需要在客户端和服务器端都进行节流和防抖操作。节流操作可以减少客户端事件的触发次数，防抖操作可以将连续的事件合并成一个，从而避免事件重复触发的情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e40a75f6b2d6eab3f64d6e