Would like to use PubNub to send real-time updates to the user's web browser

Question

Looking in to using PubNub to send real-time updates to the user's web browser.

I looked over their website and materials. It looks like they have a few different options.

We would like to use it for sending real time updates to a web page that a user is looking at. The information is simple stuff like "You just received a message". We are not trying ti implement a chat program or anything like that.

Is PubNub a good solution for this? If so, which version of the service should be be using?

We are running Django on a Heroku server.

Thanks so much!

Answer 1

PubNub Facebook Notification

This is an example of a Facebook-like Window Box that notifies your user with a custom message via PubNub. You can send updates to your users on their Mobile Phone or Browser. This will show your user a notification; any notification you.

Using PubNub allows Data Push via WebSockets, BOSH, Comet and other Mechanisms to be used in your application providing you the ability to send data AT ANY TIME directly to your users via MASS BROADCAST or INDIVIDUAL NOTIFICATIONS.

Start Here: Live Demo

Try it Now: http://pubnub-demo.s3.amazonaws.com/facebook-notification/index.html

Download Source Code: https://github.com/pubnub/javascript/tree/master/examples/facebook-notification

Begin here for easy copy/paste of code. It is very easy to get started and we recommend you start with the example link above before you begin.

Setup Your Page

First include the FBootstrap resources in order to provide the look and feel of the notification window. Add these Styles to your HTML file.

<link href=bootstrap.css rel=stylesheet>
<style type=text/css> body { padding-top: 60px; } </style>

Data Connection Code

Next you need to setup a PubNub Data Connection and then add rules for what to do with the data once it is received.

   <script src="https://pubnub.s3.amazonaws.com/pubnub-3.1.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.6/js/bootstrap-modal.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>(function(){

    // PubNub (For Data Push to User)
    var pubnub = PUBNUB.init({
        subscribe_key : 'demo',
        ssl           : false
    });

    // Setup New Data Push Connectoin via PubNub
    pubnub.subscribe({
        restore  : true,
        channel  : 'example-user-id-1234',
        callback : show_notification
    });

    // Setup Alert Window
    $('#new-alert').modal({ keyboard : true });

    // Show the Notification Window
    function show_notification(message) {
        $('#new-alert').modal('show');
    }

    // Simulate Notification
    $('#simulate-notification').bind( 'mousedown', function() {
        pubnub.publish({
            channel : 'example-user-id-1234',
            message : 'alert'
        });
        return false;
    } );

    })();</script>

Python Push Example

Next you will want to add this python code to your Django or any other framework. You can add this to the message post code in your app. This will post a notification to your user. This specific example will cause a notification to appear inside the Facebook Notification page.

pip install pubnub

Python Source

## PubNub Setup
import pubnub from Pubnub
pubnub = Pubnub( 'demo', 'demo', None, False )

## Push Notice to 'example-user-id-1234'
info = pubnub.publish({
    'channel' : 'example-user-id-1234',
    'message' : { 'your-data' : 'any-data-here' }
})
print(info)

Answer 2

For something a bit less generic, employing signals triggered by even an API served by Django and very strong channel security , check out https://github.com/sivang/django-pubnub (straight from the oven ;)).

Answer 3

I do this kind of thing with pubnub & socket.io ... the client side is then very easy to manage, thanks to multiplexing. My code looks like this :

var pubnub_setup = {
    channel       : 'xxx',
    publish_key   : 'xxx',
    subscribe_key : 'xxx'
};

var price_update = io.connect( 'http://pubsub.pubnub.com/price_update', pubnub_setup );
var table_update = io.connect( 'http://pubsub.pubnub.com/table_update', pubnub_setup );    

price_update.on( 'connect', function() {
          // do stuff here
} );
table_update.on( 'connect', function() {
          // do stuff here
} );
table_update.on( 'message', function(message) {
          // do stuff here
} );

PN with socket.io https://github.com/pubnub/pubnub-api/tree/master/socket.io

mutliplexing with socket.io http://vimeo.com/34496366