real time cloud dashboards, pubnub to the rescue

There are many scenarios that require a UI to be updated with long processes and / or stuff that goes on in the cloud – that require a special polling or infrastructure to communicate the information from the cloud to the browser / client UI.

In serverless paradigms, this is a pain as “polling” for stuff is both a nuisance and may incur lambda + db overheads. Setting up a simple pub-sub mechanism for browser based systems, or other clients, in the AWS echosystem is non trivial and requires some work and several resources.

Here comes pubnub, a simple pub-sub mechanism with a couple of lines of code to publish or subscribe to channel messages, AND a great free tier too!

So in my scenario I have a lambda function (or functions) that send a message to relevant channel, say a “customer id”, and clients listen to it (and perhaps a “system” channel as well)

The lambda code is very simple:

// get the lib
const PubNub = require('pubnub');

// init the lib
let pubnub = new PubNub({
    publishKey : 'pub-c-your-key',
    subscribeKey : 'sub-c-your-key'
});

// publish a message
await pubnub.publish(getPublishConfig(channel, message))
.then((response) => {
  console.log("pubnub response", response);
});

//and for convenience I created a function for the publish object:
function getPublishConfig(channel, message) {
  return {
        channel : channel,
        http_sync: true,
        message : message
    };
}

And now the whole lambda:

const PubNub = require('pubnub');

exports.handler = async (event) => {
    // Do some great things
    let cid = "customer_id";
    let pubnub = new PubNub({
        publishKey : 'pub-c-your-key',
        subscribeKey : 'sub-c-your-key'
    });
    
    let channel = cid;
    let message = "something happened";
    
    await pubnub.publish(getPublishConfig(channel, message))
    .then((response) => {
      console.log("pubnub response", response);
    }).catch((error) => {
      console.log("pubnub err", error);
    });
    
    const response = {
        statusCode: 200,
        body: "We did amazing things!"
    };

    return response;
};

function getPublishConfig(channel, message) {
  return {
        channel : channel,
        http_sync: true,
        message : message
    };
}

Very simple to publish πŸ™‚
From my exoperience it takes about 50ms to dispatch the message, maybe this can be improved further (I’d like to hear about it if you know how…

The client side is even simpler – first you can use the built in cline tester on pubnub’s website to see if any messages are going through the system by going to their debug console

And creating your own client tester, or real world implementation is also easy, here’s how I wrote mine

<script>
    pubnub = new PubNub({
        publishKey : 'pub-c-your-key',
        subscribeKey : 'sub-c-your-key'
    })

    pubnub.addListener({
        message: function (msg) {
            console.log(msg.message);
            $("#target").append(JSON.stringify(msg.message));
            $("#target").append("<br />");
        }
    });
    console.log("Subscribing..");
    pubnub.subscribe({
        channels: ['roadpage']
    });
</script>

And for the whole html code with a sample conditional to handle commands (e.g. messages published from the cloud with color will change the div color on the browser page πŸ™‚ )

<html>
<header>
    <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.21.7.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</header>

<body>
    <article style="width: 50%; margin: 6% auto;">
        <h1>AWS Cloud realtime lambda updates via pubnub</h1>
        <div id="target"></div>
    </article>
</body>
<script>
    pubnub = new PubNub({
        publishKey : 'pub-c-your-key',
        subscribeKey : 'sub-c-your-key'
    })

    pubnub.addListener({
        message: function (msg) {
            console.log(msg.message);
            if (msg.message.color) {
                $("#target").css("background-color", msg.message.color);
            } else {
                $("#target").append(JSON.stringify(msg.message));
                $("#target").append("<br />");
            }
        }
    });
    console.log("Subscribing..");
    pubnub.subscribe({
        channels: ['roadpage']
    });
</script>

</html>

I use it in various lambdas that need to communicate status to whomever is listening at the moment. If no one is listening then fuhgeddaboudit, but if there’s a client waiting to know what’s up – then it is way simpler to send messages to it (1 or more clients) with minimal setup and management.

Of and did I mention the 1 Million Free Messages per month?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s