Laravel Echo尝试连接wss而不是ws

基础概念

Laravel Echo 是一个 JavaScript 库，用于在浏览器中实现实时通信。它通常与 Laravel Echo Server 或 Pusher 一起使用，支持 WebSocket 协议（ws 或 wss）进行实时数据传输。

优势

实时性：WebSocket 提供了双向通信通道，允许服务器主动向客户端推送数据。
低延迟：相比轮询，WebSocket 的延迟更低，用户体验更好。
资源高效：WebSocket 连接一旦建立，后续的数据传输开销很小。

类型

ws：WebSocket 协议的非加密版本，适用于本地开发或内部网络环境。
wss：WebSocket 协议的加密版本，通过 TLS/SSL 加密数据传输，适用于生产环境。

应用场景

实时聊天：如在线客服、即时通讯应用。
实时通知：如邮件、短信、应用内通知。
实时数据更新：如股票行情、游戏状态更新。

为什么 Laravel Echo 尝试连接 wss 而不是 ws？

Laravel Echo 默认尝试连接 wss（WebSocket Secure），因为 wss 提供了数据传输的安全性。在生产环境中，出于安全考虑，建议使用 wss 来保护数据传输。

解决问题的方法

如果你希望 Laravel Echo 连接到非加密的 WebSocket 服务器（ws），可以在配置文件中进行修改。

修改配置

打开 config/broadcasting.php 文件。
找到 connections 部分，修改 redis 或 pusher 的配置：

'connections' => [
    'redis' => [
        'driver' => 'redis',
        'connection' => 'default',
        'url' => env('REDIS_URL'),
    ],

    'pusher' => [
        'driver' => 'pusher',
        'key' => env('PUSHER_APP_KEY'),
        'secret' => env('PUSHER_APP_SECRET'),
        'app_id' => env('PUSHER_APP_ID'),
        'options' => [
            'cluster' => env('PUSHER_APP_CLUSTER', 'mt1'),
            'useTLS' => false, // 设置为 false 以使用 ws 而不是 wss
        ],
    ],
],

修改 .env 文件中的相关配置：

BROADCAST_DRIVER=pusher
PUSHER_APP_KEY=your-pusher-app-key
PUSHER_APP_SECRET=your-pusher-app-secret
PUSHER_APP_ID=your-pusher-app-id
PUSHER_APP_CLUSTER=mt1

重启 Laravel Echo Server 或相关服务。

示例代码

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: false, // 设置为 false 以使用 ws 而不是 wss
});