Note: I have been on this issue for a week now and I have tried different solutions online including StackOverflow but none works

I have an app that I built in React Native Expo and I am adding a chat feature to the app, I built the app's API with Laravel.

I am now setting up websocket for the chat, I installed Laravel Echo and socket.io on the React Native app (client side) and on the backend (Laravel end) I am using laravel-echo-server and laravel broadcasting

I have set up the websocket and redis, because I am using redis as the broadcasting driver

everything works well on the backend, if an event was dispatched I can see on the laravel queue:work terminal and the laravel-echo-server also prints message Event: message.created Channel: chats1

these are my backend code

Redis configuration in .env file

BROADCAST_DRIVER=redis
QUEUE_CONNECTION=redis

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=port_number
REDIS_CLIENT=predis

the event class

<?php

namespace App\Events;

use App\Models\User;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
use App\Models\Message;

class UserChatEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    /**
     * The order instance.
     *
     * @var \App\Message
     */
    
    public $message;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Message $message)
    {
        $this->message = $message;
    }
    
    
    public function broadcastAs()
    {
        return 'message.created';
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel("chats1");
    }
}

laravel-echo-server.json

{
    "authHost": "https://my_domain.com",
    "authEndpoint": "/broadcasting/auth",
    "clients": [],
    "database": "redis",
    "databaseConfig": {
        "redis": {
            
        },
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": true,
    "host": null,
    "port": "6001",
    "protocol": "http",
    "socketio": {},
    "secureOptions": secret_number,
    "sslCertPath": "",
    "sslKeyPath": "",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "subscribers": {
        "http": true,
        "redis": true
    },
    "apiOriginAllow": {
        "allowCors": true,
        "allowOrigin": "*",
        "allowMethods": "*",
        "allowHeaders": "*"
    }
}

database.php redis configuration

'redis' => [

        'client' => env('REDIS_CLIENT', 'phpredis'),

        'options' => [
            'cluster' => env('REDIS_CLUSTER', 'redis'),
            'prefix' => env('REDIS_PREFIX', Str::slug(env('APP_NAME', 'laravel'), '_').'_database_'),
        ],

        'default' => [
            'url' => env('REDIS_URL'),
            'host' => env('REDIS_HOST', '127.0.0.1'),
            'username' => env('REDIS_USERNAME'),
            'password' => env('REDIS_PASSWORD'),
            'port' => env('REDIS_PORT', '6379'),
            'database' => env('REDIS_DB', '0'),
        ],

        'cache' => [
            'url' => env('REDIS_URL'),
            'host' => env('REDIS_HOST', '127.0.0.1'),
            'username' => env('REDIS_USERNAME'),
            'password' => env('REDIS_PASSWORD'),
            'port' => env('REDIS_PORT', 'port'),
            'database' => env('REDIS_CACHE_DB', '1'),
        ],

    ],

React Native End

import Echo from 'laravel-echo';
import socketio from 'socket.io-client';
...

const echo = new Echo({
            host: 'ws://my_domain.com:6001',
            broadcaster: 'socket.io',
            client: socketio,
            
        
        });
        
        echo
        .channel('chats1')  
        .listen('.message.created', (ev: any) => {
            Alert.alert('Socket Msg', 'Got data success')
            console.log('socket msg:', JSON.stringify(ev))
        }).error((er: any) => {
            Alert.alert('Socket Err', 'An error occured')
            console.log('socket error msg:', JSON.stringify(er))        
        });

Nothing is being logged in the console as response from laravel-echo-server, what I'm I doing wrong? or what didn't I do correctly, please I have been on this issue for a week now

CodePudding user response：

I have finally found a solution to it, the issue was caused by socket.io new releases, I have to downgrade the socket.io to 2.4.0 from 4.x.x

"socket.io-client": "^2.4.0",

I found the solution here Laravel Echo Server, Redis, Socket.IO: Can't seem to make them work

CodePudding user response：

You have a typo. This part of the code should be:

   .listen('message.created', (ev: any) => {
        Alert.alert('Socket Msg', 'Got data success')
        console.log('socket msg:', JSON.stringify(ev))
    })

Remove the dot before message.created and try again.