Chat Client

Installation

npm install @one-view/chat-client

Usage

Client Initialization

Get the aws-exports.js file from your fellow developer and put it somewhere in your project, preferably in the root. Import the ChatClient class and create an instance. Pass the username and awsconfig as paramater.

import ChatClient from '@one-view/chat-client';
import awsconfig from './aws-exports';

const username = 'your-username';
const client = new ChatClient({
    username,
    awsconfig,
});

Listen to Events

Listen to chat events using on method. See Events for the list of available events.

const messagesInRoom = {};

client.on('messageLoad', ({ roomId, messages }) => {
    messagesInRoom[roomId] = messages;
});

client.on('messageReceive', ({ roomId, message }) => {
    messagesInRoom[roomId].push(message);
});

Join Room

Join a room to load messages. messageLoad event will be emitted after succesfully joined the room, otherwise joinRoomError will be emitted.

// The value below will be provided by backend
const roomData = {
    roomId: 'some-room-id',
    token: 'your-jwt-token',
    subkey: 'your-subscription-key',
};

client.joinRoom(roomData);

Send Message

client.sendText(roomId, 'Hello World!');

Leave Room

client.leaveRoom(roomId);

Events

Below is the list of events available to listen to using on method. When an event is emitted, it will call the callback function with payload object as parameter.

| Event Name | Payload | Notes | | :-------------------- | :------------------------------------------------------------- | :---- | | messageLoad | { roomId: string, data: Message[] } | | | messageLoadError | { roomId: string, data: Error[] } | | | messageReceive | { roomId: string, data: Message } | | | messageReceiveError | { roomId: string, data: Error[] } | | | messageSend | { roomId: string, data: Message } | | | messageSendError | { roomId: string, data: Error[] } | | | roomInactive | { roomId: string } | | | joinRoomError | { roomId: string, data: Error[] } | | | userTypingStart | { roomId: string, data: username (string) } | | | userTypingStart | { roomId: string, data: username (string) } | | | userOnline | { roomId: string, data: username (string) } | | | userOffline | { roomId: string, data: username (string) } | | | assigned | { roomId: string } | | | subscriptionError | { roomId: string, data: { error: Error[], roomData: Room } } | | | pollingStart | { roomId: string } | | | pollingError | { roomId: string, data: { error: Error[], roomData: Room } } | |

example:

client.on('messageLoad', ({ roomId, data }) => {
    // Do something with received data
});

Identity ID

const client = new ChatClient({
    username: 'pandacare',
    identityId: 'some-unique-id',
    awsconfig,
});

client.on('messageReceive', ({ roomId, data: message }) => {
    if (message.identity_id !== client.identityId) {
        // message is from other user
    }
});

Heartbeat

ChatClient will send heartbeat event every certain interval (default to 2000ms) to inform the server that user is online. You can pass heartbeatInterval in ChatClient config to change the interval value.

new ChatClient({
    heartbeatInterval: 3000 // send heartbeat every 3 seconds
})

User Typing Event

To let other users know that user is typing, the chat UI must send event via typingStart and typingEnd method.

React example:

const roomId = '123'
const client = new ChatClient(...)

const App = () => {
  const [isTyping, setIsTyping] = React.useState(false)
  const [typingTimeout, setTypingTimeout] = React.useState()

  const inputHandler = () => {
    window.clearTimeout(typingTimeout)

    if (!isTyping) {
      setIsTyping(true)
      client.typingStart(roomId)
    }

    const timeout = window.setTimeout(() => {
      setIsTyping(false)
      client.typingEnd(roomId)
    }, 1000) // assume typing stop after 1 second of no input

    setTypingTimeout(timeout)
  }

  return <textarea onKeyDown={inputHandler}/>
}