Socket.IO module for Angular
npm install ngx-socket-io
import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
const config: SocketIoConfig = { url: 'http://localhost:8988', options: {} };
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
SocketIoModule.forRoot(config)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
We need to configure SocketIoModule
module using the object config
of type SocketIoConfig
, this object accepts two optional properties they are the same used here io(url[, options]).
Now we pass the configuration to the static method forRoot
of SocketIoModule
The SocketIoModule
provides now a configured Socket
service that can be injected anywhere inside the AppModule
.
import { Injectable } from '@angular/core';
import { Socket } from 'ngx-socket-io';
@Injectable()
export class ChatService {
constructor(private socket: Socket) { }
sendMessage(msg: string){
this.socket.emit("message", msg);
}
getMessage() {
return this.socket
.fromEvent("message")
.map( data => data.msg );
}
}
In this case we do not configure the SocketIoModule
directly using forRoot
. What we have to do is: extend the Socket
service, and call super()
with the SocketIoConfig
object type (passing url
& options
if any).
import { Injectable, NgModule } from '@angular/core';
import { Socket } from 'ngx-socket-io';
@Injectable()
export class SocketOne extends Socket {
constructor() {
super({ url: 'http://url_one:portOne', options: {} });
}
}
@Injectable()
export class SocketTwo extends Socket {
constructor() {
super({ url: 'http://url_two:portTwo', options: {} });
}
}
@NgModule({
declarations: [
//components
],
imports: [
SocketIoModule,
//...
],
providers: [SocketOne, SocketTwo],
bootstrap: [/** AppComponent **/]
})
export class AppModule { }
Now you can inject SocketOne
, SocketTwo
in any other services and / or components.
Most of the functionalities here you are already familiar with.
The only addition is the fromEvent
method, which returns an Observable
that you can subscribe to.
Takes an namespace. Works the same as in Socket.IO.
Takes an event name and callback. Works the same as in Socket.IO.
Takes an event name and callback. Works the same as in Socket.IO.
Takes an event name. Works the same as in Socket.IO.
Sends a message to the server. Optionally takes a callback. Works the same as in Socket.IO.
Takes an event name and returns an Observable that you can subscribe to.
Creates a Promise for a one-time event.
You should keep a reference to the Observable subscription and unsubscribe when you're done with it.
This prevents memory leaks as the event listener attached will be removed (using socket.removeListener
) ONLY and when/if you unsubscribe.
If you have multiple subscriptions to an Observable only the last unsubscription will remove the listener.
For error TS2345
you need to add this to your tsconfig.json
.
{
...
"compilerOptions": {
...
"paths": {
"rxjs": ["node_modules/rxjs"]
}
},
}
- bougarfaoui/ng-socket-io - Socket.IO module for Angular
MIT