Cómo usar Laravel con socket.IO

Redes web son guays. Son realmente útiles si desea mostrar actividades en tiempo real de sus usuarios (o tal vez algunos trabajos de cola).

Ahora, si tienes miedo de la palabra "websockets", no seas. Estableceré las instrucciones sobre cómo puede usarlo y estaré cerca para responder a sus preguntas si necesita.

Tuve este desafío en el que lo necesitaba para mostrar una lista de personas que actualmente están viendo una URL específica en Laravado. Entonces comencé a pensar. Parte de mí quería hacer un truco rápido (por suerte ese no es el lado más fuerte de la mía). Mientras que el otro quería construir algo genial, reutilizable y duradero.

"¿Por qué no usas Pusher??"

Aquí está la cosa.

Laravel viene con empuje habilitado. Aunque Pusher parece una solución rápida de "plug and play" (que es), viene con limitaciones. Echa un vistazo a https: // empujador.com/precios

Y la mayoría de los tutoriales te engañan con su título de implementación de WebSockets cuando en realidad solo quieren darte empujador. (Y mi parte favorita es cuando dicen que puedes cambiar fácilmente a enchufe.io)

"Queremos tener un número ilimitado de conexiones"

No queremos preocuparnos por las limitaciones.

Empecemos.

Estoy usando Vagrant / Homestead.

Para esto, tendremos que leer sobre la transmisión de eventos.

Cosas a tener en cuenta aquí (así que no tengo que repetir cosas):

1. Debería la interfaz de la transmisión para eventos

2. Habilitar rutas de transmisión y usar rutas/canales.PHP para autenticar a los usuarios

3. Canal público: todos pueden escuchar

4. Canal privado: debe autorizar a los usuarios antes de que puedan unirse a un canal

5. Canal de presencia: como privado, pero puede pasar muchos metadatos adicionales en ese canal y obtener una lista de personas que se han unido al canal.Método de evento de Broadcaston ()

Crea tu evento

PHP Artisan Make: Event MessagePushed

Incluso puede seguir el ejemplo específico en la documentación de transmisión del evento. (Que realmente deberíamos).

Instalar redis

Antes de esto, en realidad tenía colas configurado con Supervisor/Redis/Horizon. Horizon es excelente y puedes encontrar información sobre eso aquí https: // laravel.com/docs/5.6/horizonte

Una vez que tenga sus colas funcionando, ese evento MessagePushed deberá usar colas.

Nota: Para que todo esto funcione, asegúrese de editar su .archivo env:

Broadcast_driver = Redis
Queue_driver = redis (esto es de la configuración del horizonte en realidad, pero lo necesitaremos para más adelante)
Redis_host = 127.0.0.1
Redis_password = nulo
Redis_port = 6379

Instale el servidor de eco de Laravel

Entonces, esta parte es en realidad donde instalamos socket.Servidor IO que está incluido dentro de Laravel-Echo-Merver. Puedes encontrarlo aquí: https: // github.com/tlaverdure/laravel-eco-server

Nota: Verifique los requisitos en la parte superior!

Ejecute lo siguiente (como se indica en el documento)

NPM instalación -g laravel-eco-server

Y luego ejecute el init para obtener su servidor de eco de Laravel.Archivo JSON generado en la aplicación Root (que necesitaremos configurar).

Laravel-eco-server init

Una vez que haya generado su servidor Laravel-Echo.archivo json, debería verse así.

"Authhost": "http: // Local-Website.aplicación ",
"Authendpoint": "/Broadcasting/Auth",
"Clientes": [

"Appid": "my-app-id",
"Clave": "My-Key-Generated-With-Inn-Command"

],
"Base de datos": "Redis",
"DataBASEConFig":
"Redis": ,
"sqlite":
"Databasepath": "/Database/Laravel-Echo-server.sqlite "
,
"Puerto": "6379",
"Anfitrión": "127.0.0.1 "
,
"Devmode": falso,
"Anfitrión": NULL,
"Puerto": "6001",
"Protocolo": "http",
"Socketio": ,
"sslcertpath": "",
"sslkypath": "",
"SSLCERTCHAINPATH": "",
"sslpassphrase": ""

NOTA: Si desea empujar esto a su servidor público, asegúrese de agregar laravel-eco-servir.json a tu .gitignore. Genere este archivo en el servidor, de lo contrario deberá cambiar su authhost todo el tiempo.

Ejecute su servidor Laravel Echo

Tienes que ejecutarlo para iniciar WebSockets.

comienzo de laravado-eco-server

(Dentro de su raíz-donde su servidor de eco de laravel.JSON está colocado)

Debería comenzar con éxito. (Ahora queremos agregar esto al supervisor en su servidor, por lo que se inicia automáticamente y se reinicia en caso de que se bloquee)

Dentro de su/etc/supervisor/conf.D/Laravel-Echo.conf (solo crea este archivo dentro de su conf.D de la carpeta) Coloque lo siguiente:

[Programa: Laravel-Echo]
directorio =/var/www/my-website-holder
process_name =%(Program_name) S _%(Process_num) 02D
comando = Laravel-eco-server inicio
AutoStart = True
AutorStart = True
Usuario = Your-Linux-User
numprocs = 1
redirect_stderr = true
stdout_logfile =/var/www/my-website-volador/almacenamiento/logs/echo.registro

Una vez que coloque en su raíz de Laravel, puede ejecutar

pwd

Para obtener la ruta de su 'directorio' anterior y prefijo 'stdout_logfile'.

Su usuario será su usuario de Linux (vagabundo o ubuntu o algún otro)

Guarde el archivo y salga.

Si usaste Vim Laravel-Echo.Conf entonces cuando esté adentro, presione I (como Estambul) en su teclado para editar un archivo con VIM y luego escriba ESC siguiendo: WQ! Para cerrar el archivo y guardarlo.

A continuación, necesitamos ejecutar los siguientes comandos:

sudo supervisorctl detener todo
sudo supervisorctl readread
SUDO SupervisorCtl Recargar

Después de eso, verifique si Laravel Echo se está ejecutando

SUDO SupervisorCtl Status

Instale el cliente de Laravel Echo y Socket IO

Instalación de NPM-Save Laravel-Echo
Instalación de NPM --Have Socket.io-cliente
[/c] c
Y luego en tu bootstrap.JS (estoy usando vue js) registra tu eco
[cc lang = "bash" escapado = "true" width = "800"]
importar echo de "laravel-eco"
ventana.io = requerir ('socket.io-client ');
// tener esto en caso de que deje de ejecutar su
Laravel Echo Serverif (typeof io !== 'Undefinado')
ventana.Echo = new Echo (
Broadcaster: 'Socket.io ',
Anfitrión: ventana.ubicación.nombre de host + ': 6001',
);

Ahora revise nuevamente cómo escuchar sus eventos en canales específicos.

Siguiendo la documentación sobre la transmisión de Laravel que compartimos anteriormente, si establece su método Broadcaston () para devolver un nuevo PresenceChannel (explicaré el caso particular que hice, pero no dude en hacer preguntas en caso de que necesite algo más implementado. Encuentro que esto es de mayor complejidad que simplemente usar un canal público, por lo que podemos escalar sin problemas), entonces queremos escuchar ese canal en el lado de JavaScript (frontend).

Aquí hay un ejemplo concreto:

1. Empujé un evento a un canal de presencia (estaba tratando con encuestas)

función pública broadcaston ()
devolver nuevo presenceChannel ('encuesta.' . $ this-> encuesta-> id);

2. Después de impulsar el evento, pasará por canales.php. Allí queremos crear una autorización para este usuario. (Recuerde devolver una matriz para la autorización del canal de presencia y no un booleano.)

Broadcast :: Channel ('Encuesta.Survey_id ', function ($ user, $ Survey_id) return
['id' => $ user-> id, 'image' => $ user-> image (), 'full_name' => $ user-> full_name];);

3. Luego, en mi componente VueJS que se carga en la página que quiero monitorear, defina un método que se iniciará desde el método creado () en la carga:

ListenforBroadcast (Survey_id)
Eco.Únete ('encuesta.' + Survey_id)
.aquí ((usuarios) =>
este.users_viewing = usuarios;
este.$ forceUpdate ();
)
.unir ((usuario) =>
si esto.checkifuseralreadyViewingSurvey (usuario))
este.Users_viewing.push (usuario);
este.$ forceUpdate ();

)
.saliendo ((usuario) =>
este.removeViewingUser (usuario);
este.$ forceUpdate ();
);
,

Obviamente, sacé algún código del contexto aquí, pero tengo esta matriz 'Users_Viewing' para mantener a mis usuarios actuales que se unieron al canal.
Y eso sería realmente.

Espero que pudieras seguir ya que intenté ser detallado como puedo.

Codificación feliz!