Chat / JavaScript
Chat JavaScript v4
Chat JavaScript
Chat
JavaScript
Home
/
Chat
/
JavaScript
This is the new Docs for Chat SDK v4 for JavaScript. To see the previous Docs, click here.

Send your first message

With Sendbird Chat SDK for JavaScript, you can efficiently integrate real-time chat into a client app. On the client-side implementation, you can initialize and configure the chat with minimal effort. On the server-side, Sendbird ensures reliable infra-management services for the chat service within your app.

This page demonstrates how to install the Chat SDK in your app so that you can send your first message in just a few simple steps. In addition, try building your app on top of our sample app to jumpstart your build.

Note: To learn about how to build a chat app using React Native and Hooks, see our React Native chat tutorial.


Supported browsers

The following table lists browsers and their versions we support.

BrowserVersions

Edge

13 or higher

Chrome

16 or higher

Firefox

11 or higher

Safari

7 or higher

Opera

12.1 or higher

iOS Safari

7 or higher

Android Browser

4.4 (Kitkat) or higher

Note: Sendbird server supports Transport Layer Security (TLS) from version 1.0 up to 1.3. For example, in the server regions where TLS 1.3 isn’t available, lower versions, sequentially from 1.2 to 1.0, will be supported for secure data transmission.


Before you start

Before installing Sendbird Chat SDK, you need to create a Sendbird application on the Sendbird Dashboard, which comprises everything required in a chat service including users, messages, and channels. You will need App_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.

Sendbird UIKit

UIKit is a Sendbird Chat SDK add-on with user interfaces that enable an easy and fast integration of standard chat features into new or existing client apps.

If you would like a sample app with embedded UIs, see UIKit Overview for React.


Get started

To send a message in a client app, you should build and configure an in-app chat using Sendbird Chat SDK. Sendbird Chat SDK can be installed through either a web sample project or React Native project.

Note: Sendbird Chat SDK v4 supports both typescript and javascript. In this page, the codes are provided in typescript.

Step 1 Install Sendbird Chat SDK

Installing Sendbird Chat SDK is simple if you’re familiar with using external libraries or SDK’s in your projects. You can install the Chat SDK with npm using the following command.

$ npm install --save @sendbird/chat

Step 2 Initialize Sendbird Chat SDK

Now, initialize Sendbird Chat SDK in the app to allow the Chat SDK to respond to changes in the connection status in JavaScript client apps. Initialization requires App_ID, which can be found on the Sendbird Dashboard.

Note: The SendbirdChat.init() method must be called across a client web app at least once. We recommend that you initialize the Chat SDK at the top of your JavaScript file.

Depending on which chat feature you would like to use, add either OpenChannelModule or GroupChannelModule to create open channel or group channel respectively.

import SendbirdChat from '@sendbird/chat'
import { OpenChannelModule } from '@sendbird/chat/openChannel';

const sb = SendbirdChat.init({
    appId: APP_ID,
    modules: [
        new OpenChannelModule(),
    ],
});

Step 3 Connect to the Sendbird server

You will need a user in order to send a message to a channel. You can either create a user on our dashboard or use a unique ID that hasn't been taken by any of your Sendbird application users. In the latter case, a new user will be automatically created in your Sendbird application before being connected.

Note: To learn more about authenticating with an access token, go to Authentication.

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

Step 4 Create a new open channel

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

The following codes show how to create an open channel.

try {
    const params = new OpenChannelCreateParams(); // OpenChannelCreateParams can be imported from @sendbird/chat/openChannel.
    const channel = await sb.openChannel.createChannel(params);

    // An open channel is successfully created.
    // Through the openChannel parameter of the callback function,
    // you can get the open channel's data from the result object that the Sendbird server has passed to the callback function.
    // ...
} catch (err) {
    // Handle error.
}

Note: You can also create a group channel to send a message. To learn more, see Create a channel.

Step 5 Enter the channel

Enter the open channel to send and receive messages.

await channel.enter();
// The current user successfully enters the open channel,
// and can chat with other users in the channel by using APIs.
// ...

Step 6 Send a message to the channel

Finally, send a message to the channel. To learn more about the message type you can send, see Messages.

const params = new UserMessageCreateParams();   // UserMessageCreateParams can be imported from @sendbird/chat/openChannel.
const params = new UserMessageCreateParams();
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 an event handler.
        // ...
    });

Step 7 Receive a message

Add the onMessageReceived() channel event handler using the addGroupChannelHandler() or addOpenChannelHandler() method so that you can receive the message you just sent to the channel. You can also see the message on our dashboard.

const channelHandler = new OpenChannelHandler();    // OpenChannelHandler can be imported from @sendbird/chat/openChannel.
channelHandler.onMessageReceived = (channel: BaseChannel, message: BaseMessage) {
    // ...
};

sb.openChannel.addOpenChannelHandler(UNIQUE_HANDLER_ID, channelHandler);
// The UNIQUE_HANDLER_ID argument should be a unique identifier
// to register multiple concurrent handlers.