plantillas - switch laravel

Laravel Echo repetir el evento de escuchar durante n veces la transmisión se ha realizado

Question

El título de la pregunta puede ser un poco confuso, hice todo lo posible para explicarlo.

Tengo laravel-echo-server , redis (para hacer cola) y Laravel echo configuración de Laravel echo . Todo lo que quiero es enviar un mensaje a través de una entrada, y actualizar el feed de mensajes para todos en la página; esencialmente una sala de chat.

Todo funciona, excepto por el hecho de que es lento como el infierno, pero soy nuevo en Laravel Echo y Vue .

si envío un mensaje, está bien, pero luego, cuando envío otro, recibo dos respuestas. Enviar un tercer mensaje con tres respuestas y así sucesivamente ...

¿Qué estoy haciendo exactamente mal? He comprobado que socket.io / laravel-echo-server solo se está conectando al canal una vez, y mi broadcast solo se envía una vez (verificando que el trabajador de la cola solo está procesando la solicitud), entonces ¿cómo se repite exponencialmente?

Esta es mi 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'']
});

Esta es mi vista de 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>

En caso de que sean relevantes aquí está mi ruta :

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

y mi evento :

<?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

Estoy usando Redis PubSub en la aplicación que estoy construyendo actualmente y he tenido que luchar contra el mismo problema. Aunque no conozco laravel-echo-server lo suficiente como para aconsejarle específicamente sobre cómo solucionarlo, puedo describir la razón probable de este síntoma.

Su configuración se está suscribiendo al canal de Redis en cada ciclo, y esa suscripción no es transitoria. Cada vez que se suscribe, crea un nuevo oyente. Cada vez que publica, Redis envía el mensaje a todos los oyentes / suscriptores. Si un cliente único se ha suscrito tres veces, recibirá ese mensaje tres veces. Debe reconocer que está suscrito y no duplicarlo, o necesita darse de baja después de cada ciclo.

Una cosa a tener en cuenta es que la instancia de Redis debe publicar o suscribirse, pero no ambas. laravel-echo-server probablemente lo esté manejando por ti.

Redis normalmente devuelve la cantidad de suscriptores que reciben un mensaje en cada publicación. Esto me ayudó a diagnosticar el problema, especialmente porque estoy ejecutando canales privados y debería tener 1, y solo 1, oyente por cada mensaje. Redis también tiene un comando "numsub" que devuelve el número de oyentes en un canal.

Noté que su función sendMessage utiliza el método de escucha. Es un tiro en la oscuridad, pero ¿es ahí donde obtienes suscripciones múltiples?

De cualquier manera, me complacerá ayudarlo más si tiene una pregunta específica a la que pueda responder.