0

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

2 Answers 2

0

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.

Sign up to request clarification or add additional context in comments.

2 Comments

Thanks for your reply, I tried that it's still the same, the . (dot) is to tell laravel echo that message.created is not a namespace
it has worked, I finally found a solution here stackoverflow.com/questions/65437604/…, thanks for your response, sorry you got a down vote :(
0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.