Feb 10, 2020
0
Level 7
React js + Laravel echo. Do not listen events.
I have react js on front end part and Laravel for back end. On back end part I created a node server which are running laravel echo server:
require('dotenv').config();
const env = process.env;
const echoServer = require('laravel-echo-server');
echoServer.run({
authHost: env.APP_URL,
devMode: env.APP_DEBUG,
database: "redis",
port: env.ECHO_PORT,
databaseConfig: {
redis: {
prefix: "studentapp_database_",
host: env.REDIS_HOST,
port: env.REDIS_PORT,
password: env.REDIS_PASSWORD,
}
},
protocol: env.ECHO_PROTOCOL,
apiOriginAllow: {
"allowCors" : true,
"allowOrigin" : "*",
"allowMethods" : "*",
"allowHeaders" : "*"
}
});
On front end part I created an instance of laravel-echo:
export default new Echo({
host: process.env.REACT_APP_API_BASE_URL + ':6001',
broadcaster: 'socket.io',
client: socketIo,
auth: {
headers: {
'Authorization': 'Bearer ' + cookies.get('accessToken')
}
},
});
and of course I am listening an event:
Echo.channel('school-chat-room').listen('chat', data => console.log(data, 'New Message'));
also on back end I created an event which I am broadcast:
class MessageWritten implements ShouldBroadcastNow
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $message;
/**
* Create a new event instance.
*
* MessageWritten constructor.
*
* @param ChatMessage $message
*/
public function __construct(ChatMessage $message)
{
$this->message = $message;
}
/**
* Get the channels the event should broadcast on.
*
* @return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
return new PresenceChannel('school-chat-room');
}
public function broadcastAs()
{
return 'chat';
}
}
with channel:
Broadcast::channel('school-chat-room', function ($user) {
return ['user' => $user];
});
and broadcast:
MessageWritten::broadcast($message);
But I am not receiving any message on front end. Can someone give me a suggestion - what I am doing wrong ?
Please or to participate in this conversation.