Repository files navigation

1. Introduction
2. Requirements
3. Getting started
4. Sending your first message
5. Additional information

The Sendbird Chat SDK for JavaScript allows you to add real-time chat into your client app with minimal effort. Sendbird offers a feature rich, scalable, and proven chat solution depended on by companies like Reddit, Hinge, PubG and Paytm.

The Chat SDK provides the full functionality to provide a rich chat experience, implementing it begins by adding a user login, listing the available channels, selecting or creating anopen channel orgroup channel, and receive messages and other events throughchannel event delegates and the ability to send a message. Once this basic functionality is in place, congratulations, you now have a chat app!

Once this is in place, take a look atall the other features that Sendbird supports and add what works best for your users.

Find out more about Sendbird Chat for JavaScript inthe documentation. If you have any comments, questions or feature requests, let us know in theSendbird community.

This section shows you the prerequisites you need to check for using Sendbird Chat SDK for JavaScript. If you have any comments or questions regarding bugs and feature requests, visitSendbird community.

The quickest way to get started is by using one of the sample apps from thesamples repo, create an application in theSendbird dashboard and copy theApp ID to the sample app and you’re ready to go.

Before installing Sendbird Chat SDK, you need to create a Sendbird application on theSendbird Dashboard. You will need theApp ID of your Sendbird application when initializing the Chat SDK.

Note: Each Sendbird application can be integrated with a single client app. Within the same application, users can communicate with each other across all platforms, whether they are on mobile devices or on the web.

You can install the Chat SDK with eithernpm oryarn.

npm

$ npm install @sendbird/chat

Note: To use npm to install the Chat SDK, Node.js must be first installed on your system.

yarn

$ yarn add @sendbird/chat

importSendbirdChatfrom"@sendbird/chat";// your chat app implementation

If you are using TypeScript and have trouble importing Sendbird, please check yourtsconfig.json file and change the value ofallowSyntheticDefaultImports to true incompilerOptions.

Now that the Chat SDK has been imported, we're ready to start sending a message.

In order to use the features of the Chat SDK, you should initiate theSendbirdChatSDK instance through user authentication with Sendbird server. This instance communicates and interacts with the server based on an authenticated user account, and then the user’s client app can use the Chat SDK's features.

Here are the steps to sending your first message using Chat SDK:

Before authentication, you need to intialize the SDK by callingSendbirdChat.init.

Theinit method requires an appId, which is available from your Sendbird dashboard.

To improve performance, this SDK is modular. You must import and provide the required modules when callinginit.

importSendbirdChatfrom"@sendbird/chat";import{OpenChannelModule}from"@sendbird/chat/openChannel";constsb=SendbirdChat.init({appId:APP_ID,modules:[newOpenChannelModule()],});

Once the SDK is initialized, your client app can then connect to the Sendbird server. If you attempt to call a Sendbird SDK method without connecting, anERR_CONNECTION_REQUIRED (800101) error would return.

Connect a user to Sendbird server either through a unique user ID or in combination with an access or session token. Sendbird prefers the latter method, as it ensures privacy with the user. The former is useful during the developmental phase or if your service doesn't require additional security.

Connect a user to Sendbird server using their unique user ID. By default, Sendbird server can authenticate a user by a unique user ID. Upon request for a connection, the server queries the database to check for a match. Any untaken user ID is automatically registered as a new user to the Sendbird system, while an existing ID is allowed to log indirectly. The ID must be unique within a Sendbird application, such as a hashed email address or phone number in your service.

This allows you to get up and running without having to go deep into the details of the token registration process, however make sure to enable enforcing tokens before launching as it is a security risk to launch without.

// The USER_ID below should be unique to your Sendbird application.try{constuser=awaitsb.connect(USER_ID);// The user is connected to Sendbird server.}catch(err){// Handle error.}

Sendbird prefers that users connect using an access or session token, as it ensures privacy and security for the users.WhenCreating a user you can choose to generate a users access token or session token.A comparison between an access tokens and session tokens can be foundhere.Once a token is issued, a user is required to provide the issued token in thesb.connect() method which is used for logging in.

1. Using the Chat Platform API, create a Sendbird user with the information submitted when a user signs up your service.
2. Save the user ID along with the issued access token to your persistent storage which is securely managed.
3. When the user attempts to log in to the Sendbird application, load the user ID and access token from the storage, and then pass them to thesb.connect() method.
4. Periodically replacing the user's access token is recommended to protect the account.

try{constuser=awaitsb.connect(USER_ID,ACCESS_TOKEN);// The user is connected to Sendbird server.}catch(err){// Handle error.}

Create an open channel in the following way.Open channels are where all users in your Sendbird application can easily participate without an invitation.

try{constparams=newOpenChannelParams();constchannel=awaitsb.openChannel.createChannel(params);// An open channel is successfully created.// Channel data is return from a successful call to createChannel  ...}catch(err){// Handle error.}

Enter the channel to send and receive messages.

awaitchannel.enter();// The current user successfully enters the open channel// and can chat with other users in the channel....

Finally, send a message to the channel. There arethree types: a user message, which is a plain text, a file message, which is a binary file, such as an image or PDF, and an admin message, which is a plain text sent through thedashboard orChat Platform API.

constparams=newUserMessageParams();params.message=TEXT_MESSAGE;channel.sendUserMessage(params).onFailed((err:Error,message:UserMessage)=>{// Handle error.}).onSucceeded((message:UserMessage)=>{// The message is successfully sent to the channel.// The current user can receive messages from other users through the onMessageReceived() method of the channel event handler.  ...});

Sendbird wants customers to be confident that Chat SDK will be useful, work well, and fit within their needs. Thus, we have compiled a couple of optional guidelines. Take a few minutes to read and apply them at your convenience.

XSS (Cross-site scripting) is a type of computer security vulnerability. XSS helps attackers inject client-side scripts into web pages viewed by other users. Users can send any type of string data without restriction through Chat SDKs. Make sure that you check the safety of received data from other users before rendering it into your DOM.

Note: For more about the XSS prevention, visit theOWASP's XSS Prevention Cheat Sheet page.

If you are using theImmutable-js in your web app, instead of theImmutable.Map(), call theImmutable.fromJS() which converts deeply nested objects to anImmutable Map.So you can call the functions of Sendbird objects because thefromJS() method returns internal objects. But if you use aMap function, you can't call any functions of a Sendbird object.

constuserIds=["John","Harry"];constchannel=awaitsb.groupChannel.createChannelWithUserIds(userIds,false,NAME,COVER_URL,DATA);constimmutableObject=Immutable.fromJS(channel);