Category: PubNub

Why a custom PubNub Chrome Extension?

When I started developing Mote.io, all the PubNub publish and subscribe calls got noisy and confusing. To solve this, I created a custom function to manually title and log all PubNub traffic to the Chrome console inside Dev Tools.

You might ask: “doesn’t all traffic show up in the network tab?” It’s true, but we’re really talking about all traffic here, in one giant list. It’s unorderly and difficult to decipher. Plus, we only really care about a small portion of this network traffic; the JSON messages received.

You might be familiar with the ability to debug a single WebSocket in the Network tab. Wouldn’t it be great if the same was true for PubNub?

Because I carry the burden of creating all the most awesome stuff for PubNub, I decided to take matters into my own hands. I built a Chrome extension that does just this. It takes PubNub traffic and displays it in a fashion similar to WebSockets.

You can read more about this extension here. We just released a second version that adds message filtering and traffic graphs.

Google Chrome Devtools Extension APIs

Many developers are familiar with Chrome Extensions, but many are surprised to find that you can also create extensions for Chrome Developer Tools.

A DevTools extension adds functionality to the Chrome DevTools. It can add new UI panels and sidebars, interact with the inspected page, get information about network requests, and more. DevTools extensions have access to an additional set of DevTools-specific extension APIs:

Extending DevTools – Google Chrome

All we’re interested in is monitoring the PubNub traffic and formatting it in a way that makes sense. Lucky for us, Chrome Devtools exposes a network api that lets us catch all incoming traffic. Perfect.

Use the chrome.devtools.network API to retrieve the information about network requests displayed by the Developer Tools in the Network panel.

chrome.devtools.network – Google Chrome

But where do we log the traffic? Devtools extensions allow us to create a new panel just for our extension. Again, just what we needed.

Use the chrome.devtools.panels API to integrate your extension into Developer Tools window UI: create your own panels, access existing panels, and add sidebars.

chrome.devtools.panels – Google Chrome

The third special API for Chrome Devtools is inspectedWindow. The PubNub Console extension does not make use of it, but it’s worth an overview.

Use the chrome.devtools.inspectedWindow API to interact with the inspected window: obtain the tab ID for the inspected page, evaluate the code in the context of the inspected window, reload the page, or obtain the list of resources within the page.

chrome.devtools.inspectedWindow – Google Chrome

I’ve made a few extensions in the past, so I started with the Chrome Preprocessor Example from the samples page.

Sample Extensions – Google Chrome

The goal here is to provide a general overview of how our Devtools extension works, but not necessarily a tutorial on how to make a full extension. However, if you want to follow along at home you’ll notice that almost everything you need to get started is within the Panel directory. I also highly recommend taking a look at the rest of the devtools examples.

Using the chrome.devtools.network API

Let’s take a look at how to monitor network traffic. We start by register a watcher for all page requests and fire a function when a new one is complete:

Great, now whenever a new network request is finished our function is fired. It works just like the Network tab.

But we don’t want every request, just stuff from PubNub. So let’s take a look at exactly what this function is returning to us so we can filter it.

Network requests information is represented in the HTTP Archive format (HAR). The description of HAR is outside of scope of this document, please refer to HAR v1.2 Specification.

So we can access the URI of the request through the *,request.url parameter. I did some googling and found this awesome URI parser gist which will really help us out.

Now it’s just a matter of parsing the URI according to the PubNub Rest Push API. All PubNub push traffic is sent through the request headers, so this is all we need to keep track of PubNub publish.

However, the body of subscribe calls is sent through the request content. You’ll notice from the chrome.devtools.network documentation that we don’t get request content for free.

There’s an additional function we need to call. It is cleverly named getContent() and is a property of the object returned from the first function.

And that’s the core of it! From here the extension does some additional work to check if PubNub messages have been bundled. Everything else is formatting, user interface, and shiny graphs.

You can learn more and download the full Chrome extension here.

Today I’m going to show you how to add Speech to Text functionality to a chat room using Wit. Wit is a natural language processing API, meaning it takes raw audio input and processes it into data developers can use.

This walkthrough is also available via video. Follow along with the instructions below. Additionally, you can check out the full speech to text chat demo here.

First, we need a chat room.

You’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys in the PubNub Developer Portal. Once you have, clone the GitHub repository, and enter your unique PubNub keys on the PubNub initialization, for example:

Let’s start with the Chat in 10 lines of lines of code tutorial. I’ve embedded the full example here. You can play around with the chat room by typing a message in the input field and pressing “Enter” or “Return.”

See the Pen PubNub Chat in 10 lines of Code by Ian Jennings (@ianjennings) on CodePen.

When sending your message, a publish action is made on the PubNub network using the PubNub Javascript SDK. All clients that are subscribed to the same channel will receive that message.

Here we take the value from the input box and publish it to our ‘chat’ channel.

Subscribing to the channel is just as easy. Supply the channel name and a function to call when a message is received.

Here we subscribe to the same ‘chat’ channel and append add the text to the chat output when we receive a message.

Now that we’ve got our chat example, let’s add speech to text voice recognition! We’re going to combine Wit’s Microphone example with our chat example.

Note: Microphone relies on WebRTC, which works on Chrome, Firefox and Opera right now. Safari and IE don’t support WebRTC yet.

Follow the directions on the Wit site to set up your Microphone example or skip ahead to the fun part and play with my hosted demo.

Press the microphone button then say “send a message” and then your message. You should see the following appear below the microphone icon.

The first result is the parsed intent that you programmed Wit to recognize. The second is the message_body, the parsed message for that intent.

Note, when you use your own API key, you’ll need to train Wit to use your own intents like my “send a message” intent.

Now let’s combine the two demos to create a speech to text chat room!

All we need to do is hook up the mic.onresult results to a PubNub publish. Then, whatever message gets returned by Wit will be published to chat!

Check out the full working demo here or browse the source.

There are all sorts of improvements that can be made to this demo. We can support more intents like “who’s here” or show who’s talking by combining more Wit and PubNub features. An expanded demo is coming soon.

Our goal at PubNub to make it as easy as possible to start developing realtime apps. Today we are happy to announce the first release of the PubNub Console for Google Chrome.

The PubNub Console is a Google Chrome extension. Once installed, it adds an additional tab especially for PubNub in Google Chrome’s developer tools. You can learn more about developer tools, including how to open the multi-tabbed window with Chrome DevTools for Google Developers.

Want to see it in action and learn more? Check out the video below:

The extension monitors PubNub traffic on the page you are inspecting. Whenever the page publishes or receives a message it shows up in the console for that channel.

Channel tabs are added to the menu on the left when messages are published or subscribed to on the page. You can click on a channel to filter PubNub traffic for that specific channel.

It includes a few special features that makes it easy to develop with realtime messages from protocols like Websockets when using the PubNub JavaScript SDK:

• All output is JSON formatted and color coded for improved dev & debugging happiness.
• Channel output can be cleared by clicking “Clear Output” so you can reset the screen and start fresh.
• If Storage & Playback is enabled on your PubNub account, you can load the previous two minutes of messages in a channel by clicking “Previous 2 minutes.” You can continue clicking this to go back in time.  The next release will add some additional timespan options for more control of stored messages.
• Data persists through navigation so you can refresh the page to see every message PubNub generates.

Additional Chrome WebSocket Tools

If you need a more detailed view of what’s happening behind the scenes, all raw PubNub traffic is available for inspection through the “Network” tab. There is quite a lot of noise here which is why we were inspired to build the new PubNub Chrome Console for you.

If you would like to publish data to a PubNub stream, make presence calls, or experiment with PAM or SSL the PubNub Developer Console offers a fully featured way to interact with PubNub channels.

Be sure to tweet @sw1tch or @PubNub with feedback and feature requests for the PubNub Console for Google Chrome. Stay tuned because we are already working on the next feature upgrades to the PubNub Console for Chrome Developers!