runme: id: 01HSJ477SPSG4K6KD38XF1VATZ version: v3

NPM

npm install belo-js-sdk

Yarn

yarn add belo-js-sdk

JS deliver

<script src="https://cdn.jsdelivr.net/npm/belo-js-sdk"></script>

✨ Getting started

The BeloChat client is setup to allow extension of the base types through use of generics when instantiated. The default instantiation has all generics set to Record<string, unknown>.

import { BeloChat } from 'belo-js-sdk';
// Or if you are on commonjs
const BeloChat = require('belo-js-sdk').BeloChat;

const client = BeloChat.getInstance('YOUR_API_KEY', 'API_KEY_SECRET');

const channel = client.channel('messaging', 'TestChannel');
await channel.create();

Or you can customize the generics:

type ChatChannel = { image: string; category?: string };
type ChatUser1 = { nickname: string; age: number; admin?: boolean };
type ChatUser2 = { nickname: string; avatar?: string };
type UserMessage = { country?: string };
type AdminMessage = { priorityLevel: number };
type ChatAttachment = { originalURL?: string };
type CustomReaction = { size?: number };
type ChatEvent = { quitChannel?: boolean };
type CustomCommands = 'giphy';

type StreamType = {
  attachmentType: ChatAttachment;
  channelType: ChatChannel;
  commandType: CustomCommands;
  eventType: ChatEvent;
  messageType: UserMessage | AdminMessage;
  reactionType: CustomReaction;
  userType: ChatUser1 | ChatUser2;
};

const client = BeloChat.getInstance<StreamType>('YOUR_API_KEY', 'API_KEY_SECRET');

// Create channel
const channel = client.channel('messaging', 'TestChannel');
await channel.create();

// Create user
await client.upsertUser({
  id: 'vishal-1',
  name: 'Vishal',
});

// Send message
const { message } = await channel.sendMessage({ text: `Test message` });

// Send reaction
await channel.sendReaction(message.id, { type: 'love', user: { id: 'vishal-1' } });

Custom types provided when initializing the client will carry through to all client returns and provide intellisense to queries.

🔗 (Optional) Development Setup in Combination with our SDKs

Connect to 'belo-react-sdk

Run in the root of this repo

yarn link

Run in the root of one of the example apps (SampleApp/TypeScriptMessaging) in the belo-react-sdk repo

yarn link belo-js-sdk
yarn start

Open metro.config.js file and set value for watchFolders as

module.exports = {
  ...
  watchFolders: [projectRoot].concat(alternateRoots).concat(['{{CHANGE_TO_THE_PATH_TO_YOUR_PROJECT}}/belo-js-sdk'])
};

Make sure to replace {{CHANGE_TO_THE_PATH_TO_YOUR_PROJECT}} with the correct path for open-chat-js-js folder as per your directory structure Run in the root of this repo

yarn start