Web - TypeScript/React

Overview

Follow this step-by-step tutorial to create basic implementation of Chat SDK.

Requirements

Authentication

An Access Token is needed in order to allow a client to connect to chat service.
Note: It is important that the client application does not request an Access Token directly from the frontend. By doing that you risk exposing the API_KEY and API_SECRET.

Acquiring an Access Token

cUrl(Bash)
curl -iL --request GET --url https://YOUR_CAS_URL/chat/token/?sub=USER_ID --header 'auth-api-key: API_KEY' --header 'auth-api-secret: API_SECRET'
The Access Token is a JWT token - more about jwt you can read - here.
A successful response will look like that:
{
"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...."
}
You can get your API_KEY and API_SECRET in your private area, here.
USER_ID is some unique identifier of the user in your system.
Note: Every chat token corresponds to one specific user only.

Going to production

When moving from the Sandbox environment to production you will need to implement your own authentication server. This server will supply the various clients (Web, Android, and iOS) with a valid Access Token so that they can use the service.
For that you will need:
  • API_KEY, and API_SECRET - can be retrieved in your private area once you login
  • Your own working authentication server

Create a project

To create a project we recommended using the following stack: React + TypeScript + ChatSDK.
  • Create an empty React + Typescript project
npx create-react-app my-app --template typescript

Add chat SDK library to your project

  • Create .npmrc file. In the project’s root folder
  • Put your Access Token inside //registry.npmjs.org/:_authToken=YOUR_ACCESS_TOKEN.
  • Install Chat SDK via npm i @sscale/chatsdk.
For more information on NPM installation look here.

Basic setup

  • Add the following import
import { ChatSDK } from '@sscale/syncsdk';
  • Create chat SDK instance
const chatSDK = new ChatSDK();
  • Connect to server
chatSDK.connect(JWT_ACCESS_TOKEN)
.then(() => {})
.catch(e => {});
  • Create chat room
const room = chatSDK.createRoom(['user_id1', 'user_id2'], 'Best room ever');
  • Subscribe to room's or any messages
room.on(room.Events.MESSAGE, (message) => {});
or
chatSDK.on(chatSDK.Events.MESSAGE, (message) => {});
  • Send message to room
room.send('Hello')
.then(() => {})
.catch(e => {});
In addition, have a look at the extra features available for you:
chatSDK.user;
chatSDK.rooms;
chatSDK.state;
chatSDK.room(id);
chatSDK.setUsername('name').then(() => {}).catch(e => {});
chatSDK.on(Events, () => {});
room.id;
room.members;
room.member(id);
room.rename('name').then(() => {}).catch(e => {});
room.on(Events, () => {});
room.history.messages;
room.history.hasMore;
room.history.last;
room.history.more().then(() => {}).catch(e => {});
room.history.on(Events, () => {});
Have a look at the demo application and it's sources to see all the features and chat SDK API documentation here.

Support

Need technical support? contact us at [email protected].
Copy link
On this page
Overview
Requirements
Authentication
Acquiring an Access Token
Going to production
Create a project
Add chat SDK library to your project
Basic setup
Support