Cómo construir una aplicación de chat en tiempo real con Laravel 5.4 y VueJs

Laravel es un campo muy próximo en el mundo moderno. Esta plataforma ha ayudado a uno a desarrollar varios aspectos de la plataforma sin esfuerzo. El uso de Laravel Echo también se ha vuelto muy común. Laravel Echo es una biblioteca de Javascript que hace que sea sencillo suscribirse a varios canales y escuchar la transmisión de eventos de Laravel.

También existe la disponibilidad del servicio de mensajes push donde se puede crear una cuenta con el propio messenger. Con el uso de Laravel 5.3 para archivos blade, así como la biblioteca frontend de Laravel Echo con vue-resource, todo el proceso será muy fácil de ejecutar rápidamente.

Justo al final, uno debería poder abrir dos navegadores y ver si el chat funciona.

Las dependencias que hay que instalar

Todo comienza con la instalación de estos paquetes para levantarse y luego ejecutarse con eventos Laravel Echo / Broadcasting.

Uno puede instalar Echo a través del administrador de paquetes NPM. Tome el ejemplo, donde podemos instalar el paquete pusher-js; uno usará la emisora ​​Pusher:

Uno puede ejecutar npm install- save laravel-echo pusher-js en la terminal.

Ahora, si uno está transmitiendo los eventos a través de Pusher, debe instalar el SDK de PHP de Pusher con el uso del administrador de paquetes Composer:

compositor requiere pusher / pusher-php-server

Ahora, cuando uno tiene todas las dependencias instaladas fácilmente, será hora de configurar una cuenta de pusher.com. Cuando uno haya creado una cuenta y luego haya creado una aplicación, debería ver ciertas teclas de la aplicación en la pestaña Teclas de la aplicación.

Simplemente copie esa clave en todo su archivo .env de esta manera.

PUSHER_APP_ID = 23222
PUSHER_KEY = ffssfb166f4976941e627c5
PUSHER_SECRET = 2o2323ojfw

Y recuerde ver el controlador de transmisión para que Laravel sepa qué controlador querrá usar.

BROADCAST_DRIVER = empujador

En el archivo config / broadcasting.php, es una buena idea agregar algunas opciones para impulsar la conexión como esta

'pusher' => [
           'driver' => 'empujador',
           'key' => env ('PUSHER_APP_KEY'),
            'secret' => env ('PUSHER_APP_SECRET'),
            'app_id' => env ('PUSHER_APP_ID'),
            'opciones' => [
                 'cluster' => 'ap2',
                  'encrypted' => verdadero
             ],
        ],

Ahora deberíamos intentar crear un evento para ver si uno puede enviar algunos mensajes directamente a la cuenta de Pusher.

Simplemente vaya a la terminal y luego escriba php artisan haciendo el evento MessagePosted.

encuentre la clase en la aplicación / eventos / ChatMessageWas Received.php, lo que hace que implemente el DoesBroadcast. Así como esto

La clase ChatMessageWasReceived implementa DoesBroadcast
{

Ahora queremos crear un mensaje de chat apropiado, escribimos PHP artisan make: model ChatMessage –migration. Esto puede crear un modelo y una migración para nosotros y comenzar esto o agregar filas propias.

Schema :: create ('chat_messages', function (Blueprint $ table) {
            $ tabla-> incrementos ('id');
            $ tabla-> cadena ('mensaje');
            $ tabla-> entero ('user_id') -> unsigned ();
            $ tabla-> marcas de tiempo ();
        });

Asegúrese de agregar $ fillable al modelo.

clase ChatMessage extiende modelo
{
    public $ fillable = ['user_id', 'message'];
}

Ahora intente inyectar un usuario y los mensajes directamente al evento

La clase ChatMessageWasReceived implementa DoesBroadcast
{
    use InteractsWithSockets, SerializesModels;

    public $ chatMessage;
    public $ user;

    / **
     * Crear una nueva instancia de evento.
     * *
     * @param $ chatMessage
     * @param $ usuario
     * /
    función pública __construct ($ chatMessage, $ user)
    {
        $ this-> chatMessage = $ chatMessage;
        $ this-> user = $ user;
    }

    / **
     * Obtenga los canales en los que el evento debería transmitir.
     * *
     * @return Channel | array
     * /
    función pública broadcastOn ()
    {
        volver nuevo canal ('public-test-channel');
    }
}

Con nuestro archivo de ruta web.php, estableceremos una ruta para JavaScript para hacer una llamada ajax con un mensaje.

// Enviar un mensaje por Javascript.
Ruta :: post ('mensaje', función (Solicitar $ solicitud) {

    $ usuario = Auth :: usuario ();

    $ message = ChatMessage :: create ([
        'user_id' => $ user-> id,
        'message' => $ request-> input ('mensaje')
    ]);

    evento (nuevo ChatMessageWasReceived ($ mensaje, $ usuario));


});

Tomamos el derecho de usuario conectado para insertar la identificación y el mensaje en la tabla de chat_messages dada y también el fuego del evento con el mensaje y el objeto de usuario.

Todo esto cubre completamente el backend.

Configuración frontend

Laravel 5.4 se entrega con algunos de los archivos javascript que configurarán jquery, bootstrap, vue y vue-resource es realmente útil para comenzar a funcionar rápidamente.

El siguiente paso será importar la biblioteca frontend de Laravel Echo y luego hacerlo por resources / assets / js / bootstrap.js con el código que se hace un comentario, descomente eso para ver:

Importar eco desde "laravel-echo"

window.Echo = nuevo eco ({
    locutor: 'empujador',
    clave: 'ffb166f4976941e634327c5',
    cluster: 'ap2',
    cifrado: verdadero
});

Solo recuerde agregar la propia tecla de empuje.

El siguiente paso será crear un archivo llamado chat.js y luego colocarlo en la carpeta de componentes de JavaScript y agregar este código.

module.exports = {

    datos () {
        regreso {
            mensajes: [],
            nuevoMsg: '',

        }
    },


    Listo() {
        Echo.channel ('public-test-channel')
            .listen ('ChatMessageWasReceived', (data) => {

                // Presione ata a la lista de publicaciones.
                this.posts.push ({
                    mensaje: data.chatMessage.message,
                    nombre de usuario: data.user.name
                });
            });
    },

    métodos: {

        prensa() {

            // Enviar mensaje al backend.
            this. $ http.post ('/ message /', {mensaje: this.newMsg})
                .then ((respuesta) => {

                    // Borrar campo de entrada.
                    this.newMsg = '';
                });
        }
    }
};

En primer lugar, en el método ready (), escuchará el canal public-test-channel que se especifica en Event ChatMessageWasRecieved

A continuación, escuchará cualquier evento que llegue directamente a la clase de evento y, en consecuencia, empujará los datos recibidos a la matriz de datos de publicaciones.

En consecuencia, el método press () enviará una solicitud ajax directamente para enrutar el archivo con el mensaje escrito por el usuario a la vista. Y lo último que necesitamos es agregar el componente al archivo app.js de la siguiente manera.

Vue.component ('ejemplo', require ('./ components / Example.vue'));
 Vue.component ('chat', require ('./ components / chat'));

Configurar el archivo de vista

El último paso será agregar un campo de entrada para que el usuario comience a chatear. El buen lugar para agregar eso es en el archivo home.blade.php que se envía con Laravel por deflaut. Luego se puede encontrar el archivo en resources / views / home.blade.php.

         ¡Estás conectado!     
    

Escribir algo a todos los usuarios

         
    

Mensajes

    
         @ {{post.username}} dice: @ {{post.message}}     
    

Agregamos un campo de entrada junto con v-model = "newMsg" y un @ keyup.enter = "press" para activar el método Vue cuando el usuario presiona Enter.

En , uno simplemente recorrerá las publicaciones del usuario.

Terminando

Esa es la forma de crear una aplicación de chat simple con Laravel 5.3 y Vue. Intente abrir dos navegadores y vea si funciona.