WebSocket运行正常但报ReferenceError: Pusher is not defined如何解决？

这个错误的核心原因是Laravel Echo 配置使用 pusher 广播器时，依赖的 Pusher JS 客户端库未正确引入。虽然你的 WebSocket 能正常运行，但 Echo 初始化时会尝试查找全局或指定的 Pusher 实例，找不到就会抛出该错误。以下是具体解决方法：

1. 安装 Pusher JS 库 #

首先确保项目中安装了 Pusher 的客户端依赖：

npm install pusher-js
# 或用 yarn
yarn add pusher-js

2. 引入并关联 Pusher 到 Echo #

有两种方式可以让 Echo 找到 Pusher 实例：

方式一：全局挂载 Pusher #

在项目入口文件（如 main.js/main.ts）中导入并挂载到全局：

import Pusher from 'pusher-js';
// 挂载到window对象，让Echo能全局访问
window.Pusher = Pusher;

之后你的原有 Echo 配置代码就能正常工作，无需修改。

方式二：直接传入 Pusher 实例到 Echo #

如果不想全局挂载，可以在 Echo 配置中直接创建 Pusher 实例并传入：

import Pusher from 'pusher-js';
import Echo from 'laravel-echo';

export const echoInstance = new Echo({
  broadcaster: "pusher",
  key: process.env.PUSHER_APP_KEY,
  // 直接传入Pusher客户端实例
  client: new Pusher(process.env.PUSHER_APP_KEY, {
    wsHost: process.env.PUSHER_HOST,
    wsPort: process.env.PUSHER_PORT,
    forceTLS: true,
    encrypted: true,
    cluster: process.env.PUSHER_APP_CLUSTER,
    disableStats: true,
  }),
  authEndpoint: process.env.PUSHER_AUTH_ENDPOINT,
  auth: {
    headers: {
      Accept: "application/json",
      Authorization: `Bearer ${existingToken}`,
    },
  },
  enabledTransports: ['ws', 'wss'],
});

3. 验证构建与缓存 #

安装依赖后，务必重新构建项目（如执行 npm run dev 或 npm run build），避免旧的构建缓存导致库未加载。

额外说明 #

如果你的后端实际使用的是自定义 WebSocket 服务而非 Pusher 官方服务，也可以考虑将 Echo 的广播器改为对应类型（如 socket.io），但这需要同步调整后端配置和前端依赖。

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