1. instalar : ngx-socket-io
https://www.npmjs.com/package/ngx-socket-io
2 .- Import and configure SocketIoModule
import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
const config: SocketIoConfig = { url: appConfig.api , options: {} };
SocketIoModule.forRoot(config),
crear servicio de websocket:
import { Injectable } from '@angular/core';
import { Socket } from 'ngx-socket-io';
import Swal from 'sweetalert2';
@Injectable({ providedIn: 'root' })
export class WebsocketService {
public socketStatus = false;
constructor(
private socket: Socket
) {
this.checkStatus();
// Metodo para recibir
this.listen('suggested-aviso').subscribe( ( payload ) => {
console.log('Aviso Sugerido', payload);
});
}
// 17-08-2020 ( Funcion para syncronizar socket )
checkStatus() {
this.socket.on('connect', () => { console.log('conexion socket'); this.socketStatus = true; })
this.socket.on('disconnect', () => { console.log('desconexion socket'); this.socketStatus = false; });
};
// 17-08-2020 ( Funcion para EMITIR un evento )
emit( evento: string, payload?: any, callback?: Function ) {
this.socket.emit( evento, payload, callback );
}
// 17-08-2020 ( Funcion para RECIBIR un evento )
listen( evento: string ) {
return this.socket.fromEvent( evento );
}
}
=== Emitir eventos desde el servidor
SERVER.io.emit('create-product', data);
==== ahora el uso en componentes
import { WebsocketService } from 'src/app/api/websocket.service';
constructor(
public menuCtrl: MenuController,
private route : Router,
public _posts: ProductService,
public socketIO : WebsocketService,
) {
//** Socket **//
this.socketIO.listen('create-product').subscribe( (payload ) => { console.log('create-product'); this.loadData(); });
this.socketIO.listen('update-product').subscribe( (payload ) => { console.log('update-product'); this.loadData(); });
this.socketIO.listen('delete-product').subscribe( (payload ) => { console.log('delete-product'); this.loadData(); });
//** Socket **//