Laravel 10 中使用 Socket.io 实现 WebSocket 的相关技术疑问

问题1：使用 Socket.io 是否必须依赖 Laravel Echo？ #

不是必须的。Laravel Echo 只是官方封装的客户端工具，目的是简化 Laravel 广播事件与 WebSocket 驱动的交互逻辑。你完全可以直接使用原生 Socket.io 客户端连接服务端，自行处理事件的订阅、发送和接收——只是需要手动匹配 Laravel 广播事件的 JSON 格式（包含event和data字段）。

问题2：兼容 Socket.io v4 的 laravel-echo-server 替代方案 #

旧版 laravel-echo-server 停留在 Socket.io v2.3.0，无法适配最新版本，推荐以下替代方案：

• Laravel WebSockets 包：开源且官方友好的解决方案，支持 Socket.io 协议，兼容 Socket.io v4，无需额外 Node.js 服务，直接在 Laravel 应用内运行，同时支持 Redis 广播驱动。
• 自定义 Node.js Socket.io 服务：自己编写轻量 Node.js 服务，连接 Laravel 的 Redis 广播频道，监听事件后通过 Socket.io v4 推送给客户端，灵活性极高，完全适配最新版本。
• 社区维护的 laravel-echo-server 分支：GitHub 上有开发者维护的 fork 版本，已更新代码支持 Socket.io v4，可自行搜索使用。

当前 Laravel 10 结合 Socket.io 的正确实践 #

方案A：不使用 Laravel Echo，原生 Socket.io 直接对接 #

1. 配置 Laravel 广播驱动为 Redis：在.env中设置BROADCAST_DRIVER=redis，确保 Redis 服务正常运行。
2. 编写 Node.js Socket.io 服务（适配 v4）：

   const { createClient } = require('redis');
   const { Server } = require('socket.io');
   const http = require('http');
   
   // 创建 HTTP 服务与 Socket.io 实例
   const server = http.createServer();
   const io = new Server(server, {
     cors: { origin: "http://your-laravel-app-domain" } // 允许你的 Laravel 域名跨域
   });
   
   // 连接 Redis 订阅 Laravel 广播频道
   const redisClient = createClient({ url: 'redis://localhost:6379' });
   redisClient.connect();
   const subscriber = redisClient.duplicate();
   subscriber.connect();
   
   // 监听 Redis 广播事件，转发给 Socket.io 客户端
   subscriber.subscribe('laravel_database_your-channel-name', (message) => {
     const eventData = JSON.parse(message);
     io.emit(eventData.event, eventData.data);
   });
   
   // 启动服务
   server.listen(6001);
   

3. 客户端使用 Socket.io v4 连接：

   import { io } from "socket.io-client";
   const socket = io('http://your-node-server-domain:6001');
   
   // 监听 Laravel 广播的事件
   socket.on('your-event-name', (data) => {
     console.log('Received event:', data);
   });
   

4. Laravel 端正常定义广播事件，通过 Redis 广播即可。

方案B：使用 Laravel Echo + Laravel WebSockets（兼容 Socket.io v4） #

1. 安装 Laravel WebSockets 包：

   composer require beyondcode/laravel-websockets
   

2. 发布配置文件：

   php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider"
   

3. 配置.env：

   BROADCAST_DRIVER=pusher
   PUSHER_APP_ID=any-id
   PUSHER_APP_KEY=any-key
   PUSHER_APP_SECRET=any-secret
   PUSHER_HOST=localhost
   PUSHER_PORT=6001
   PUSHER_SCHEME=http
   

4. 调整config/broadcasting.php中的 Pusher 配置，添加兼容选项：

   'pusher' => [
       'driver' => 'pusher',
       'key' => env('PUSHER_APP_KEY'),
       'secret' => env('PUSHER_APP_SECRET'),
       'app_id' => env('PUSHER_APP_ID'),
       'options' => [
           'cluster' => 'mt1',
           'useTLS' => false,
           'encrypted' => false,
           'host' => env('PUSHER_HOST'),
           'port' => env('PUSHER_PORT'),
           'scheme' => env('PUSHER_SCHEME'),
       ],
   ],
   

5. 安装 Laravel Echo 和 Socket.io v4：

   npm install laravel-echo socket.io-client
   

6. 配置 Laravel Echo：

   import Echo from 'laravel-echo';
   import { io } from 'socket.io-client';
   
   window.Echo = new Echo({
       broadcaster: 'socket.io',
       host: window.location.hostname + ':6001',
       client: io // 指定使用 Socket.io v4 客户端
   });
   

7. 启动 WebSocket 服务：

   php artisan websockets:serve
   

8. 之后即可正常使用 Laravel 的广播事件系统，客户端通过 Echo 订阅频道接收事件。

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