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.

The following table lists browsers and their versions we support.

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

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 Quickstart for React.

Sendbird provides various access control options when using the Chat SDK. By default, the following attributes are turned on to avoid unexpected errors when creating sample apps and sending your first message:

• Allow retrieving user list
• Allow updating user metadata
• Allow creating open channels
• Allow creating group channels

However, this may grant access to unwanted data or operations, leading to potential security concerns. To manage your access control settings, you can turn on or off each option in Settings > Application > Security > Access control list on Sendbird Dashboard.

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.

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 sendbird

Or you can download the latest Chat SDK for JavaScript, copy the Chat SDK to your project classpath (most commonly the lib/ directory), and then include the Chat SDK file to your working file.

Note: For Sendbird Chat SDK v3.0.127 or higher, you should also add the axios library into the <script> tag before adding the Sendbird library. You can host the library yourself or make use of a CDN.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- or -->
<script src="lib/SendBird.min.js"></script>

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 the App ID, which can be found on the Sendbird Dashboard.

Note: The new SendBird() 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.

With local caching, a new optional parameter has been added to the SendBird() method, which is localCacheEnabled.

The localCacheEnabled determines whether the client app will use the local storage through Sendbird Chat SDK or not. Because this is optional, the default value will be false. If you want to build a client app with our local caching functionalities, set the localCacheEnabled to true.

// Initialize SendBird instance to use APIs in your app.
var sb = new SendBird({appId: APP_ID, localCacheEnabled: true });   // localCacheEnabled is optional.

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.
sb.connect(USER_ID, function(user, error) {
    if (error) {
        // Handle error.
    }

    // The user is connected to Sendbird server.
});

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.

sb.OpenChannel.createChannel(function(openChannel, error) {
    if (error) {
        // Handle error.
    }

    // 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 Sendbird server has passed to the callback function.
});

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

Enter the open channel to send and receive messages.

// The following sample code continues from Step 4.
sb.OpenChannel.createChannel(function(openChannel, error) {
    if (error) {
        // Handle error.
    }

    // Call the instance method of the result object in the openChannel parameter of the callback function.
    openChannel.enter(function(response, error) {
        if (error) {
            // Handle error.
        }

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

Finally, send a message to the channel. To learn about the message types you can send, refer to Message overview in Chat Platform API.

You can check the message you've sent in Sendbird Dashboard. To learn about receiving a message, refer to the receive messages through a channel event handler page.

const params = new sb.UserMessageParams();
params.message = TEXT_MESSAGE;

// The pending message is being returned when sendUserMessage is called.
// The pending message has the same reqId value as the corresponding failed/succeeded message that will be received through the callback.
const pendingUserMessage = openChannel.sendUserMessage(params, function(message, error) {
  if (error) {
    // Handle error. The failed message could be null depending on the error code.
  }
  // 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.

});