Documentation

Installation

Package installation

First, install the library using any package manager:

bash

npm install @streamtalk/react

Getting an authorization token

On the server side, you need to implement an API endpoint that the StreamTalk frontend library will call during initialization

The JS library sends a POST request to the URL specified in the initialize method during initialization.

On the server side, you should send the following request:

http

POST https://streamtalk.chat/api/auth/participant

Headers:

App-Id - Your AppId
App-Key - Your Secret Key
Content-Type - application/json

JSON schema

json

{
  "type": "object",
  "properties": {
    "participant": {
      "type": "object",
      "properties": {
        "id": {
          "type": "integer" 
        },
        "visibleName": {
          "type": "string" 
        }
      },
      "required": [
        "id",
        "visibleName" 
      ]
    }
  },
  "required": [
    "participant" 
  ]
}

Request example:

json

{
  "participant": {
    "id": 1,
    "visibleName": "name" 
  }
}

The received response must be returned as-is, without any modifications.

Code example:

java

@RestController
@RequestMapping("/chats/auth")
@Slf4j
public class ChatAuthParticipantController {

    @PostMapping
    public JsonObject auth() throws Exception {
        User authorizedUser = YourAuthorizedService.getAuthorizedUser();

        final JsonObject request = new JsonObject();
        final JsonObject participantJson = new JsonObject();

        participantJson.addProperty("id", authorizedUser.getId());
        participantJson.addProperty("visibleName", authorizedUser.getName());

        request.add("participant", participantJson);

        final HttpClient httpClient = HttpClient.newHttpClient();
        final HttpRequest httpRequest = HttpRequest.newBuilder()
                .uri(URI.create("https://streamtalk.chat/api/auth/participant"))
                .header("App-Id", "YOUR-APP-ID")
                .header("App-Key", "YOUR-APP-KEY")
                .header("Content-Type", "application/json")
                .POST(HttpRequest.BodyPublishers.ofString(request.toString()))
                .build();

        final HttpResponse<String> response = httpClient.send(httpRequest, HttpResponse.BodyHandlers.ofString());

        log.info("Response: {}", response.body());

        return JsonParser.parseString(response.body()).getAsJsonObject();
    }
}

Initialization

To initialize, you need to use the StreamtalkInitializer class and call the initialize method. During initialization, you must provide:

url - the endpoint address on your backend that performs authentication and returns a token
body - the data that will be sent to this endpoint
headers - optional HTTP headers that will also be included in the request
websocketOnMessage - a method for handling incoming messages (for example, to update the latest message in the conversation list)

The method returns a promise that allows you to track the initialization process status.

Code example:

typescript

import { StreamtalkInitializer } from '@streamtalk/react';

async function initializeChat(payload: YourPayloadType) {
  const streamtalkInitializer = new StreamtalkInitializer();

  try {
    await streamtalkInitializer.initialize({
      url: "https://myhost/api/chat/auth",
      body: payload,
    });
    // handle success initialization
  } catch (error) {
    // handle error
  }
}