I’ve been working on a Chrome app that uses WAMP (Web Application Messaging Protocol) for it’s real-time API. One of the requirements is that users need to be notified when certain events occur on the server. After looking through the Chrome API notification examples, I was very surprised at how easy this was to implement with WAMP and thought that it would be worth sharing.

We’re going to build a simple Chrome Extension that listens for WAMP topic event. When it receives the event, it’ll display the notification message on the desktop.

Start by creating a new folder with the following empty files:

• manifest.json
• options.html
• options.js
• background.js

You’ll also need, is a copy of autobahn.js, which can be downloaded from here and put it in your project folder.

In the manifest.json file, we’ll define the extension information along with what files are loaded and permissions:

manifest.json

{
 "name": "WAMP Notification",
 "version": "0.1",
 "description": "Simple WAMP Desktop Notification",
 "permissions": [
 "notifications"
 ],
 "options_page": "options.html",
 "background": {
 "scripts": [
 "autobahn.js",
 "background.js"
 ]
 },
 "manifest_version": 2
}

Now, let’s create some options, so that if we wanted it, we could reconfigure the url, realm and topic.

options.html

    
    


WAMP Notification

Options


    URL
    
    Realm
    
    Topic
    

We’ll want to save the options when they change. Since these options are used to establish a WAMP connection, we’ll also need to restart the connection on each update.

options.js:

window.addEventListener('load', function () {

    options.url.value = localStorage.url;
    options.url.onchange = function () {
        localStorage.url = options.url.value;
        chrome.extension.getBackgroundPage().window.location.reload();
    };

    options.realm.value = localStorage.realm;
    options.realm.onchange = function () {
        localStorage.realm = options.realm.value;
        chrome.extension.getBackgroundPage().window.location.reload();
    };

    options.topic.value = localStorage.topic;
    options.topic.onchange = function () {
        localStorage.topic = options.topic.value;
        chrome.extension.getBackgroundPage().window.location.reload();
    };

});

The last file is the background.js. Once the extension is loaded, this file will run, regardless of what page you’re on. This loads the options (or sets defaults the first time it’s run), opens the WAMP connection and subscribes to the notification topic.

background.js

//Set some defaults
if (!localStorage.url) {
    localStorage.url = 'ws://demo.thruway.ws:9090/';
}

if (!localStorage.realm) {
    localStorage.realm = 'com.example.notification';
}

if (!localStorage.topic) {
    localStorage.topic = 'com.example.notification.desktop';
}


if (window.Notification) {
    var connection = new autobahn.Connection({
        url: localStorage.url,
        realm: localStorage.realm
    });

    connection.onopen = function (session, details) {
        console.log('connected to WAMP router');
        session.subscribe(localStorage.topic, function (args) {
            show(args[0]);
        });
    };

    connection.onclose = function (reason, details) {
        console.log('connection closed', reason, details);
    };

    connection.open();
}

/*
 This function was copied from the toast notification example
 */
function show(message) {
    var time = /(..)(:..)/.exec(new Date());     // The prettyprinted time.
    var hour = time[1] % 12 || 12;               // The prettyprinted hour.
    var period = time[1] < 12 ? 'a.m.' : 'p.m.'; // The period of the day.
    new Notification(hour + time[2] + ' ' + period, {
        //icon: '48.png',
        body: message
    });
}

Download the Source Code

Now the only thing left is to install the extension in Chrome. To do so, you'll need to to go the Extension Settings page (chrome://extensions/), enable Developer Mode, click on "Load unpacked extension..." and select your project folder.

The default router url points to ws://demo.thruway.ws, which is a demo/test router running Thruway.

If you keep the default settings, you can send test messages from this Plunkr.

For more information on setting up your own router, check out Thruway (PHP) or Crossbar (Python).

For more information on why you should be using WAMP read Why WAMP.