Build

Streaming Updates to Real-time Progress Bars with JavaScript

2 min read Anmol Agrawal on Aug 17, 2017
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

How to build a dynamically-updating progress bar in JavaScript that updates in real time as status updates are streamed to it.

This tutorial is a quick and easy example of Real-time Updates using PubNub to stream status updates and display the progress in a real-time progress bar.

There are more than a fair share of tutorials out there that show you how to build a progress bar in JavaScript. But what good is a static progress bar?

In this tutorial, we’ll show you how to connect your progress bar to the internet and stream updates to it in real time. This could be inventory from an IoT sensor, capacity in a chatroom, or uploading files – an infinite amount of other use cases.

 

You can find the source code for our real-time JavaScript progress bar here.

script.js

This Node.js script replicates the effect of the file upload. Ideally, we will get the percentage uploaded as bytes uploaded divided by total byte size of the file. Once we have the percentage, we are sending that data to ‘progress-bar’ channel every 5 sec to give an effect of file uploading taking time.

var pubnub = require("pubnub")({
   subscribe_key: 'demo', // always required
   publish_key: 'demo' // only required if publishing
});
var percentages = [0,20,40,60,80,100]
function send_percentage(percentage){
   pubnub.publish({
       channel: "progress-bar",
       message: {"value": percentage},
       callback: function(m){console.log(m)}
   });
}
var interval_id = setInterval(function(){
   send_percentage(percentages.shift());
}, 5000)

index.html

This is a simple HTML template with couple of CDNs (jQuery and PubNub) and placeholder for circular progress bar.

<!DOCTYPE html>
<html >
 <head>
   <meta charset="UTF-8">
   <title>Circular Progress Bar</title>
   <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
<div id="page">
 <div class="progress-bar">
     <canvas id="inactiveProgress" class="progress-inactive" height="275px" width="275px"></canvas>
   <canvas id="activeProgress" class="progress-active"  height="275px" width="275px"></canvas>
   <p>0%</p>
 </div>
</div>
   <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
   <script src="https://cdn.pubnub.com/pubnub-3.7.13.min.js"></script>
   <script src="js/index.js"></script>
 </body>
</html>

index.js

Most of this JavaScript is responsible for animation effect of circular progress bar. But apart from that, we are just subscribing to that particular PubNub channel, and passing the received percentage to drawProgress method.

$(document).ready(function(){
            var pubnub = PUBNUB({
                subscribe_key : 'demo'
            });
            var $pCaption = $('.progress-bar p');
            var iProgress = document.getElementById('inactiveProgress');
            var aProgress = document.getElementById('activeProgress');
            var iProgressCTX = iProgress.getContext('2d');
            
            drawInactive(iProgressCTX);
            pubnub.subscribe({
                channel: "progress-bar",
                message: function(message){
                    var percentage = message.value / 100;
                    console.log(percentage + '%');
                    drawProgress(aProgress, percentage, $pCaption);
                }
            })
            function drawInactive(iProgressCTX){
                iProgressCTX.lineCap = 'square';
                //outer ring
                iProgressCTX.beginPath();
                iProgressCTX.lineWidth = 15;
                iProgressCTX.strokeStyle = '#e1e1e1';
                iProgressCTX.arc(137.5,137.5,129,0,2*Math.PI);
                iProgressCTX.stroke();
                //progress bar
                iProgressCTX.beginPath();
                iProgressCTX.lineWidth = 0;
                iProgressCTX.fillStyle = '#e6e6e6';
                iProgressCTX.arc(137.5,137.5,121,0,2*Math.PI);
                iProgressCTX.fill();
                //progressbar caption
                iProgressCTX.beginPath();
                iProgressCTX.lineWidth = 0;
                iProgressCTX.fillStyle = '#fff';
                iProgressCTX.arc(137.5,137.5,100,0,2*Math.PI);
                iProgressCTX.fill();
            }
            function drawProgress(bar, percentage, $pCaption){
                var barCTX = bar.getContext("2d");
                var quarterTurn = Math.PI / 2;
                var endingAngle = ((2*percentage) * Math.PI) - quarterTurn;
                var startingAngle = 0 - quarterTurn;
                bar.width = bar.width;
                barCTX.lineCap = 'square';
                barCTX.beginPath();
                barCTX.lineWidth = 20;
                barCTX.strokeStyle = '#76e1e5';
                barCTX.arc(137.5,137.5,111,startingAngle, endingAngle);
                barCTX.stroke();
                $pCaption.text( (parseInt(percentage * 100, 10)) + '%');
            }
        });

And that’s it! This is just scratching the surface of real-time updates using PubNub. Check out some of our other use cases, and as always, you can contact us with any questions you have.

More from PubNub

Top Trends to Engage Your App Users
InsightsSep 27, 20224 min read

Top Trends to Engage Your App Users

Take a look at the top trends that are the most effective in attracting customers and reducing churn, and how you can incorporate...

PubNub Staff

PubNub Staff

Comparing Game Engines: Unity vs Unreal vs the Rest
Real-Time Gaming BlogSep 21, 20225 min read

Comparing Game Engines: Unity vs Unreal vs the Rest

Comparing the major game engines: Unity vs Unreal Engine vs Corona SDK vs GameMaker Studio, including the benefits and cons of...

PubNub Staff

PubNub Staff

Python Socket Programming: Client, Server and Peer Libraries
BuildSep 21, 20226 min read

Python Socket Programming: Client, Server and Peer Libraries

Sockets (aka socket programming) enable programs to send and receive data, bi-directionally, at any given moment. This tutorial...

PubNub Staff

PubNub Staff