1 year ago

#385401

test-img

danilocgsilva

Handshake problem on websocket connection when using Laravel Echo Server as Pusher replacement

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"
    }
}

laravel

websocket

broadcast

pusher

0 Answers

Your Answer

Accepted video resources