@addapptables/ng-web-socket
v2.0.0
Published
Web socket module for Angular
Downloads
17
Maintainers
Readme
ADDAPPTABLES ng-web-socket
ADDAPPTABLES ng-web-socket is a library for angular, this library has adapters for socket-io and signalr
Getting Started
For socket-io see the following link
For signal-r see the following link
Choose the version corresponding to your Angular version:
Angular | @addapptables/ng-web-socket ----------- | ------------------- 8 | 2.x 7 | 1.x
npm i @addapptables/ng-web-socket --S
Create a websocket service
// gateway with params
@WebSocketGateway<SocketIOClient.ConnectOpts>({
url: 'http://localhost:8081',
autoConnect: true
})
export class WebSocketService {
// web socket connection
@WebSocketServer()
server: SocketIOClient.Socket;
// subscribe event
@Subscribe('news')
connectedUsers(data: any) {
console.log(data);
this.server.emit('my other event', { my: 'data' });
}
// emit events
sendMessage() {
this.server.emit('my other event', { my: 'data' });
}
}
import adapter and WebSocketService into the module
import { NgWebSocketModule } from '@addapptables/ng-web-socket';
import { SocketIoAdapter } from '@addapptables/ng-socket-io';
@NgModule({
imports: [
...,
NgWebSocketModule.forRoot(SocketIoAdapter, [WebSocketService, /* other services socket here*/])
/*
Or
NgWebSocketModule.forRoot(SocketIoAdapter, [])
Adapter is required
*/
]
})
export class AppModule { }
for child modules
import { NgWebSocketModule } from '@addapptables/ng-web-socket';
@NgModule({
imports: [
...,
NgWebSocketModule.forFeature([WebSocketService, /* other services socket here*/])
]
})
export class AppModule { }
If you require a service to obtain the url, you can do the following
// gateway with params
@WebSocketGateway<SocketIOClient.ConnectOpts>({
autoConnect: false
})
export class WebSocketService implements ISocketWithOptions<SocketIOClient.ConnectOpts> {
// web socket connection
@WebSocketServer()
server: SocketIOClient.Socket;
constructor(
@Inject(API_BASE_URL) private _baseUrl: string,
private _managerSocketAdapter: ManagerSocketAdapter
) { }
//build options for websocket
withOptions(): WebSocketOptions<SocketIOClient.ConnectOpts> {
const token = '123';
const url = this._baseUrl + '?token=' + token;
return {
url
};
}
connect() {
this._managerSocketAdapter.connect(this);
}
// subscribe event
@Subscribe('news')
connectedUsers(data: any) {
console.log(data);
this.server.emit('my other event', { my: 'data' });
}
// emit events
sendMessage() {
this.server.emit('my other event', { my: 'data' });
}
}
Inject websocket into the component
@Component({
...
})
export class YourComponent implements OnInit {
constructor(
public _webSocketService: WebSocketService
) {
}
ngOnInit() {
this._webSocketService.connect();
}
}
Custom adapters
Create a custom adapter:
import * as io from 'socket.io-client';
import { ISocket } from '@addapptables/ng-web-socket';
@Injectable()
// implements ISocket
export class SocketIoAdapter implements ISocket<SocketIOClient.Socket, SocketIOClient.ConnectOpts> {
// connect to ws transport
connect(url: string, options?: SocketIOClient.ConnectOpts): Promise<SocketIOClient.Socket> {
return new Promise((resolve, reject) => {
try {
const ioFunc = (io as any).default ? (io as any).default : io;
const connection = ioFunc(url, options);
resolve(connection.connect());
} catch (error) {
reject(error.message);
}
});
}
// bind events with current connection
bindEvent(connection: SocketIOClient.Socket, event: string, callFunction: (...args: any[]) => void) {
connection.on(event, callFunction);
}
// disconnect current connection
disconnect(connection: SocketIOClient.Socket): Promise<void> {
return new Promise((resolve, reject) => {
try {
connection.disconnect();
resolve();
} catch (error) {
reject(error.message);
}
});
}
}