socket.io 客户端在本机反应中接收对同一事件的多个调用

Posted 2023-03-07

【中文标题】socket.io 客户端在本机反应中接收对同一事件的多个调用

【英文标题】：socket.io client receiving multiple calls to same event in react native

【发布时间】：2020-09-18 09:18:46

【问题描述】：

每当用户登录到应用程序时。他通过

加入服务器中自己的userId

socket.join(uid)

而 nodejs 端点看起来像

router.post("/secured/postmessage", (req,res)=>
  const  message, receiverId  = req.body;

 io.to(receiverId).emit("newMessage", 
      msgBody: message,
      sender: req.currentUser,
    );
)

现在是 RN 部分：

聊天界面功能组件的样子

export default function Chat( navigation ) 

//receiveing the socket as props from previous screen
  const  contact, socket  = navigation.state.params;
  // console.log("in conversation contact is ", contact);


  const [data, setData] = useState([
    
      id: 8,
      date: "9:50 am",
      type: "in",
      message: "Lorem ipsum dolor sit a met",
    ,
  ]);

//this gets fired multiple times <--------
socket.on("newMessage", ( msgBody, sender ) => 
    setData((oldMessages) => [...oldMessages, msgBody]);
  );

//handleSubmit gets fired when user types message and press SEND
const handleSubmit()
//sending the post request to server with message
 axios.post(baseUrl + "/secured/postmessage", 
    message: message,
    receiverId: contact._id,
    )

return(
  ...
  )

而 nodejs 端点看起来像

router.post("/secured/postmessage", (req,res)=>
 io.to(receiverId).emit("newMessage", 
      msgBody: messageResult,
      sender: req.currentUser,
    );
)

聊天屏幕中的socket.on('newMessage') 被多次触发，我不知道为什么

【问题讨论】：

您是否多次调用函数Chat()？如果是这样，您每次都在注册一个新的 socket.on("newMessage", ...) 处理程序并且它们会累积。

【参考方案1】：

我认为您可以尝试仅在安装 Chat 组件时添加套接字事件处理程序。 在功能组件中，您可以使用 React.useEffect()。

参考下面

React.useEffect(() => 
    socket.on("newMessage", ( msgBody, sender ) => 
        setData((oldMessages) => [...oldMessages, msgBody]);
    );
,[]);

【讨论】：

效果很好，但您能解释一下原因吗？根据我的理解，当组件成功安装时调用 useEffect 钩子。但在这里我们一直在监听套接字事件。所以在每次调用套接字事件时，组件是重新安装还是更新？

据我所知，只要你的组件重新渲染，socket.on('newMessage'..) 语句就会被执行。这意味着附加“newMessage”事件处理程序可以多次发生。所以我认为最好仅在通过传递[] 作为 useEffect 的第二个参数来安装组件时附加事件处理程序。