Next.js中使用Pusher出现过多并发连接问题求助

核心问题分析 #

你遇到的问题本质是每次页面跳转或组件挂载时都创建了新的Pusher实例——即便按官方文档用了空依赖的useEffect，若实例没有全局复用，依然会重复建立独立连接。Pusher的自动复用连接机制仅针对同一个实例生效，不同实例会各自创建连接。

解决方案 #

1. 创建全局单例Pusher实例

新建工具文件（比如utils/pusher.ts），用单例模式确保整个应用只初始化一次Pusher：

import Pusher from 'pusher-js';

let pusherInstance: Pusher | null = null;

export const getPusherInstance = () => {
  if (!pusherInstance && process.env.NEXT_PUBLIC_PUSHER_APP_KEY) {
    pusherInstance = new Pusher(process.env.NEXT_PUBLIC_PUSHER_APP_KEY, {
      cluster: 'us3',
      // 可选配置：根据需求添加加密、授权端点等
      forceTLS: true,
    });
  }
  return pusherInstance!;
};

2. 在组件中复用单例实例

无论在页面组件还是_app.tsx中，都通过工具函数获取实例，而非每次新建：

import { useEffect } from 'react';
import { getPusherInstance } from '../utils/pusher';

const ChatPage = () => {
  useEffect(() => {
    const pusher = getPusherInstance();
    const channel = pusher.subscribe('channel');

    const eventHandler = () => {
      console.log('event received');
    };

    channel.bind('event', eventHandler);

    // 组件卸载时只清理事件和频道订阅，不要断开全局连接
    return () => {
      channel.unbind('event', eventHandler);
      pusher.unsubscribe('channel');
    };
  }, []);

  return <div>实时聊天页面</div>;
};

export default ChatPage;

3. 避免错误操作

• 不要在组件卸载时调用pusher.disconnect()：这会销毁全局连接，下次需要时只能重新建立新连接，彻底失去复用效果。
• 禁止在循环渲染的组件（比如列表项）中初始化Pusher：每个子组件都会创建新实例，直接导致大量并发连接。
• 若使用Next.js 13+ App Router，确保只在Client Components（添加'use client'指令）中使用Pusher，Server Components无法执行客户端代码，误写会导致客户端重复初始化实例。

4. 验证连接状态

可以在Pusher控制台的Debug Console实时查看连接数，确认单例模式生效后，连接数会稳定在1个（或对应在线用户数），而非随页面跳转持续增长。

内容的提问来源于stack exchange，提问作者efcisaac07