# 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>.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://documentation.sceenic.co/chat-sdk/tutorials/web/web-typescript-react.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.