我试图使用推流库创建一个实时聊天应用程序。我使用Next.js。我遵循文档和实时功能的工作，但当我只是在网站上乱弄时，我创建了许多并发连接。
我发现这篇文章由pusher：Why Am I Seeing More Channels Connections Than I Expect?.
它说：在使用React时，你需要在useEffect中使用空的dependency array []初始化它。这个useEffect只会在页面初始化时运行一次。

React.useEffect(() => { 
    const pusher = new Pusher("APP_KEY", {cluster: "CLUSTER"});
}, [])

字符串
我在我的项目中做到了这一点，但它仍然保持着太多的联系。
这就是我曾经尝试过的：

useEffect(() => {
    const pusher = new Pusher(process.env.NEXT_PUBLIC_PUSHER_APP_KEY!, {
      cluster: "us3",
    });
    const channel = pusher.subscribe("channel");

    const eventHandler = () => {
      console.log("event");
    };
    channel.bind("event", eventHandler);

    return () => {
      channel.unbind("event", eventHandler);
      pusher.unsubscribe("channel");
      pusher.disconnect();
    };
  }, []);

型
我试着在my _app.tsx中这样做，只是在一个随机文件中，我试着不使用pusher.disconnect（）在最后，我试着从另一个文件导入pusher示例，就像我在视频中看到的那样。无论我尝试什么，每当我在页面之间导航时，它总是创建更多的pusher连接。
Pusher文档说它应该只自动创建一个连接并重用它，但这不是我正在发生的事情。
如果有任何更多的信息，将有助于解决这个问题，请让我知道。谢谢！