Improving the browser based Chat Client

(Streaming One-2-One & Pub/Sub Messages Over WebSockets Using SMQ)

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 1, 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.

Start The New Chat Client

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

Next SMQ Tutorial:

Controlling Devices Over the Internet of Things.

Stuck on a Design Detail? Let's Solve It Together:

Don't let networking, security, and device management hold you back! Let Real Time Logic help your business, development team, or customers save time and money by handling these complex tasks for you.

With a wealth of experience creating IoT solutions and embedded device interfaces, we're well-equipped to dramatically improve your products and how you build them. And if you prefer to tackle things on your own, check out our extensive list of embedded web server and IoT tutorials.

Whether you choose to work with us or take the DIY route, we're here to help you succeed. Let's team up and make your vision a reality!


OPC-UA Client & Server

An easy to use OPC UA stack that enables bridging of OPC-UA enabled industrial products with cloud services, IT, and HTML5 user interfaces.

Edge Controller

Edge Controller

Use our user programmable Edge-Controller as a tool to accelerate development of the next generation industrial edge products and to facilitate rapid IoT and IIoT development.

On-Premises IoT

On-Premises IoT Platform

Learn how to use the Barracuda App Server as your On-Premises IoT Foundation.

Embedded Web Server

Barracuda Embedded Web Server

The compact Web Server C library is included in the Barracuda App Server protocol suite but can also be used standalone.

WebSocket Server

Microcontroller Friendly

The tiny Minnow Server enables modern web server user interfaces to be used as the graphical front end for tiny microcontrollers. Make sure to check out the reference design and the Minnow Server design guide.

WebDAV Server

Network File System

Why use FTP when you can use your device as a secure network drive.

HTTP Client

Secure HTTP Client Library

PikeHTTP is a compact and secure HTTP client C library that greatly simplifies the design of HTTP/REST style apps in C or C++.

WebSocket Client

Microcontroller Friendly

The embedded WebSocket C library lets developers design tiny and secure IoT applications based on the WebSocket protocol.

SMTP Client

Secure Embedded SMTP Library

Send alarms and other notifications from any microcontroller powered product.

Crypto Library

RayCrypto C Library

The RayCrypto engine is an extremely small and fast embedded crypto library designed specifically for embedded resource-constrained devices.

Embedded PKI Service

Automatic SSL Certificate Management for Devices

Real Time Logic's SharkTrust™ service is an automatic Public Key Infrastructure (PKI) solution for products containing an Embedded Web Server.


Modbus TCP client

The Modbus client enables bridging of Modbus enabled industrial products with modern IoT devices and HTML5 powered HMIs.

Posted in SimpleMQ