Group chat

Javascript

The next example show how to realize a simple group chat between several clients.

Please make sure that you went through the simple chat tutorial before the group chat tutorial, as many parts are the same between those two examples. In particular, the creation of the IMClient and subscription to some events is the same. In a group chat, the steps are :

  • One client creates a group chat.
  • This client then makes other clients join it’s newly created group chat.
  • Messages exchanged between clients on the group chat are sent to all the participants for the duration of the group chat.
  • A client can leave the group chat at any time. The group chat will be destroyed when the last client leaves.

There are 4 clients for this example, which can be found on Github. The difference is that we use the group chat specific events:

There are five new events used here. The group chat creation is triggered by a click on the “createGroupChat” button.
When the user 1 clicks it, it invites the users 2 and 3 to a group chat. The user 4 can be added later, via the “addUserInGroupChat” button. A group chat is active as long as there are participants in the group. And a client can leave the group chat at any time (“leaveGroupChat”).

After subscribing to these events, we can also bind our buttons to our instance of IMClient. This will allow the client to create and joins a group chat. Once in a group chat, a client is also able to invite other participants.

The client also needs to register to some events to be notified when (in order) :

  • A client is added in a group chat.
  • The group chat is created.
  • An invitation to join a group chat is received.
  • A message is received in the group chat.
  • The status of a member of the group chat changes.

Note that the groupChatHandler function only displays the incoming messages in the console ! You have to open your browser console to see the messages.