使用Laravel Echo服务器作为推动器更换时,Websocket连接上的握手问题

发布于 2025-01-19 11:40:16 字数 3638 浏览 1 评论 0原文

我想使用 Laravel Echo Server 作为 Pusher 替代品

我正在寻找用于 Laravel 广播的 Laracast 教程系列:https://laracasts.com/series/get-real-with-laravel-echo

我已经成功创建了一个测试 JavaScript 客户端,用于监听渠道订单的事件。这是客户端代码:

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,
    forceTLS: true
});

window.Echo.channel('orders')
    .listen('OrderStatusUpdate', e => {
        console.log("Status has been updated behind the scenes.")
        console.log(e);
    });

但是我工作的公司需要有自己的websocket资源,所以我们不能依赖Pusher。

然后,我们正在开发 Laravel Echo Server: https://github.com/tlaverdure/Laravel-回声服务器。几乎一切都正常。我们更改了 config/broadcasting.php 选项以适应 Laravel Echo Server。成功地我们可以看到 laravel echo log 中发出的事件,只需更改 config/broadcasting.php 中的一些配置参数即可:

'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'),
        'useTLS' => false,
        'host' => '192.168.15.36',
        'port' => 6001,
        'scheme' => 'http'
    ],
    'client_options' => [
        // Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
    ],
],

地址 192.168.15.36 是本地 IP 地址。

还更改了客户端代码来处理更改:

import Echo from 'laravel-echo';

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

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    forceTLS: false,
    wsHost: '192.168.15.36',
    wsPort: 6001,
    encrypted: false,
    enabledTransports: ['ws']
});

window.Echo.channel('orders')
    .listen('OrderStatusUpdate', e => {
        console.log("Status has been updated behind the scenes.")
        console.log(e);
    });

并且 .env 是:

PUSHER_APP_ID=5073cdd7d79e501f
PUSHER_APP_KEY=3ad3a4d1eb46d4d4794533414dce747a
PUSHER_APP_SECRET=

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

但是在客户端 javascript(使用 Chrome)中,我在浏览器控制台中看到一条错误消息: WebSocket 连接到'ws://192.168.15.36:6001/app/3ad3a4d1eb46d4d4794533414dce747a?protocol=7&client=js&version=7.0.6&flash=false'失败:连接在收到握手响应之前关闭

如何解决这个问题呢?是否还需要一些东西才能使 Laravel Echo Server 作为 Pusher 的替代品?

可能还值得在这里展示 laravel echo 服务器设置:

{
    "authHost": "http://192.168.15.36",
    "authEndpoint": "/broadcasting/auth",
    "clients": [
        {
            "appId": "5073cdd7d79e501f",
            "key": "3ad3a4d1eb46d4d4794533414dce747a"
        }
    ],
    "database": "redis",
    "databaseConfig": {
        "redis": {},
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": true,
    "host": null,
    "port": "6001",
    "protocol": "http",
    "socketio": {},
    "secureOptions": 67108864,
    "sslCertPath": "",
    "sslKeyPath": "",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "subscribers": {
        "http": true,
        "redis": true
    },
    "apiOriginAllow": {
        "allowCors": true,
        "allowOrigin": "http://192.168.15.36:80",
        "allowMethods": "GET, POST",
        "allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
    }
}

I want to use Laravel Echo Server as Pusher replacement

I am seeking the Laracast tutorial series for Laravel broadcasting: https://laracasts.com/series/get-real-with-laravel-echo.

I have succesfully created a testing javascript client that listens to the events for channel orders. This is the client code:

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,
    forceTLS: true
});

window.Echo.channel('orders')
    .listen('OrderStatusUpdate', e => {
        console.log("Status has been updated behind the scenes.")
        console.log(e);
    });

But the company where I work requires to have their own websocket resource, so we cannot depends upon Pusher.

Then, we are working on Laravel Echo Server: https://github.com/tlaverdure/Laravel-Echo-Server. Almost everything is working. We have changed the config/broadcasting.php options to fit to Laravel Echo Server. And successfully we can see the events being emitted inside laravel echo log, just changing some configuratons parameters in config/broadcasting.php:

'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'),
        'useTLS' => false,
        'host' => '192.168.15.36',
        'port' => 6001,
        'scheme' => 'http'
    ],
    'client_options' => [
        // Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
    ],
],

The address 192.168.15.36 is the local ip address.

Also changed the client code to deal with the changes:

import Echo from 'laravel-echo';

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

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    forceTLS: false,
    wsHost: '192.168.15.36',
    wsPort: 6001,
    encrypted: false,
    enabledTransports: ['ws']
});

window.Echo.channel('orders')
    .listen('OrderStatusUpdate', e => {
        console.log("Status has been updated behind the scenes.")
        console.log(e);
    });

And the .env is:

PUSHER_APP_ID=5073cdd7d79e501f
PUSHER_APP_KEY=3ad3a4d1eb46d4d4794533414dce747a
PUSHER_APP_SECRET=

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

But in the client javascript (using Chrome) I see an error message in the browser console: WebSocket connection to 'ws://192.168.15.36:6001/app/3ad3a4d1eb46d4d4794533414dce747a?protocol=7&client=js&version=7.0.6&flash=false' failed: Connection closed before receiving a handshake response.

How to solve this problem? Is there something that is needed furthermore to make Laravel Echo Server works as a Pusher replacement?

May worth show here the laravel echo server settings as well:

{
    "authHost": "http://192.168.15.36",
    "authEndpoint": "/broadcasting/auth",
    "clients": [
        {
            "appId": "5073cdd7d79e501f",
            "key": "3ad3a4d1eb46d4d4794533414dce747a"
        }
    ],
    "database": "redis",
    "databaseConfig": {
        "redis": {},
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": true,
    "host": null,
    "port": "6001",
    "protocol": "http",
    "socketio": {},
    "secureOptions": 67108864,
    "sslCertPath": "",
    "sslKeyPath": "",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "subscribers": {
        "http": true,
        "redis": true
    },
    "apiOriginAllow": {
        "allowCors": true,
        "allowOrigin": "http://192.168.15.36:80",
        "allowMethods": "GET, POST",
        "allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
    }
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文