CODEWITHSUNDEEP
laravelsocket.iolaravel-echo
Emilio Dami Silva
Emilio Dami Silva

Reputation: 25

Socket.io shows nothing in web browser chrome with redis and Laravel-echo-server

I configured Laravel Echo, Laravel-echo-server, Redis, Socket.io but, after three weeks of trying and reading every problem posted here on the stack overflow and the documentation I found, I can't get it to work in the browser, chrome doesn't show anything, although not Redis and Laravel-echo-server everything works. Some help?

See my last configuration:

/routes/Web.php

Auth::routes();

Route::get('/', function() {
    return view('welcome');
});

Route::get('/welcome', function() {
    return view('welcome');
});

Route::post('/messages', function () {
    $data = request()->all();
    $message = \App\Message::create($data);
    broadcast(new \App\Events\SendMessage($message));
    return redirect('/messages');
});

Route::get('/messages', function () {
    $data = request()->all();
    \App\Message::create($data);
    return view('message');
});

/resources/views/Messages.blade.php

@extends('layouts.app')
@section('content')
<form action="" method="post" class="container">
    @csrf
    <input type='hidden' value={csrfToken} id='js-csrf' />
    <input type="text" name="title" class="form-control" placeholder="Title"> 
    <textarea type="text" name="body" class="form-control" placeholder="Message...">
    </textarea>
    <input type="submit" value="Send" class="btn btn-primary">
</form>
@endsection

/resources/js/App.js

require('./bootstrap');

window.Vue = require('vue').default;

Vue.component('example-component', 

require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app',
});

/resources/js/bootstrap.js

        window._ = require('lodash');

        try {
            window.Popper = require('popper.js').default;
            window.$ = window.jQuery = require('jquery');
            require('bootstrap');
        } catch (e) {}

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

        import Echo from 'laravel-echo';
        window.io = require('socket.io-client');
    
        window.Echo = new Echo({
            broadcaster: 'socket.io',
            host: window.location.hostname + ':6001'
        })

/resources/js/components/ExampleComponent.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Messagens</div>
                    <div class="card-body">
                        <div class="alert alert-info" v-if="messages.length <= 0"></div>
                        <p v-for="(message, index) in messages" :key="index">
                            <strong> {{message.title}}</strong> <br />
                            {{message.body}} <br />
                            <small> {{ message.created_at }} </small>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
        export default {
            data() {
                return {
                    messages: []
                }
            },
            mounted() {
                
                window.Echo.channel('message-received')
                    .listen('.message', (e) => {
                        this.messages.push(e);
                    }
                );
            }
        }
    </script>

/config/App.php

'providers' => [
    App\Providers\BroadcastServiceProvider::class,

'aliases' => [
    'Redis' => Illuminate\Support\Facades\Redis::class,

/config/broadcasting.php

  'redis' => [
            'driver' => 'redis',
            'client' => env('REDIS_CLIENT', 'predis'),
            'options' => [
                'cluster' => env('REDIS_CLUSTER', 'redis'),
                'prefix' => env('REDIS_PREFIX', ''),
            ],
            'default' => [
                'url' => env('REDIS_URL'),
                'host' => env('REDIS_HOST', '127.0.0.1'),
                'password' => env('REDIS_PASSWORD', null),
                'port' => env('REDIS_PORT', 6379),
                'database' => env('REDIS_DB', 0),
            ],
            'cache' => [
                'url' => env('REDIS_URL'),
                'host' => env('REDIS_HOST', '127.0.0.1'),
                'password' => env('REDIS_PASSWORD', null),
                'port' => env('REDIS_PORT', 6379),
                'database' => env('REDIS_CACHE_DB', 1),
            ],
        ],

.ENV

LARAVEL_ECHO_PORT=6001

QUEUE_CONNECTION=sync
QUEUE_DRIVER=redis
BROADCAST_DRIVER=redis

CACHE_DRIVER=file
SESSION_DRIVER=file
SESSION_LIFETIME=120

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

ECHO_HOST=192.241.159.78
ECHO_PORT=6001
ECHO_SCHEME=http

/routes/channels.php

Broadcast::channel('message-received', function ($user) {
    return $user;
});

/App/Events/SendMessage.php

class SendMessage implements ShouldBroadcast {
    use Dispatchable, InteractsWithSockets, SerializesModels;
    private $message;

    public function __construct(Message $message) {
        $this->message = $message;
    }

    public function broadcastOn() {                       
        return new Channel('message-received');
    }

    public function broadcastWith() { 
        var_dump($this->message->toArray());
        return $this->message->toArray(); 
    }

    public function broadcastAs() {
        return 'message';
    }

}

Dependencies

php -v
PHP 7.3.26-1+ubuntu18.04.1+deb.sury.org+1 (cli) (built: Jan 13 2021 08:00:44) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.3.26, Copyright (c) 1998-2018 Zend Technologies
with Zend OPcache v7.3.26-1+ubuntu18.04.1+deb.sury.org+1, Copyright (c) 1999-2018, by Zend Technologies

Laravel Framework: 8.24.0
laravel-echo-server: 1.6.2
redis-cli: 4.0.9
laravel-echo: 1.10.0
socket.io: 3.1.0
socket.io-client: 3.1.0 fix with: 2.3.0
vue-axios: 3.2.4"
vuex: 4.0.0-rc.2**

Package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@vue/compiler-sfc": "^3.0.5",
        "axios": "^0.21.1",
        "bootstrap": "^4.0.0",
        "jquery": "^3.2",
        "laravel-mix": "^6.0.11",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.6.12",
        "vue-loader": "^15.9.5",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "karma": "^0.13.19",
        "laravel-echo": "^1.10.0",
        "socket.io": "^3.1.0",
        "socket.io-client": "^3.1.0", fix with 2.3.0
        "vue-axios": "^3.2.4",
        "vuex": "^4.0.0-rc.2"
    },

php artisan queue:work

** Install Redis **

sudo apt install php-pear
sudo apt install php-dev
sudo pecl install redis
extension = redis.io
sudo service apache2 restart

** Redis-cli monitor **

1612460665.656384 [0 192.241.159.78:33820] "SELECT" "0"
1612460665.656635 [0 192.241.159.78:33820] "EVAL" "for i = 2, #ARGV do\n  redis.call('publish', ARGV[i], ARGV[1])\nend" "0" 
    "{
        \"event\":\"message\",
        \"data\":
        {
            \"id\":560,
            \"title\":\"Message title\",
            \"body\":\"Message Content, here are all the details of the message that does not appear in the browser at all.\",
            \"content\":null,
            \"created_at\":\"2021-02-04T17:44:25.000000Z\",
            \"updated_at\":\"2021-02-04T17:44:25.000000Z\",
            \"socket\":null
        },
        \"socket\":null
    }" 
    "message-received"

1612460665.656691 [0 lua] "publish" "message-received" 
    "{
        \"event\":\"message\",
        \"data\":
        {
            \"id\":560,
            \"title\":\"Message title\",
            \"body\":\"Message Content, here are all the details of the message that does not appear in the browser at all.\",
            \"content\":null,
            \"created_at\":\"2021-02-04T17:44:25.000000Z\",
            \"updated_at\":\"2021-02-04T17:44:25.000000Z\",
            \"socket\":null
        },
        \"socket\":null
    }"

Allow listen 6001

In order for Laravel and Redis to work perfectly I released port 6001 but in production you have to be careful.

sudo ufw allow 6001

L A R A V E L E C H O S E R V E R version 1.6.2

⚠ Starting server in DEV mode...

✔  Running at localhost on port 6001
✔  Channels are ready.
✔  Listening for http events...
✔  Listening for redis events...

Server ready!

Channel: message-received
Event: message
Channel: message-received
Event: message

Laravel-echo-server.json

{
    "authHost": "http://192.241.159.78",
    "authEndpoint": "/broadcasting/auth",
    "clients": [
        {
            "appId": "***",
            "key": "***"
        }
    ],
    "database": "redis",
    "databaseConfig": {
        "redis": {
            "port": "6379",
            "host": "localhost"
        },
        "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": "*",
        "allowMethods": "GET, POST",
        "allowHeaders": "Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id"
    }
}

And I execute this queue

php artisan queue:work

Nothing appears in the browser. When I switch to versions 2 of Socket.Io and Socket.io-client, an even stranger error appears: TypeError: cb is not a function I also put a dot in the channel name and it didn't solve anything. Help-me please

**Look this picture: @MaartenVeerman ** chrome inspect

Upvotes: 0

Views: 1446

Answers (1)

Emilio Dami Silva
Emilio Dami Silva

Reputation: 25

I don't know if it's a bug or incompatibility between Laravel-echo and Socket.io but when I downgraded the Socket.io-client from version 3.0.3 to 2.3.0 everything worked perfectly. I had tried this before, however it gave another error and I believe it is versions with socket.io, an incompatibility between Socket.io and Socket.io-client. Anyway, I did not study this in depth, but it was worth a month of research. Thank you all for your help!

It is very strange but now it is working perfectly.

Solution here --> [https://github.com/tlaverdure/laravel-echo-server/issues/550]

and here --> [https://stackoverflow.com/questions/65026362/laravel-echo-listener-not-working-on-frontend]

Thank you for Maarten Veerman and Mihai and all of you!!

Upvotes: 1

Related Questions