laravel websocket客户端不能建立连接，但在站点/laravel-websockets中连接是可能的；

Question

我使用的是beyondcode/laravel-websockets包。

以下是我的配置文件。

boroadcasting.php:

'connections' => [

        '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'),
                'encrypted' => true,
                'host' => '127.0.0.1',
                'port' => 6001,
                'scheme' => 'http'
            ],
        ],



websocket.php:
    'apps' => [
        [
            'id' => env('PUSHER_APP_ID'),
            'name' => env('APP_NAME'),
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'path' => env('PUSHER_APP_PATH'),
            'capacity' => null,
            'enable_client_messages' => false,
            'enable_statistics' => true,
        ],
    ],

.env
PUSHER_APP_ID=123456789
PUSHER_APP_KEY=appkey
PUSHER_APP_SECRET=dfghfgjhhjkghkhjdfasrwetrtyuuipjmgh
PUSHER_APP_CLUSTER=mt1

我在我的app.js中使用了以下内容：

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}


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,
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
});

然后我运行npm run watch。我还没有尝试去听任何东西，因为这段代码不能正常工作。并表示无法在控制台中建立连接。这是因为site/laravel-websockets工作正常，连接也没有问题。

这是在google chrome控制台中显示的错误。

app.js?id=4c7e619c826e5fe97c8b:15800 WebSocket connection to 'wss://mysite.test/app/appkey?protocol=7&client=js&version=6.0.3&flash=false' failed: WebSocket is closed before the connection is established.

Answer 1

我找到原因了。我在本地机器上测试了这个应用程序，因此我不能使用TLS。echo的默认行为强制TLS。因此，下面的配置可以解决这个问题。

如果您正在使用不安全的websocket或在本地set forceTLS: false上测试

    window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
    forceTLS: false
});

Answer 2

将以下内容添加到echo() enabledTransports下的app.js：'ws'，'wss‘

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
    enabledTransports: ['ws', 'wss'] // <- add this param