@mikosoft/ws-client-browser v1.2.3
@mikosoft/ws-client-browser
Websocket Client for browser which works best with the Mikosoft Websocket Server - @mikosoft/ws-server.
Small but very powerful library made according to RFC6455 Standard for websocket version 13.
Website Documentation
http://libs.mikosoft.info/websocket/ws-client-browser
Websocket Client for Browser Features
- websocket version: 13
- subprotocol: jsonRWS, raw
- automatic reconnect
- chat in the rooms
- small file size, minified (~7.5kB only)
- powerful API
- possible RxJS integration
- use it with webpack builds
Installation
npm install --save @mikosoft/ws-client-browser
Howto Use
There are two ways to use it in your project:
- script in HTML
<script src="/node_modules/@mikosoft/ws-client-browser/dist/wsClientBrowser.min.js"></script>
// now fetch it as window.mikosoft global variable
const wsClient = new window.mikosoft.WsClientBrowser(wsOpts);
await wsClient.connect('ws://localhost:3211?authkey=TRTmrt'); // open websocket connection
- import in JS
import { WsClientBrowser } from '@mikosoft/ws-client-browser';
const wsClient = new WsClientBrowser(wsOpts);
await wsClient.connect('ws://localhost:3211?authkey=TRTmrt'); // open websocket connection
API
- connect(wsURL) - connect to the websocket server
disconnect() - disconnect from the websocket server
sendOne(to:string, msg:any) - send message to one websocket socket/client (parameter to is the socket ID)
- send(to:string[], msg:any) - send message to one or more clients
- broadcast(msg:any) - send message to all clients except the sender
sendAll(msg:any) - send message to all clients and the sender
questionSocketId() - receive the client's socket id
- questionSocketList() - receive the list of sockets connected on the server
- questionRoomList() - receive the list of all rooms
questionRoomListmy() - receive the list of subscribed rooms
roomEnter(roomName:string) - enter the room and start to listen the room's messages
- roomExit(roomName:string) - exit from the room and stop to listen the room's messages
- roomExitAll() - exit from the all rooms
roomSend(roomName:string, msg:any) - exit from the room and stop to listen the room's messages
setNick(nickname:string) - set the client's nickname
route(uri:string, body?:any) - send route to the server, for example: {uri: '/login', body: {username: 'john', password: 'trtmrt'}}
on(eventName:string, listener:Function) - listen events: 'connected', 'disconnected', 'message', 'message-error', 'route', 'question', 'server-error'
- once(eventName:string, listener:Function) - listen events: 'connected', 'disconnected', 'message', 'message-error', 'route', 'question', 'server-error' only once
- off(eventName:string, listener:Function) - stop listening the event for specific listener
- offAll(eventName:string) - stop listening all the events
Example
import { WsClientBrowser } from '@mikosoft/ws-client-browser';
class WsLib {
constructor() {
const wsOpts = {
connectTimeout: 8000, // HTTP request timeout i.e. websocket connect timeout (when internet is down or on localhost $ sudo ip link set lo down)
reconnectAttempts: 12, // try to reconnect n times
reconnectDelay: 5000, // delay between reconnections
questionTimeout: 13 * 1000, // wait for answer
subprotocols: ['jsonRWS'],
debug: false,
debug_DataParser: false
};
// <script src="/node_modules/@mikosoft/ws-client-browser/dist/WsClientBrowser.min.js"></script>
this.wsClient = new window.mikosoft.WsClientBrowser(wsOpts);
}
// open websocket connection
async konekt() {
// connection listener
this.wsClient.on('connected', () => {
console.log('Websocket is connected.');
});
// disconnection listener
this.wsClient.on('disconnected', () => {
console.log('Websocket is disconnected.');
});
// open websocket connection
const wsURL = 'ws://localhost:3211?authkey=TRTmrt';
await this.wsClient.connect(wsURL);
}
// close websocket connection
async diskonekt() {
if (!!this.wsClient) { this.wsClient.disconnect(); }
}
}
export default new WsLib();
Development and Build
If you want to participate in developing of the library:
$ npm run inst # Install required dependencies and devDependencies
$ npm run dev # This command will watch for /src/ file changes and build in /dist/ folder