# Web - TypeScript/React

## Overview <a href="#overview" id="overview"></a>

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

[Code samples](https://bitbucket.org/svmt/chat-demo/src/master/)\
[Demo application](https://sceenic-chat-demo.web.app/)\
[API Documentation](https://chat-api-doc.web.app/)

## Requirements <a href="#requirements" id="requirements"></a>

* A Sceenic account
* Code Editor( [WebStorm](https://www.jetbrains.com/webstorm/download/), [VS Code](https://code.visualstudio.com/download))
* NPM access token for Chat SDK
* API\_KEY and API\_SECRET
* [Node >= 8.10 and npm >= 5.6](https://nodejs.org/en/)

## Authentication <a href="#authentication" id="authentication"></a>

An `Access Token` is needed in order to allow a client to connect to chat service.

{% hint style="danger" %}
**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.
{% endhint %}

### Acquiring an Access Token <a href="#acquiring-an-access-token" id="acquiring-an-access-token"></a>

{% tabs %}
{% tab title="cUrl(Bash)" %}

```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'
```

{% endtab %}
{% endtabs %}

The `Access Token` is a JWT token - more about jwt you can read - [here](https://en.wikipedia.org/wiki/JSON_Web_Token).

A successful response will look like that:

```
{
    "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...."
}
```

{% hint style="info" %}
You can get your API\_KEY and API\_SECRET in your private area, [here](https://media.sceenic.co/).
{% endhint %}

{% hint style="info" %}
USER\_ID is some unique identifier of the user in your system.
{% endhint %}

{% hint style="warning" %}
**Note:** Every chat token corresponds to one specific user only.
{% endhint %}

### 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 ](https://media.sceenic.co/)
* Your own working authentication server

## Create a project <a href="#create-a-project" id="create-a-project"></a>

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 <a href="#add-the-sync-sdk-library-to-your-project" id="add-the-sync-sdk-library-to-your-project"></a>

* 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](https://documentation.sceenic.co/chat-sdk/tutorials/web/installing-the-npm-package).

## Basic setup <a href="#sample-application-ui" id="sample-application-ui"></a>

* Add the following import

```javascript
import { ChatSDK } from '@sscale/syncsdk';
```

* Create chat SDK instance

```javascript
const chatSDK = new ChatSDK();
```

* Connect to server

```javascript
chatSDK.connect(JWT_ACCESS_TOKEN)
            .then(() => {})
            .catch(e => {});
```

* Create chat room

```javascript
const room = chatSDK.createRoom(['user_id1', 'user_id2'], 'Best room ever');
```

* Subscribe to room's or any messages

```javascript
room.history.on(room.history.Events.MESSAGE, (message) => {});
```

or

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

* Send message to room

```javascript
room.history.publish('Hello')
    .then(() => {})
    .catch(e => {});
```

In addition, have a look at the extra features available for you:

```javascript
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 ](https://sceenic-chat-demo.web.app/)and it's [sources](https://bitbucket.org/svmt/chat-demo/src/master/) to see all the features and chat SDK API documentation [here](https://chat-api-doc.web.app/).

## Support <a href="#support" id="support"></a>

Need technical support? contact us at <Support@sceenic.co>.