使用Laravel Echo服务器作为推动器更换时,Websocket连接上的握手问题
我想使用 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论