WebSocket 在连接建立之前关闭。适用于 VPS 的 Soketi 应用 Laravel

Question

我的 Laravel 10 项目中有一个持续几天的问题，我正在我的 VPS Ubunto 20.04 上使用 https://docs.soketi.app 实现 websockets，并且在我的项目中我有正在运行的 soketi 容器对我来说：

soketi:
       image: 'quay.io/soketi/soketi:latest-16-alpine'
       environment:
         SOKETI_METRICS_ENABLED: 1
       ports:
         - '6001:6001'
         - '9601:9601'
       networks:
         - network_forms
       restart: always

访问 http://127.0.0.1:6001 和 http://xx.xxx.xx.xxx:6001 时，均收到 OK

在我的 .env 文件中，我定义了以下设置：

PUSHER_APP_ID=application id

PUSHER_APP_KEY=application key

PUSHER_APP_SECRET=application secret

PUSHER_HOST=localhost

PUSHER_PORT=6001

PUSHER_SCHEME=http

PUSHER_APP_CLUSTER=mt1

在 config/broadcasting.php 文件中我有：

'pusher' => [
               'driver' => 'pusher',
               'key' => env('PUSHER_APP_KEY'),
               'secret' => env('PUSHER_APP_SECRET'),
               'app_id' => env('PUSHER_APP_ID'),
               'options' => [
                   'host' => env('PUSHER_HOST') ?: 'api-'.env('PUSHER_APP_CLUSTER', 'mt1').'.pusher.com',
                   'port' => env('PUSHER_PORT', 443),
                   'schema' => env('PUSHER_SCHEME', 'https'),
                   'encrypted' => true,
                   'useTLS' => env('PUSHER_SCHEME', 'https') === 'https',
               ],
               'customer_options' => [
                   // Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
               ],
           ],

最后，我在 bootstrap.js 中：

import echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new echo({
       broadcaster: 'pusher',
       key: import.meta.env.VITE_PUSHER_APP_KEY,
       cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
       wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
       wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
       wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
       forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
       encrypted: true,
       disableStats: true,
       enabledTransports: ['ws', 'wss'],
});

与“wss://localhost:6001/app/app-key?protocol=7&client=js&version=7.6.0&flash=false”的 WebSocket 连接失败：WebSocket 在建立连接之前关闭。

ProxyPass/http://localhost:6001/
    ProxyPassReverse / http://localhost:6001/

有什么想法吗？预先感谢！

Answer 1

wss 是安全连接。尝试使用 ws 进行 http 连接，或者将 https 与 wss 一起使用。如果通过 https 打开网站，浏览器会自动使用 wss。