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?

Share this:

Like this:

Leave a Reply Cancel reply