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

假如想象 提交于 2019-11-30 10:13:27
Stephen Blum

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)

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 ;)).

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!