next.js socket.io 使用效果不更新套接字消息

Posted 2023-04-14

【中文标题】next.js socket.io 使用效果不更新套接字消息

【英文标题】：next.js socket.io useeffect not updating on socket message

【发布时间】：2021-05-16 20:43:40

【问题描述】：

我在 next.js 上遇到了我的套接字客户端的问题。我已经创建了一个上下文，用于为应用程序中的所有组件提供我的套接字实例，问题是当我想在我的组件上使用套接字上下文时，我正在使用 useeffect 挂钩，一旦套接字发生更改，我将处理消息调用（就像我在网上看到的任何教程一样）但是在套接字上有新消息时，根本不会调用 useEffect 。对于那些可能认为这是上下文问题的人，我应该说它不是我已经在组件上测试了套接字启动并且仍然没有调用 useeffect。 这是我使用套接字实例的方式：

export default function MyComp(props)
    const cookies = new Cookies()
    const token = cookies.get('token');
    const socket = io(routes.socket_url,  path: '/socket',
        transports: ['websocket'],
        query:
        token,
        user_id:'someuserid'
     
    );

   useEffect(() => 
        console.log('socket changed');
        console.log(socket);
        console.log('socket changed');
   ,[socket])

我实际上可以在我的 devtools 上看到连接，也可以在网络选项卡中看到消息，所以这意味着我们有一个连接（也在服务器上检查）但是 console.log() 部分永远不会在新消息上调用。

这是我使用上下文的组件。

export default function MyComp(props)
   const socket = useContext(SocketContext);
   useEffect(() => 
        console.log('socket changed');
        console.log(socket);
        console.log('socket changed');
   ,[socket])

这个连接也可以在 devtools 中使用，它会在网络选项卡上获得新消息，但从不调用日志记录。

感谢您的帮助。

【问题讨论】：

useEffect 调用中的第二个参数是依赖关系array。尝试将其更改为[socket]。

谢谢。这实际上是我的错误。仍然 useffect 没有按预期工作。

不确定您的套接字实现是否正确，可能值得看看valentinog.com/blog/socket-react/…。

【参考方案1】：

伙计们，我找到了答案。我正在使用 socket.io-client v 3.1.1 并开始测试其他版本。出于某种奇怪的原因 在版本 3 中，尽管连接已经建立，但套接字实例没有收到任何消息，并且我可以在网络选项卡中看到消息。 无论如何，我将版本从 3 更改为 2.1.1，它的工作方式就像一个魅力。