Laravel Echo repeating the listen to broadcast n times

Question

The title of the question can be a bit confusing, I tried my best to explain it.

I have laravel-echo-server , redis (for the queue) and Laravel echo . All I want is to send a message through the input and update the message channel for everyone on the page; essentially a chat.

Everything works, except that it is slow as hell, but I am new to Laravel echo and Vue .

if I sent one message, that’s fine, but then when I send another message, I get two responses. Send the third message three answers and so on ...

What exactly am I doing wrong? I checked socket.io / laravel-echo-server only once connected to the channel, and my broadcast sent only once (checking that the worker from the queue processes only the request), since it repeats exponentially?

This is my app.js :

 const chatWindow = new Vue({ el: '#chatWindow', data: { messages: [] }, methods: { sendMessage: function () { this.$http.post('/chat', {message: this.message}).then((response) => { window.Echo.channel('test-chat-channel') .listen('MessageSent', (event) => { console.log(event.message); // this.messages.push(event.message); }); }, (response) => { // error callback }); this.message = ''; } }, props: ['message'] }); 

This is my type of chat :

 <div id="chatWindow" class="col-sm-7"> <h1 class="text-center no-top">Chat</h1> <div class="chat-window"> <ul> <li v-for="message in messages">@{{ message }}</li> </ul> <div class="form-group"> <input title="Send Message" v-model="message" @keyup.enter="sendMessage" class="form-control" placeholder="Send message..."> </div> </div> </div> 

Just in case, they are relevant here, my route :

 Route::post('/chat', function (Request $request) { event(new MessageSent($request->message)); }); 

and my event :

 <?php namespace App\Events; use Illuminate\Broadcasting\Channel; use Illuminate\Queue\SerializesModels; use Illuminate\Broadcasting\PrivateChannel; use Illuminate\Broadcasting\PresenceChannel; use Illuminate\Broadcasting\InteractsWithSockets; use Illuminate\Contracts\Broadcasting\ShouldBroadcast; class MessageSent implements ShouldBroadcast { use InteractsWithSockets, SerializesModels; public $message; public function __construct($message) { $this->message = $message; } public function broadcastOn() { return new Channel('test-chat-channel'); } } 

Answer 1

I am using Redis PubSub in the application that I am creating now, and he had to deal with the same problem. Although I do not know laravel-echo-server enough to advise you specifically on how to fix it, I can describe the probable cause of this symptom.

Your configuration subscribes to the Redis channel in each cycle, and this subscription is not temporary. Each time you subscribe, you create a new listener. Each time you post, Redis sends a message to all listeners / subscribers. If one client has subscribed three times, he will receive this message three times. You need to either acknowledge that you are subscribed and not duplicate it, or you need to unsubscribe after each cycle.

It should be noted that a Redis instance must either publish or subscribe, but not both. laravel-echo-server will probably handle this for you.

Redis usually returns the number of subscribers who receive a message for each post. This helped me diagnose the problem, especially since I run private channels and should have 1 and only 1 listener for each message. Redis also has a "numsub" command, which returns the number of listeners on the channel.

I noticed that your sendMessage function uses the listen method. This is a shot in the dark, but is this where you get a few followers?

In any case, I would be happy to help you if you have a specific question that I can answer.