Web - TypeScript/React

Overview

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

Code samples Demo application API Documentation

Requirements

• A Sceenic account

• Code Editor( WebStorm, VS Code)

• NPM access token for Chat SDK

• API_KEY and API_SECRET

• Node >= 8.10 and npm >= 5.6

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.history.on(room.history.Events.MESSAGE, (message) => {});

or

chatSDK.on(HistoryEvents.MESSAGE, (message) => {});

• Send message to room

room.history.publish('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.leaveRoom(id).then(() => {}).catch(e => {});
chatSDK.on(ChatEvents, () => {});

room.id;
room.members;
room.meta(userId);
room.creator;
room.updated_at;
room.rename('name').then(() => {}).catch(e => {});
room.addMembers(['user_id1', 'user_id2']).then(() => {}).catch(e => {});
room.removeMembers(['user_id1', 'user_id2']).then(() => {}).catch(e => {});
room.on(RoomEvents, () => {});

room.history.messages;
room.history.lastReadByMe();
room.history.lastRead(userId);
room.history.isReadByMe(timestamp);
room.history.isReadBy(timestamp, userId);
room.history.readBy(timestamp);
room.history.isRead(timestamp);
room.history.haveUnread();
room.history.hasUnread(userId);
room.history.unreadLoaded();
room.history.hasOlder();
room.history.loadOlder().then(() => {}).catch(e => {});
room.history.loadUnread().then(() => {}).catch(e => {});
room.history.markAsRead(timestamp).then(() => {}).catch(e => {});
room.history.on(HistoryEvents, () => {});

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 [e-mail].