Setting up Sendbird in Ralali Web Application
These days there are so many messaging Software Development Kit (SDK) that can be used to build in-app chat, such as Sendbird, Mirrorfly, and Contus Fly. Most of these messaging providers are driven to enhance their infrastructure and increase the core functionalities to establish their business value far higher compared to their competitors. However, for now, we will focus on discussing Sendbird as it is used for our website and mobile apps by now. For a brief story, in previous years, before using Sendbird as our chat platform, we have successfully built our chat and notification service with Socket.io.
The main issue of why we moved to Sendbird was that, at that time, our just-released mobile apps need to integrate in-app chat as fast as possible to connect sellers with their customers. Moreover, as a software engineer, I see it was so painful to use socket service because we did not provide an SDK for mobile apps yet. The fastest solution that we should take was finding a reliable messaging platform equipped with real-time features and functionalities, such as a productive chat infrastructure that supports cross-device. If you are still curious to figure out “why”, maybe there are many other reasons, but I will merely answer you, “leave it to the experts”.
There may be many different ways to implement Sendbird in website applications. Nevertheless, in my opinion, some necessary steps can be adopted to build a minimum functionally chat with any Javascript library/framework. Moreover, to accomplish all of this hard work, I suggest to try and download the provided sample app before start to build yours. Let us start to discuss these necessary steps:
1. Integrating Sendbird SDK
What we mean with integrating here is not only a step to download and load Sendbird into DOM, but also the process to call the Sendbird library and connect a client application through its service. To do this action, we should have an App Id. A Sendbird app id is not a secret key that we need to hide it from the script, though the number of client apps that used the same app id can reduce the participant quota. After having an app id, we need to choose a unique user ID such as email to indicate a user identity. Moreover, while the user ID has not been taken, Sendbird will automatically register it as a new user once he connected.
2. Creating a new channel
To communicate with the user in Sendbird, we need to create a channel containing the related users. It is easy when all of the user (buyer and seller) have been registered before. However, in ordinary cases, only buyers have been registered. That occurred due to many sellers never log in to Sendbird through our apps (seller panel/mobile apps). To solve this issue, we need to register the intended user through Sendbird platform API manually. Platform API is slightly different from Javascript SDK about the user access right, while Javascript SDK only acts as the current user, with the platform API we can pretend as chat administrator. That is why an additional secret key (App Token) is required. This key is an extremely private key that should be hidden. I would prefer to put this key over server-side API service rather than write the key on client apps (seem to be different in my incident :D). Ok, let us move to the next step. After a new channel created, we can quickly get the channel list by calling the “Channel List Query” function in the Sendbird library. In the Ralali user viewpoint, a channel can be shown as a Shop account while the user logs in as a buyer, whereas the seller will see the channel as his buyer.
3. Handle sending messages
As we consider hard work before, we will be encountering many of arrangements just to do a simple task like sending a message. If you had tried and read the code of sample apps like I suggested, actually we can just reuse all of the functions that have been provided by that sample apps to do almost all chatting activities. To do this thing, start to create a new helper/utility file contains all the translated functions from sample apps like getting the group channel list, sending a message and getting the message list adjusted to your javascript framework.
4. Receiving chat events
To ensure that users can receive any chat events like a new incoming message, we also need to place some event handlers. An event handler is a function or method containing program statements that are executed in response to an event. Many channel event handlers can be used in Sendbird SDK. However, for this first integration step, I suggest to set just these three channel handlers: “onMessageReceived”, “onChannelChanged”, and “onReadReceiptUpdated” to reduce the complexity. The on message received event handler in client apps is called when a message has been received in a channel. We need to use this data to push a new message to the lowermost of the current opened channel. OnChannelChanged is called one of the following channel properties has been changed: distinct, push notification preferences, the last message (except when the silent admin message), unread message count, name, cover image, data, or custom type. The main property that we need to keep watching is the unread message count. It will help to inform the user if he still has some unread messages. The last channel handler that should we implemented is OnReadReceiptUpdated, as its name, it will show which message has been read by the receiver and which were not yet.
Ok, for all that we have shared above, you might agree with my approach or vice versa. I would think if you need more detail about how to customize Sendbird into your in-app chat, I can say that it is very well-documented. Good luck! 頑張って (Ganbatte!)
