Home
/
Chat
/
JavaScript

Send your first message

The Chat SDK simplifies chat features into an effortless and straightforward process. To send your first message, do the following steps:

Note: The methods in the following steps are all asynchronous, excluding the new SendBird(). This means that when using asynchronous methods, your client app must receive success callbacks from Sendbird server through callback functions in order to proceed to the next step. A good way to do this is the nesting of methods: Go to Step 4: Enter the channel to learn more about how to nest the openChannel.enter() in the OpenChannel.getChannel() method.


Step 1: Initialize the Chat SDK

Pass in the App ID of the Sendbird application you created earlier in the dashboard to initialize the Chat SDK.

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

Light Color Skin
Copy
// Initialize SendBird instance to use APIs in your app.
var sb = new SendBird({appId: APP_ID});

Step 2: Connect to Sendbird server

Connect a user to Sendbird server using their unique user ID. Any untaken user ID is automatically registered as a new user to your Sendbird application before being connected, while an existing ID is allowed to log in directly.

Note: Go to the Authentication page to learn more about authenticating with an access token.

Light Color Skin
Copy
// 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.        
});

Step 3: Create a new open channel

Create an open channel. Once created, all users in your Sendbird application can easily participate in the channel.

Note: In a similar fashion, you can create a group channel with inviting users as new members to the channel.

Light Color Skin
Copy
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.
    ...
});

Step 4: Enter the channel

Enter the channel to send and receive messages.

Light Color Skin
Copy
// The CHANNEL_URL below can be retrieved using the openChannel.channelUrl.
sb.OpenChannel.getChannel(CHANNEL_URL, 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.
        ...
    });
});

Step 5: Send a message to the channel

And finally, send a message to the channel! There are three types: a user message is a plain text, a file message is a binary file, such as an image or PDF, and an admin message is a plain text sent through the dashboard or Chat API for special purpose.

Light Color Skin
Copy
openChannel.sendUserMessage(MESSAGE, DATA, CUSTOM_TYPE, function(message, error) {
    if (error) {
        // Handle error.    
    }

    // 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.
    ...
});

Parameter ordering in callbacks

In a callback, the error parameter is passed last in order by default. For example, the connect() method below returns parameters in (user, error) order.

Light Color Skin
Copy
sb.connect(USER_ID, function(user, error) {});

You can configure your Sendbird application to change the order by calling the sb.setErrorFirstCallback(true). Once true is set, all callbacks pass the error as the first parameter.

Light Color Skin
Copy
sb.setErrorFirstCallback(true);
sb.connect(USER_ID, function(user, error) {});

The sb.setErrorFirstCallback(false) returns callbacks to their original parameter ordering, with errors last.


Use functions of Sendbird objects with Immutable-js

If you are using the Immutable-js in your web app, instead of the Immutable.Map(), call the Immutable.fromJS() which converts deeply nested objects to an Immutable Map.

So you can call the functions of Sendbird objects because the fromJS() method returns internal objects. But if you use a Map function, you can't call any functions of a Sendbird object.

Light Color Skin
Copy
var userIds = ['John', 'Harry']; 

sb.GroupChannel.createChannelWithUserIds(userIds, false, NAME, COVER_URL, DATA, function(groupChannel, error) {
    if (error) {
        // Handle error.
    }

    var immutableObject = Immutable.fromJS(groupChannel);
    console.log(immutableObject);
});