To use this package, run ```npm i ergo-chat```. This package exports a fully typed class SocketConnection which supports basic chat functionality from the client using socket.io-client.
npm install ergo-chatnpm i ergo-chat`. This package exports a fully typed class SocketConnection which supports basic chat functionality from the client using socket.io-client.
Supported Event Firing
The class has three methods notifyRead, notifyTyping, and sendMessage which fire the read, typing and chat message socket.io events respectively. sendMessage takes a string as an argument which is the message to be sent. The following are the data sent in these events to the socket server.
`JavaScript
this.socket.emit('chat message', {
from: this.socketDetails.userId,
to: this.socketDetails.otherId,
fromAlias: this.socketDetails.userAlias,
toAlias: this.socketDetails.otherAlias,
messageBody: messageBody,
roomId: this.socketDetails.roomId,
read: false,
readTime: -1,
sessionId: this.socketDetails.sessionId,
bookingId: this.socketDetails.bookingId,
});
`
`JavaScript
this.socket.emit('read', {
time: Date.now(),
roomId: this.socketDetails.roomId,
from: this.socketDetails.userId,
fromAlias: this.socketDetails.userAlias,
});
`
`JavaScript
this.socket.emit('typing', {
roomId: this.socketDetails.roomId,
from: this.socketDetails.userId,
fromAlias: this.socketDetails.userAlias,
});
`
Finally, a joinRoom event is fired on connect
`JavaScript
socket.emit('joinRoom', { roomId: this.socketDetails.roomId });
`
Supported Event Handling
To support handling events coming from the socket server, rxjs Subjects were used. In particular, roomHistorySubject listens for roomHistory events, readSubject listens for otherRead events, typingSubject Listens for otherTyping events and messageSubject listens for chat message events. In order to subscribe to these events and handle the data, use the following pattern.
`JavaScript
const socket = new SocketConnection(...)
socket.getMessageSubject().subscribe((data)=>{
//handle the event using the data from the socket server
//example, add the chat message to the DOM
})
``