Deepinder Singh
Deepinder Singh

Seguir

Nov 25, 2019 · 7 min de lectura

en Este artículo se ha movido de aquí. Para la última versión de este artículo, visite el enlace proporcionado.

Foto por Pankaj Patel en Unsplash

Esta podría ser la más temida pregunta entre los nuevos desarrolladores sobre cómo hacer una aplicación con la etiqueta Angular y Socket.io. Como la mayoría de las aplicaciones hacen uso de sockets para la comunicación en tiempo real de la etiqueta FrontendBackend. Por lo tanto, hoy voy a hablar de cómo integrar socket.io con una aplicación Angular. Este código funcionaría para todas las versiones Angulares anteriores a Angular1.

Actualizado: Este artículo se actualizó en diciembre de 2020 para manejar los cambios de la versión v3 más reciente de socket.io

Comencemos creando un proyecto node primero.

Cree un nuevo directory y, a continuación, introdúzcalo.

mkdir socketio-node

Esto creará una carpeta vacía con el nombre socketio-node.

vamos a usar el Nodo.JS web framework express. Asegúrate de que Node.JS está instalado en su sistema.

Primero vamos a crear un archivo de manifiesto package.json que describa nuestro proyecto.Crear un archivo llamado paquete.json y pegue el siguiente código en él.(También se puede hacer con la etiqueta npm init)

{
"name": "socketio-node",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {}
}

Ahora, para una fácil rellenar el dependencies propiedad, necesitamos instalar express, escriba esto en el terminal.

npm install express

Se va a instalar y añadir la última versión de express en nuestro proyecto y su dependencies ahora tendrá un aspecto similar

"dependencies": {
"express": "^4.17.1"
}

Ahora que express está instalado podemos crear un index.js archivo de configuración de nuestra aplicación.

const app = require('express')();
const http = require('http').createServer(app);
app.get('/', (req, res) => {
res.send('<h1>Hey Socket.io</h1>');
});
http.listen(3000, () => {
console.log('listening on *:3000');
});

Este código se explica en los siguientes pasos:

  • Express inicializa app para ser un controlador de funciones que puede suministrar a un servidor HTTP (como se ve en la línea 2).
  • Definimos un manejador de rutas / que se llama cuando llegamos a la página de inicio de nuestro sitio web.
  • Hacemos que el servidor http escuche en el puerto 3000.

Si usted ejecute node index.js usted debería ver lo siguiente:

Abrir http://localhost:3000 en el navegador se vería:

Ahora vamos a integrar zócalo.io en nuestro nodo de la aplicación. En primer lugar, necesitamos instalar socket.io dependencia en nuestra aplicación. Pon esto en la terminal.

npm install socket.io

Esto va a instalar el módulo y agregar la dependencia a package.json. Ahora editemos index.js para agregarlo:

const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http, {
cors: {
origins:
}
});app.get('/', (req, res) => {
res.send('<h1>Hey Socket.io</h1>');
});io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
});http.listen(3000, () => {
console.log('listening on *:3000');
});

Observe que inicializo una nueva instancia de socket.io en la línea 3 pasando el objeto http (el servidor HTTP) y las opciones cors (actualizadas para socket.io v3) para permitir nuestra url de host local angular, puede colocar la url o su cliente de interfaz, en mi caso fue localhost:4200
Luego escucho en los eventos connection y disconnection para los sockets entrantes, y los registro en la consola.

Nuestro Backend está listo por ahora, volveremos a nuestro código node cuando implementemos más eventos más adelante.

Comencemos creando una aplicación Angular ahora. Crearé una nueva aplicación Angular desde cero, mientras que la mayoría de ustedes ya tendrían una creada con ustedes.
Aquellos que ya tienen una aplicación Angular pueden omitir el siguiente código:

npm install -g @angular/cli
ng new socketio-angular

Esto instalaría la última versión de Angular CLI y crearía una nueva aplicación Angular desde cero.

Ahora vamos a añadir socket.io dependency en nuestra aplicación Angular.

cd socketio-angular
npm install socket.io-client

Esto instalaría la última biblioteca socket.io-client en nuestra aplicación Angular.

Ahora comencemos creando un service para manejar socket.io conexión. Crearía un servicio de nivel raíz singleton llamado socketio.service.tse incluirlo en AppModule. Puede crear el servicio de acuerdo con la estructura de su proyecto.Puede crear el servicio ejecutando el siguiente comando.

ng g s socketio

Esto crearía un servicio de nombre socketio.service.ts . La estructura de directorios se vería algo como esto. Esto es solo una demostración simple de una página, así que agregué el servicio a la carpeta base de esta manera.

Ahora, ir dentro de la etiqueta socketio.service.ts archivo e importar los siguientes:

import { io } from 'socket.io-client';

Ahora agreguemos el punto final de socket al que conectaríamos el socket dentro del archivo environment.ts.

export const environment = {
production: false,
SOCKET_ENDPOINT: 'http://localhost:3000'
};

Ahora intentemos conectarnos a nuestro socket y crear una conexión de socket. En primer lugar, debemos agregar SocketioService en nuestra AppModule e inyectar el servicio en nuestra app.component.ts . Primero agreguemos el servicio a nuestros proveedores. En app.module.ts haga esto:

@NgModule({
declarations: ,imports: ,providers: ,
bootstrap: })export class AppModule { }

Y vamos a socketio.service.ts y escribamos una función de inicio de socket.

export class SocketioService { socket; constructor() { } setupSocketConnection() {
this.socket = io(environment.SOCKET_ENDPOINT);
}
}

Esto declarará una variable llamadasockety luego, después de llamar al métodosetupSocketConnection, la variablesocket contendrá el objeto de conector conectado.

Ahora, llamemos a este método desde app.component.ts dentro de ngOnInit.

export class AppComponent implements OnInit { title = 'socketio-angular'; constructor(private socketService: SocketioService) {} ngOnInit() {
this.socketService.setupSocketConnection();
}
}

Si está utilizando Angular 6 y superior, es posible que se encuentre con este error.

Uncaught ReferenceError: global is not defined

Esto se debe a que en la versión 6 de Angular CLI Equipo Angular elimina la cuña para global y otros nodos integrados. Si estamos usando una biblioteca que asume estas variables globales están presentes(socket.io-client en nuestro caso), usted puede probar manualmente calzar dentro del polyfills.ts archivo:

// Add global to window, assigning the value of window itself.
(window as any).global = window;

Añadir esta línea a su polyfills.ts archivo se soluciona el problema y su aplicación estaría trabajando de nuevo. Para leer más sobre el problema anterior, siga este link.

Después de ejecutar el Angular de la aplicación ahora, usted puede ver el socket conectado y nuestro nodo de la aplicación de consola que muestra a user connected como esta:

desconecte el enchufe o el cierre de la página web, usted puede ver user disconnected mensaje en la consola.

Con esto, hemos completado nuestra inicialización de sockets. Ahora aprenderemos cómo emitir y escuchar eventos.

Registremos un evento llamadomy message dentro de nuestro archivo de nodoindex.js y console los datos y emitiremos el mismo evento desde la aplicaciónAngular.

io.on('connection', (socket) => { console.log('a user connected'); socket.on('disconnect', () => { console.log('user disconnected'); }); socket.on('my message', (msg) => { console.log('message: ' + msg); });});

Y vamos a emitir el mismo evento desde Angular código

setupSocketConnection() { this.socket = io(environment.SOCKET_ENDPOINT); this.socket.emit('my message', 'Hello there from Angular.');}

Este código se emiten el evento denominado my message, y se imprimirá el siguiente en nuestro nodo de la consola. Puedes ver el mensaje ‘Hola desde Angular’. Nuestros eventos personalizados ya están funcionando.

Ahora, vamos a emit un evento de la etiqueta server side. Transmitiremos el evento a todos los usuarios conectados. Transmitiremos el mismo mensaje que recibimos del cliente y le añadiremos una cadena de servidor.

io.on('connection', (socket) => {
socket.on('my message', (msg) => {
io.emit('my broadcast', `server: ${msg}`);
});
});

Agreguemos un receptor para el evento my broadcast en nuestra aplicación Angular ahora.

this.socket.on('my broadcast', (data: string) => {
console.log(data);
});

Después de hacer esto, usted puede comprobar su broswer console, sería print algo como esto. Imprime un mensaje del servidor, que emitió la transmisión.

Hemos cubierto el basic piezas de conexión de un nodo de socket.io de la aplicación con un Angular de la aplicación.

Consejo de bonificación: También puede enviar query parameters al motor al conectarse al socket utilizando options con url en una conexión.

this.socket = io(environment.SOCKET_ENDPOINT, {
auth: {
token: 'cde'
}
});

A fetch esta información en el Backend, tenemos que hacer algo como esto:

io.on('connection', (socket) => {
let token = socket.handshake.auth.token;
});

se devuelve el valor de cde aprobada por el Frontend.

Puede comprobar todo el código de ejemplo escrito anterior en mi github.

con Esto concluye mi artículo sobre la creación de un real time applicationAngular y Socket.ioNodeJS. He cubierto el basics de conectar las aplicaciones. Hay mucha más información sobre sockets que se pueden explorar, como salas, estado de conexión en línea, envío de más datos, búsqueda de usuarios en línea. Esta información no puede incluirse en un solo artículo. Se write en estos temas si liked my work en este blog.

Escribe tus comentarios.

le Gustó mi trabajo? Cómprame un café.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.