Improving the browser based Chat Client

We introduced SMQ's publish/subscribe feature in our first chat tutorial. In this tutorial, we will improve the chat client and introduce some of the unique features of SMQ that use publish/subscribe with added advantages that simplify use within IoT application design.

The following improvements will be added:

  • User logon by nickname.
  • User interface is split into two panes where the left pane will include a list of all connected user nicknames.
  • All connected users will receive an immediate notification when we sign on or sign off.
  • All clients will provide a direct response after receiving our initial "Hello" message. We can in this way build up the list of users in the left pane.
  • Left pane visual color indication to signify typing activity by user nickname

Upon first glance, the features listed above may appear easy to implement within a (standard) publish/subscribe protocol. However, there are a few intricate problems that occur when it comes to sending a message directly to a specific client. In addition, a (standard) publish/subscribe protocol will not allow for the supervision or observation of the number of clients that are subscribed to a particular or specific topic at any given time. This feature will be needed by our chat client to allow printing "user signing off" messages at the appropriate time.

When a new client joins the network it will publish to the topic "Hello", thus informing all existing connected clients that a new client has just connected. Existing connected clients then add the new client to their list located in the left pane. The newly established client has no immediate knowledge of the existing clients, so it will not be able to build a list of connected users until we receive information from them. We solve this problem by allowing existing connected clients to respond with a follow-up "Hello" message in return and direct to the newly established client connection, as shown in the figure below.

Publish subscribe ephemeral ID

Figure 1: new chat client publishes "Hello" and gets a response from all connected chat clients.

TIP: A great introduction to Topic IDs, Sub Topic IDs, Ephemeral IDs, and supervising topic/subscribers can be found in the SMQ documentation.

As we established above, the new client enters with publishing to "Hello", which is a topic name where all clients are subscribed. All existing clients respond by sending a message directly to the "sender" of the new client that published the message. The "sender" information is included in every published message and is what we refer to as the publisher's ephemeral topic ID (ptid). Within SMQ, all topic names are translated to a number referred to as a topic ID and the ephemeral topic ID uniquely identifies one client, thus enabling direct addressing.

The following code snippet shows how to send a response to the "sender":

function onHello(name,ftid) {
    /* We receive nickname (name) and publisher's ephemeral topic ID
       (ftid) from new chat clients. Respond by sending our nickname
       directly to the new client. We do this by publishing to
       publisher's ephemeral topic ID and sub-topic "Hello".
// Subscribe to "Hello" messages.
smq:subscribe("Hello", {onmsg:onHello, datatype:"text"});

Example 1: subscribe to "Hello" and Respond to Publisher's Ephemeral ID (ptid).

When an existing chat client responds to a new "Hello" message by sending a response directly to the publisher's ephemeral topic ID, a message is sent back to its original publisher (new chat client), by subscribing to messages sent to the client's own ephemeral ID is shown in the following example:

smq:subscribe("self", "Hello", {onmsg:onHello, datatype:"text"});

Example 2: subscribe to "self", the client's own ephemeral ID (ptid), and sub-topic "Hello".

When a new client publishes to "Hello" this enables existing clients to display a "user (nickname) signing on" message notification. We should also show a "user (nickname) signing off" message, when an existing connected client disconnects. Each client is able to detect when a connected user or client signs off by requesting the broker to send change notification events when the number of subscribers to a topic change.

Supervising a user is activated by sending an "observe" command to the broker. We can observe named topics and how many subscribers are subscribed to a named topic. We can also supervise ephemeral IDs. Receiving a change event for an ephemeral ID means the client disconnected. The following example is a modified version of the 'onHello' function in example 1, where we also request the broker to inform us if the user disconnects.

function onHello(name,ftid) {
    smq:observe(ftid, function() { // Supervise publisher's ephemeral ID
        // Print "signing off" message and remove user from left pane

Example 3: shows a modified 'onHello' function from example 2, where we request the broker to send change notifications for 'ftid'.

The above provides an introduction to the new improved chat client and how we use ephemeral IDs, sub-topics, and observer notifications for improving the chat user interface. There are a few things not covered, such as sending "typing events" and updating the user interface when a user types. However, these features are based on standard publish/subscribe events and are documented in the improved chat client's HTML and JavaScript code. You may test the new chat client, running on our online broker, or download the code and setup your own broker as explained in the first chat tutorial.

The server side code and the web application is included in the Mako Server Tutorials. See the online SMQ documentation for more information.

Posted in SimpleMQ