ws-browser-client v0.4.0
Web Socket Browser Client
Description
A web socket browser client for web socket process connector servers. Use this client to connect to a web socket server and send and receive messages.
Website
websocket-browser-client (under construction)
Usage
USE THIS CLIENT TO CONNECT TO A WEB SOCKET SERVER SET WITH:
Installation
npm install --save ws-browser-client
Connection Setup
import { WebSocketBrowserClient } from "ws-browser-client";
let connectionOptions = null;
/* default values
connectionOptions = {
onConnectionErrorReconnect: true,
authCallbackOnReconnect:true,
reconnectionTimeout: 2_000,
maxReconnectionAttempts: 20,
logConnectionTry: false,
}
*/
let Logger = null;
/* default values
Logger = {
log: console.log,
error: console.error,
warn: console.warn,
info: console.info,
debug: console.debug
}
use this to log all incoming messages
*/
export const wsClient = new WebSocketBrowserClient(connectionOptions,Logger);
let authCredentials = {
//... your credentials
}
// set what to do if authentication is successful
wsClient.whenConnected = () => {
console.log('WebSocketClient Connected');
// ... now you can use the client in other parts of your application
AfterConnectedProcedure();
};
// set what to do if authentication fails
wsClient.ifAuthenticationFails = (authenticationError) => {
console.error({authenticationError});
}
// set what to do if connection is lost
wsClient.onConnectionError = (connectionLostError,connectionLostInfo) => {
// error types:
// invalidIncomingData: the server sent invalid format data
// connectionError: connection failed
// maxReconnectionAttempts: the client tried to reconnect maxReconnectionAttempts times to the server but the server is not available
console.error({connectionLostError,connectionLostInfo});
}
wsClient.onConnectionClosed = (connectionCloseError,connectionCloseEvent) => {
// error types:
// connectionClosed: the server closed the connection
console.log({connectionCloseError,connectionCloseEvent});
}
// execute the connection to the server
wsClient.connectTo('ws://localhost:8080',authCredentials);
You can rewrite the whenConnected
, ifAuthenticationFails
and onConnectionError
methods anytime before the connectTo
method is called.
API: After Connection Setup
interface User { }
interface NewUserResponse { }
let globalUsers: User[] = [];
const AfterConnectedProcedure = () => {
// after connection is done, you can read de session data return by the server
let sessionData = wsClient.session
// send a echo message to the server and wait for a response
wsClient.echo({msg:'testing connection ...'},(error,response) => {
console.log({error,response});
});
// send a request message to the server and wait for a response to get an array of users
wsClient.request<User[]>('getUsers',{},(error,users) => {
if(error) {
console.log('Error:',error);
return;
} else {
globalUsers = users;
}
});
// send a broadcast message to all clients in the group1, except the sender, no matter the group the sender is in
wsClient.Broadcast("newUser","group1" ,{name:"John Doe"});
// send a broadcast message to all clients
wsClient.Broadcast("keepAlive",null ,{name: sessionData["..."]});
// join the group1 to receive messages from the server for this group
let connectedClients:{uuid:string,publicAlias:string,isAvailable:boolean,publicInmutableData:any,connected:boolean}[] = []
// get all connected ws-clients
wsClient.getAvailableClients((err:any,clients:{uuid:string,publicAlias:string,isAvailable:boolean,publicInmutableData:any,connected:boolean}[]) =>{
connectedClients = clients;
})
// set the public availability of this client as true (available to receive direct messages from other clients)
wsClient.updatePublicAvailability(true,(error: any, response: {currentAvailability:boolean}) => {
if(error) {
console.log('Error:',error);
return;
} else {
console.log({currentAvailability});
}
});
// listen to all clients updates
// when a client connects or disconnects, this listener will be called
// when a client updates its public alias, this listener will be called
// when a client updates its public availability, this listener will be called
ws.onClientUpdate((incomingData: {uuid:string,publicAlias:string,isAvailable:boolean,publicInmutableData:any,connected:boolean}) =>{
// get the public alias of the client that sent the message
let {uuid,publicAlias,isAvailable,publicInmutableData,connected} = incomingData;
let findClient = connectedClients.find(client => client.uuid === uuid);
if(findClient) {
findClient.publicAlias = publicAlias;
findClient.isAvailable = isAvailable;
findClient.publicInmutableData = publicInmutableData;
findClient.connected = connected;
} else {
connectedClients.push({uuid,publicAlias,isAvailable,publicInmutableData,connected});
}
connectedClients = connectedClients.filter(client => client.connected);
})
// set the public availability of this client as true (available to receive and send direct messages from other clients, and receive update client broadcast messages from the server)
ws.setAvailable((error: any, response: {currentAvailability:boolean})=>{
console.log({currentAvailability});
});
// set the public availability of this client as false (not available to receive and send direct messages from other clients, and receive update client broadcast messages from the server)
ws.setUnavailable((error: any, response: {currentAvailability:boolean})=>{
console.log({currentAvailability});
});
// when a client sends a message to this client, this listener will be called
wsClient.onClientMessageReceived<any>((error,incomingData: {fromUUID:string,data:any}) => {
// get the public alias of the client that sent the message
let {fromUUID,data} = incomingData;
let clientAlias = connectedClients.find(client => client.uuid === fromUUID).publicAlias;
console.log(`Message from ${clientAlias}:`,data);
});
let selectedUserPublicAlias = '...';
let selectedUserUUID = connectedClients.find(client => client.publicAlias === selectedUserPublicAlias).uuid;
let msg = {
ack: "ok!!! message received ",
}
// send a message to a specific client with the its uuid
wsClient.sentToClient<any>(selectedUserUUID,msg,(error: any, response: {sent:boolean})=> {
if(error) {
console.log('Error:',error);
return;
} else {
console.log({sent});
}
});
wsClient.joinGroup('group1');
// leave the group1
wsClient.leaveGroup('group1');
// leave all groups
wsClient.leaveAllGroups();
}
// you can set a onMessageReceived listener,
// to receive messages from the server
// before or after the connection setup is done
wsClient.onMessageReceived<User>('newUser', globalUsers.push);
API: Example
As long as the connection is open, you can send messages to the server and receive messages from the server in any part of your application.
let btnNewUser = document.getElementById('btn-new-user');
let btnLogout = document.getElementById('btn-logout');
btnNewUser.addEventListener('click',() => {
let newUser:User = { }
// send a request message to the server and wait for a response to create a new user
wsClient.request<NewUserResponse,User>('createUser',newUser,(error,response:NewUserResponse) => {
if(error) {
console.log('Error:',error);
return;
} else {
console.log('new user created');
}
});
});
btnLogout.addEventListener('click',() => {
// close the connection
wsClient.close();
});
READ THE CODE ON
github: websocket-browser-client
License
Author
Carlos Velasquez - ceduardorubio
Keywords
websocket, websocket client, websocket browser client
Change Log
0.0.3
- session is now available after connection is done. [wwsClient.session]
0.0.5
- with src folder
0.1.5
- Fix type module error
0.1.8
- Broadcast message to all clients in a group
0.2.0
- Get a list all connected clients (alias and uuid)
- Send message to a specific client
- Update public availability
- Update public alias
0.2.5
- Fix error auto-reconnecting after connection is lost
0.3.0
- Availability of the client controls the ability to receive direct messages from other clients, and receive update client broadcast messages from the server
- Listening on update client broadcast messages from the server
0.3.1
- fix port detection when websocketServerURL = "/" [ connectTo(websocketServerURL,newAuthCredentials) ]
- websocketServerURL default value is now "/"
0.3.2
- logConnectionTry: connectionOptions.connectionOptions (default: false)
logs the connection try
0.3.3
- RemoveOnMessageReceived: remove a listener from the onMessageReceived listeners list
0.4.0
- RemoveOnMessageReceived: using uuid to remove a listener from the onMessageReceived listeners list
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
10 months ago
12 months ago
12 months ago
12 months ago
10 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago