Como hacer un chat con Ionic y Socket.io en minutos

Primero creemos un servidor para nuestro backend end node.js con los siguientes comandos:

Con los anteriores comandos ya tenemos el proyecto node.js corriendo con express y socket.io instalado.

Ahora en la carpeta, creamos un archivo index.js y lo completamos con lo siguiente:

Listo! eso es todo en nuestro servidor.

Todas nuestras funciones están incluidas dentro del bloque io.on (‘conexión’), por lo que solo sucederán una vez que un cliente se conecte al servidor.

Establecemos una función para la desconexión de eventos, el nombre de conjunto y el mensaje adicional, lo que significa que cada vez que nuestra aplicación envía estos eventos, el servidor reacciona.

Si enviamos un nuevo mensaje, emitimos ese mensaje a todos los conectados como un nuevo objeto con texto, el nombre del usuario que envía y una fecha. Además, establecemos el nombre de la conexión de socket si un usuario envía su apodo.

Puede iniciarlo ejecutando el siguiente comando

Creando la app Ionic con Socket.io

No necesitamos mucho, solo una aplicación en blanco para comenzar y, además, el paquete ngx-socket-io para crear la conexión a nuestro servidor

Agreguemos la información del socket a nuestra aplicación en /app.module.ts. Debe proporcionar la URL de su servidor y se podran agregar muchas más opciones allí que podría necesitar más adelante, pero por ahora no tenemos que cambiar mucho y solo necesitamos la URL del servidor que creamos antes:

Ahora la aplicación puede establecer una conexión con nuestro servidor y simplemente llamamos a una función connect() para establecer esa conexión.

Cuando agrega solo el bloque de conexión, también puede ver una nueva conexión en su servidor si agrega algunos registros.

Crea un nombre aleatorio cuando se inicia la aplicación

Emitir el nombre con el evento set-name para que el servidor conozca nuestro apodo

Reaccionar a los eventos entrantes modificados por los usuarios para mostrar un alerta por los usuarios que se unieron / salieron del chat

Suscríbase al evento de mensaje como antes para que el usuario cambie y agregue nuevos mensajes a nuestro array

Además, enviar un nuevo mensaje es tan fácil como emitir los datos al socket: el servidor se encargará del resto y sabrá quién envió la información en función de la información de conexión del socket interno.

Ahora cambie su aplicación, modifique el archivo /home/home.page.ts a:

Ahora necesitamos construir nuestra vista basica.

Solo necesitamos iterar nuestra matriz de mensajes y tener un área para componer el nuevo mensaje en la parte inferior, así que abra su home /home.page.html y cámbielo a:

Pongamosle un poco de colores y estilos, modifiquemos el archivo home/home.page.scss:

Ahora puede ejecutar su chat y abrir, por ejemplo, algunas ventanas de incógnito más para que haya diferentes usuarios conectados a su chat de socket.