PubNub Signals

PubNub Signals is small message payload messaging, no greater than 30 bytes, that offers a low-cost data delivery rate while still leveraging PubNub’s secure and reliable Data Stream Network. Some use cases for Signals include:

1. Typing indicators in a chat app
2. GPS lat/long updates (what we’ll cover in this tutorial)
3. Sensor streaming updates for IoT devices
4. Stats for gaming applications

When to Use Signals Instead of Publish?

If your application needs to send a stream of messages to instruct or inform your application, where the content of each message is not as important as the stream of data, then use Signals. Signals uses the core Pub/Sub features such as channels groups and PubNub Access Manager.

Unlike Publish, there are some limitations to using Signals:

1. Messages sent with Signals are not replicated to all global data centers
2. Messages are not stored in PubNub History for later retrieval; only the most recent message can be fetched
3. PubNub Push notifications can’t be invoked
4. Access to PubNub Functions is disabled by default and can only be enabled by PubNub Support

Geolocation App with PubNub Signals

To get a better understanding of what you can do with PubNub Signals, let’s go over a simple geolocation app in Android. For this app, a marker will initially be placed in San Francisco. The user can move and place the marker anywhere they please, and the coordinates will be sent to a global channel using Signals. The marker will update for everyone connected to the channel.

Note: This app DOES NOT use your location!

Get Your API Keys

Sign up for your free PubNub API keys. You can send up to 1 million free messages a month! Use the form below to get your keys:

Once you have your keys, add them to initiPubNub() in MainActivity.java:

 // Variables
 private GoogleMap mMap;
 private PubNub pubnub;
 private Marker marker;
 private Boolean isMarkerPlaced = false;

// Initialize PubNub and set up a listener
public void initPubNub(){
  PNConfiguration pnConfiguration = new PNConfiguration();
  pnConfiguration.setPublishKey("Your_Pub_Key_Here");
  pnConfiguration.setSubscribeKey("Your_Sub_Key_Here");
  pnConfiguration.setSecure(true);
  pubnub = new PubNub(pnConfiguration);
 ...
}

Besides the Pub/Sub keys, you also need to get a Google Maps API key. Once you have the key, go to the debug directory, under src, and add it to the file google_maps_api.xml.

<resources>
    <string name="google_maps_key" templateMergeStrategy="preserve" translatable="false">YOUR_KEY_HERE</string>
</resources>

Now that we have all the keys set up in the app, let’s go over the app.

Set Up PubNub’s Event Listener

After initializing PubNub, we set up an event listener to listen for messages that arrive on the channel. Inside the listener, we implement the method signal().

// Listen to messages that arrive in the channel
pubnub.addListener(new SubscribeCallback() {
  @Override
  public void status(PubNub pub, PNStatus status) {

  }

  @Override
  public void message(PubNub pub, final PNMessageResult message) {

  }

  @Override
  public void presence(PubNub pub, PNPresenceEventResult presence) {

  }

  @Override
  public void signal(PubNub pubnub, final PNMessageResult signal) {
    System.out.println("Message: " + signal.getMessage());

    runOnUiThread(new Runnable() {
      @Override
      public void run() {
        try {
          JsonArray payload = signal.getMessage().getAsJsonArray();
          placeMarker(payload);
        } catch (Exception e) {
          e.printStackTrace();
        }
      }
    });
  }
});

Since we are no longer publishing the GPS coordinates with PubNub Publish, the method message() is empty. Inside of the signal() method, the message payload is received, converted into a JsonArray, and placeMarker() is called to update the current marker with the new coordinates in the map. We’ll come back to this method shortly.

Below addListener(), subscribe to the global channel geolocation_channel .

// Subscribe to the global channel
pubnub.subscribe()
      .channels(Arrays.asList("geolocation_channel"))
      .execute();

Next, let’s set up the marker on the map and add a drag and drop event listener for the marker.

Set Up Google Maps Event Listener

As mentioned earlier, the marker is initially placed in San Francisco. To add the marker in the map, placeMarker() is called with the marker coordinates as the argument. Before we get to this method, let’s complete the method onMapReady() which is triggered when Google Maps is ready to use.

public void onMapReady(GoogleMap googleMap) {
  mMap = googleMap;

  // Initial payload coordinates in S.F.︎
  JsonArray payload = new JsonArray();
  payload.add(37.782486);
  payload.add(-122.395344);
  placeMarker(payload);
}

We need to add an event listener that is triggered when the marker is dragged anywhere in the map. Add the following code to onMapReady():

// Initial payload coordinates in S.F.︎
...

// Listener for when marker is dragged to another location
mMap.setOnMarkerDragListener(new GoogleMap.OnMarkerDragListener() {
  @Override
  public void onMarkerDrag(Marker arg0) {
    Log.d("Marker", "Dragging");
  }

  @Override
  public void onMarkerDragEnd(Marker arg0) {
    Log.d("Marker", "Finished");
  }

  @Override
  public void onMarkerDragStart(Marker arg0) {
    Log.d("Marker", "Started");
  }
});

Once the user has placed the marker in a new location, the Lat/Long coordinates are sent to the global channel to update the marker placement for everyone connected. To do so, we get the new position of the marker, add it to a JsonArray, and send the payload to the channel. Since we can only send 30 bytes, we format the coordinate values up to 6 digits after the decimal point, which is the same format that Google Maps uses. We do all of this logic inside of onMarkerDragEnd():

@Override
public void onMarkerDragEnd(Marker arg0) {
  Log.d("Marker", "Finished");

  // Get coordinate values up to 6 decimal numbers
  DecimalFormat decimalFormat = new DecimalFormat("0.######");
  JsonArray payload = new JsonArray();
  payload.add(decimalFormat.format(marker.getPosition().latitude)); // Get lat coord.
  payload.add(decimalFormat.format(marker.getPosition().longitude)); // Get long coord.

  // Message Payload size for PubNub Signals is limited to 30 bytes
  pubnub.signal()
        .channel("geolocation_channel")
        .message(payload)
        .async(new PNCallback<PNPublishResult>() {
          @Override
          public void onResponse(PNPublishResult result, PNStatus status) {
            // Error
            if(status.isError()) {
              System.out.println("Error- pub status code: " + status.getStatusCode());
            }
          }
        });
}

If the payload is successfully sent and received on the channel, the marker is placed on the map.

Place the Marker on the Map

In the app, we call placeMarker() twice to add the marker in the initial location and to update the marker in a new location. In order for the method to know which of the two things to do, we use the boolean variable isMarkerPlaced. This variable is initialized to false. It is set to true once the maker has been placed.

// Place marker on the map in the specified location
public void placeMarker(JsonArray loc){
  //LatLng only accepts arguments of type Double
  Double lat = loc.get(0).getAsDouble();
  Double lng = loc.get(1).getAsDouble();
  LatLng newLoc = new LatLng(lat,lng);

  if(isMarkerPlaced){
    // Change position of the marker
    marker.setPosition(newLoc);
    marker.setTitle(newLoc.toString());
  }
  else{
    // Add a marker to the map in the specified location
    marker = mMap.addMarker(new MarkerOptions().position(newLoc).title(newLoc.toString()).draggable(true));
    isMarkerPlaced = true;
  }

  // Move the camera to the location of the marker
  mMap.moveCamera(CameraUpdateFactory.newLatLng(newLoc));
}

Run the Geolocation App

In Android Studio, run the app in two emulators to see the markers change location in realtime!

Now that you know how to send GPS coordinates using PubNub Signals, check out other ways to use Signals, such as implementing Typing Indicators in a Chat App.

Have suggestions or questions about the content of this post? Reach out at devrel@pubnub.com.

The post Delivering Live Updating Streams of GPS Coordinates with PubNub Signals appeared first on PubNub.

In this blog post, we take a dig into this very aspect of how to make apps more accessible. Since chat-based applications continue to grow in adoption, why not bring in the accessibility angle to it? Here at PubNub, we make chat easy for developers to build. Let’s see how we can quickly enable text-to-speech capabilities for chat apps built with PubNub, to assist a blind user.

Technology That Assists Blind Users

Due to visual impairment, a blind user is severely constrained in reading the incoming chat messages. To assist this user, the most obvious solution is to use a text-to-speech engine that synthesizes speech from the incoming chat messages.

The technology behind text-to-speech is already available. But instead of locally processing the text, it’s better to leverage the cloud so that the system can continuously learn and improve its speech rendering capabilities. Amazon Polly is one such service offered under the AWS Machine Learning umbrella.

One of Amazon Polly’s most valuable capabilities is the ability to stream natural speech, which is a big plus for a realtime application like chat. We are going to leverage this feature to build a speech-enabled chat client on top of PubNub.

PubNub and Text-To-Speech Chat Apps

If you are familiar with PubNub, you probably know how easy it is to launch your own chat app. In order to connect to the globally distributed, auto-scaling PubNub Data-Stream-Network, create free Pub/Sub keys with the form below. API keys work instantly, and they allow up to 1 million messages per month for free.

Be sure to enable Functions, Presence, and History for the key set in the PubNub Admin Dashboard before continuing!

Speech-enabled Chat App

To enable speech prompts for incoming chat messages, we can think of an icon that activates this feature. Something like this.

Notice the icon at the top right area of the chat UI. With this icon, we can enable or disable this feature with a simple click.

Note: The clicking of an icon is also a constraint for a blind user. As an enhancement, the UX designers can think of a keyboard shortcut or some other means of making it more accessible.

Tutorial Assets and Technology Overview

The source code of this speech-enabled chat app is available on GitHub. Most of the code is from a demo chat app with jQuery and PubNub. With a few modifications, you can easily build the speech synthesis feature on top of the default chat app.

You can clone the repository and follow along to get a sense of the code changes that are required.

Let’s look at the building blocks of this app by exploring the various technology components that work behind the scenes to deliver a functional chat experience. The README file accompanying the repository contains the steps for setting up all the components.

PubNub Functions

PubNub’s serverless infrastructure called Functions can be used to spawn off the backend for this chat app. And since it is serverless, it can be brought to life within a few seconds.

We can quickly deploy an infinitely scalable, globally distributed REST API in a few minutes using PubNub Functions. Let’s clone the AWS Polly microservice using PubNub Functions. Go to the PubNub AWS Polly Block page and import the Function to your account. Click the Try It Now button, then follow the instructions.

If you have not already, you need to make an AWS account and create API keys to access the AWS Polly API. Follow these steps to set up your AWS account for accessing Amazon Polly service

Step 1 : Setup an IAM user to access Amazon Polly service
Follow these steps to create an IAM user for Amazon Polly. Make sure that the IAM user has full permissions for accessing Amazon Polly service.

Step 2 : Download the IAM user credentials
Download the credentials file for the IAM user and save it. This file contains the AWS ACCESS KEY and AWS ACCESS SECRET KEY. Make a note of these two parameters.

Now go to your PubNub Functions editor where you serverless JS event handler lives. Click on the MY SECRETS button on the left. Insert your AWS API keys here so the PubNub Functions server can use AWS Polly. The keys to insert in the PubNub Functions Vault are AWS_access_key and AWS_secret_key respectively.

PubNub Chat App Frontend

Let’s go over the front end code for making a browser chat app with PubNub. The UI here is made with HTML, CSS, JS, and jQuery. All of the code can be cloned from this GitHub Repository with the Text-To-Speech AWS Polly and PubNub chat app.

Chat UI

Let’s make a button that enables the speech to be read aloud. It is a toggled button.

<div class="chat-header clearfix">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_01_green.jpg" alt="avatar" />
                <div class="chat-about">
                    <div class="chat-with">PubNub with AWS Polly Demo Chat</div>
                </div>
                 <div id="speechButton" class="speech-button"><img src="./speech-icon.png"></div>
            </div>

And here is the CSS class to style this icon.

.speech-button {

  float: right;
  margin-top: 6px;
  background-color: #d4e2dd;
  
}

Speech Activation for Chat App

HTML5 <audio> and <video> tags are the standard ways of embedding media controls on web apps. Since the app must be capable of playing the speech equivalent of chat messages, we have used the audio tag.

<audio id="player">
                
</audio>

Now, let’s move to the JavaScript part of the chat app. We first need to check for the browser compatibility for supported audio media formats.

The default initialization is now subjected to another pre-condition that initializes the audio support for the browser. And finally, after the PubNub initialization, we can hook in the click event for the icon to activate/deactivate the speech feature.

var AUDIO_FORMATS = {
    'ogg_vorbis': 'audio/ogg',
    'mp3': 'audio/mpeg',
    'pcm': 'audio/wave; codecs=1'
};

var supportedFormats;
var player;
var speechEnabled = false;

// this is our main function that starts our chat app
const init = () => {
    //First things first, check for the the browser's audio capabilities
    player = document.getElementById('player');
    supportedFormats = getSupportedAudioFormats(player);

    if (supportedFormats.length === 0) {
        submit.disabled = true;
        alert('The web browser in use does not support any of the' +
            ' available audio formats. Please try with a different' +
            ' one.');
    } else {

        pubnub.addListener({
            message: function(message) {
                renderMessage(message);
            },
            presence: function(presenceEvent) {
                let type = presenceEvent.action;

                if (type === 'join') {
                    let person = generatePerson(true);
                    person.uuid = presenceEvent.uuid;
                    $('#people-list ul').append(peopleTemplate(person));
                } else if (type === 'leave' || type === 'timeout') {
                    $('#people-list ul').find('#' + presenceEvent.uuid).remove();
                }
            }
        });

        pubnub.subscribe({
            channels: [chatChannel],
            withPresence: true
        });

        //get old messages from history
        pubnub.history({
                channel: chatChannel,
                count: 3,
                stringifiedTimeToken: true
            },
            function(status, response) {
                if (response.messages && response.messages.length > 0) {
                    response.messages.forEach((historicalMessage) => {
                        renderMessage(historicalMessage, true);
                    })
                }
            }
        );

        $("#speechButton").click(function() {

            if (speechEnabled) {
                speechEnabled = false;
                $("#speechButton").css("background-color", "#d4e2dd");

            } else {
                speechEnabled = true;
                $("#speechButton").css("background-color", "#4ceab1");
            }

        })

        $('#sendMessage').on('submit', sendMessage)
    }
};

Speech Synthesis for Chat App

The HTML5 audio tag has the ability to stream audio from a URL that returns a chunked HTTP response containing media content types.

Before rendering every chat message, the app will check for the speechEnabled flag. If it is enabled then it will make a request to the streaming server and play the speech received in response. Here is how the default renderMessage( ) function of the chat app looks like after speech enablement.

// render messages in the list
const renderMessage = (message) => {

    // use the generic user template by default
    let template = userTemplate;

    // if I happened to send the message, use the special template for myself
    if (message.publisher === pubnub.getUUID()) {
        template = meTemplate;
    }

    let isHistory = false
    if (message && !message.message) {
        console.log(message)
        message = { message: message.entry, timetoken: message.timetoken }
        isHistory = true;
    }

    var messageJsTime = new Date(parseInt(message.timetoken.substring(0, 13)));

    let el = template({
        messageOutput: message.message.text,
        tt: messageJsTime.getTime(),
        time: parseTime(messageJsTime),
        user: message.publisher
    });

    console.log(message);

    if (speechEnabled && message.publisher != pubnub.getUUID()) {

        getPollyAudioForText(message.message.text).then((audio) => {
            player.src = audio
            player.play();
        })
    }

    chatHistoryUl.append(el);

    // chatHistoryUl.append(template(context));

    // Sort messages in chat log based on their timetoken (tt)
    chatHistoryUl
        .children()
        .sortDomElements(function(a, b) {
            akey = a.dataset.order;
            bkey = b.dataset.order;
            if (akey == bkey) return 0;
            if (akey < bkey) return -1; if (akey > bkey) return 1;
        })

    // scroll to the bottom of the chat
    scrollToBottom();

};

Streaming Server for Test to Speech Conversion

As mentioned earlier, we’re using Amazon Polly to enable text-to-speech conversion. The API is accessed via PubNub Functions. You need to copy the Function Endpoint URL using the functions editor. Click the copy URL button on the left side. This will be on the same screen that you used to insert your AWS API keys.

Paste the URL on the first line of chat.js

const pollyAudioPubNubFunction = 'YOUR_PUBNUB_FUNCTIONS_ENDPOINT_URL_HERE';

Also insert your PubNub API keys, so the Chat Messaging functionality will work (also in the chat.js file).

let pubnub = new PubNub({
    publishKey: 'YOUR_FREE_PUBNUB_PUBLISH_KEY_HERE',
    subscribeKey: 'YOUR_FREE_PUBNUB_SUBSCRIBE_KEY_HERE',
    uuid: newPerson.uuid
});

Every time the chat app sends a request to the PubNub Function, the client code is executed and a synthesized speech is generated on the fly and streamed back to the app. As awesome as it may seem, this is all we need, to enable speech synthesis capabilities to this chat app.

Speech-enablement Beyond Accessibility

Even beyond accessibility, this feature can also help in many use cases, that require voice prompts for background apps and specific events.

Other use cases for the Amazon Polly Block that invokes Amazon Polly service could be used to generate speech samples for specific text. This would be ideal for applications that require the generation of voice commands from a pre-defined list of text messages.

The post Build a Text-to-Speech Chat App with Amazon Polly and PubNub appeared first on PubNub.

She is the Pirate Duck Admiral. She wants to chat with the other pirate ducks on rafts distributed around the world – in realtime. And she wants it now.

The head Pirate Duck software engineer knows they could build a chat server with Websockets or Socket.IO, but will it scale to the massive numbers of ducks based in all corners of the globe? How many engineers will they have to dedicate to building and maintaining the backend? Pirate Ducks do not invest in large IT teams so it seems better to use PubNub, with its globally distributed endpoints and solid uptime.

Requirements

• Each session will be psuedo-anonymous, pirate ducks do not want to be identified.
• Pirate ducks should, by default, only have 3 or 4 message buttons. Typing with palmate feet and bills is difficult.
  • Allow a separate text input area for those ducks that need it and are patient with their typing.
• Only the most recent message should display. Pirate ducks have good memories.

Prerequisites

The only prerequisite knowledge for this workshop is a general familiarity with JavaScript, HTML and CSS. For tools, you will need a code editor, Git to clone the starter repository, and a reasonably modern web browser.

Get the Base Code

For this workshop, the HTML, CSS and non-PubNub specific JavaScript code are already in the repository. Clone the code from the GitHub repo and checkout the workshop-basic-chat branch.

git clone git@github.com:mdfw/PubNubDucks.git
cd PubNubDucks/
git checkout workshop-basic-chat

If you’ve checked out the workshop-basic-chat branch, open index.html in your browser, you will see something resembling this:

“Your handle” should be different, but the general outline should be the same.

A Quick Look at the HTML

Opening the index.html file, you will find a few things:

• The duck image is an inline SVG. That will become important in a future workshop chapter.
• The ‘chat’ text buttons do not show by default. Once we wire up PubNub, they show up when a connection succeeds.
• These .js files import:
  • The PubNub JavaScript SDK
  • jQuery
  • randomduckdata.js – a helper file that adds some randomness for sent messages, duck names and colors.
  • pubnub-keys.js – holds the keys used in the application (see below)
  • index.js – the main code.

Signing up for PubNub and Setting API Keys

To make our chat interactive, we will need PubNub API keys. PubNub is free for up to 1 million messages a month and does not require a credit card at sign up.

Once you are signed up, get the subscribe and publish keys. Click the project created for you (probably called “Demo Project”) and then click the keyset (probably called “Demo Keyset”). Then you can copy the Publish and Subscribe keys.

We won’t be using the Secret Key in this workshop. Use the Secret Key when adding authentication using the PubNub Access Manager on a secure server you control. Never use the Secret Key on a client.

Open js/pubnub-keys.js and make the following replacements:

• The PUBNUB_PUBLISH_K key “DEMO-PUBLISH-KEY” with your publish key
• The PUBNUB_SUBSCRIBE_K key “DEMO-SUBSCRIBE-KEY” with your subscribe key.

Save and close. We will come back to the other keys in this file later.

Create a PubNub Object

Open js/index.js.

The code that updates the UI and reacts to clicks is included, but most of the PubNub specific code is not there. That’s what we’ll do below.

The first four lines of the document.ready function:

• setMessagesOnButtons() – There is a large set of messages that are “authorized” by Pirate Duck IT. However, we only have two buttons to use (the third button always says “Woof!” – a mystery solved in a later workshop chapter). This function picks two messages and assigns them to the buttons.
• randomName() and updateDuckMetaName() – Since the pirate ducks want to be anonymous, we create semi-anonymous names for them on every load.
• updateDuckStatus updates the status area that we are loading.

Let’s add our first PubNub functionality, the object that manages the connection to the PubNub service.

Replace:

/**
 * Connect to PubNub
*/

with:

    /**
     * Sets up an object to manage the connection to the PubNub service. 
     * Get publish and subscribe keys by signing up for the PubNub service (http://pubnub.com)
     * ssl - defaults to true, but we'll be specific here.
     * uuid - This is the identifier used by presence and publish systems to identify this unit.
     *        For this demo, we will use our randomly generated duck name. However, PubNub best 
     *        practice is to use a UUID and separately manage user names through other means. 
     */
    pubnub = new PubNub({
        subscribeKey: PUBNUB_SUBSCRIBE_K,
        publishKey: PUBNUB_PUBLISH_K,
        ssl: true,
        uuid: generatedDuckName,
    })

I’ll restate this point: the way we use UUID here is not best practice. It works for the needs of this demo, but it should be unique for each client. Names should be managed separately. If you need ideas, see the chat resource center.

The PUBNUB_SUBSCRIBE_K and PUBNUB_PUBLISH_K should be the same variable names as those we filled in at the “Signing up for PubNub and setting keys” step above.

If you reload the browser, nothing will have changed. We need to add a listener.

Add a Listener

When a duck in our pirate duck network sends a message to a channel we have subscribed to, PubNub will push that to us. We need to handle that message and any network status events. We will add a listener object to manage that for us.

Replace:

    /**
      * Add PubNub Listener
      */

with:

   /**
     * After setting up a connection, add a listener for any messages that PubNub sends.
     * There are 2 types of messages we will react to:
     *   * status: Network up/down, connection changes, etc. Listen for these to update UI.
     *   * message: Messages sent from PubNub, normally in response to a
     *        Publish event somewhere on the network.
     */
    pubnub.addListener({
        status: function(statusEvent) {
            processStatusEvent(statusEvent);
        },
        message: function(messageEvent) {
            processReceivedMessage(messageEvent);
        }
    })

This code allows us to listen for status-type messages and message-type messages. There is another message type, presence that we will handle in a later chapter.

Next we need to add the actual functions that will handle the status and message events.

Handle Status Events

Our listener calls processStatusEvent(), so we should add that.

Replace:

/**
 * Process status events
 */

with:

 /**
 * Process status events.
 * This function does not handle the exhaustive list of status events. See documentation for others.
 *   This shows how an application may handle these events.
 *   If connection is offline, hide sending options, when it comes back, show the sending options (showChangeInterface())
 * @param {*} statusEvent 
 */
function processStatusEvent(statusEvent) {
    logReceivedMessage(statusEvent, "a status event");
    if (statusEvent.category === "PNDisconnectedCategory" || statusEvent.category === "PNTimeoutCategory" || statusEvent.category === "PNNetworkIssuesCategory" || statusEvent.category === "PNNetworkDownCategory") {
        hideChangeInterface();
        updateDuckStatus("Internet connection is not available. The duck is sad.");
    }
    if (statusEvent.category === "PNConnectedCategory" || statusEvent.category === "PNNetworkUpCategory") {
        showChangeInterface();
    }
}

As the documentation mentions, we do not handle all statusEvent types, but many of the common ones. The core logic is:

• If we disconnect from PubNub, hide the buttons.
• If we connect, show the buttons.

Handle Received Messages

Our listener also calls processReceivedMessage(), but before we add that function, let’s talk about what we need to process. A received message from PubNub is wrapped into an envelope JSON object. That envelope will look like:

{
  "channel": "ducks.talk",
  "timetoken": "15654132552683958",
  "publisher": "Dred Duck Jada",
  "message": {
    "text": "Messier 11 and strait on 'til morning.",
    "duckName": "Dred Duck Jada",
  },
  ...other fields...
}

Taking this line by line:

• "channel": "ducks.talk": This tells us that the message was received on the ducks.talk channel. Channels are developer created text strings that define where a message is published to and where a system can subscribe to. You can create as many channels as you need.
• "timetoken": "15654132552683958": Token added to every message envelope that passes through the system.
• "publisher": "Dred Duck Jada": Typically the UUID of the publisher of the message. Note: this may not be present.
• "text": "Messier 11 and strait on 'til morning.": The “message” object is the object that gets published by a publisher and wrapped by PubNub. The keys within the object are developer defined, not enforced by PubNub. In this case, the object includes the “text” field which matches to CHANNEL_KEY_TEXT from js/pubnub-keys.js.
• "duckName": "Dred Duck Jada": The name of the duck that published this item. As you will see in a minute, we add that to the published message. This is not best practice. How to attach names to content requires thought and is out of scope of this workshop. Since our content is attached to psuedo-anonymous duck names that won’t change, we can attach the name to the message object. Maps to the CHANNEL_KEY_DUCKNAME in js/pubnub-keys.js.

Processing a Message

Now that we know what a message might contain, we can write code to process it.

Replace:

/**
 * Process a received message.
 */

with:

/**
 * Process received messages. First, log the message, then send to proper UI handlers.
 * @param {*} envelope 
 */
function processReceivedMessage(envelope) {
    logReceivedMessage(envelope, "a message");
    updateDuckTalk(envelope.message[CHANNEL_KEY_TEXT], envelope.message[CHANNEL_KEY_DUCKNAME], envelope.timetoken);
}

This parses the envelope.message object for the CHANNEL_KEY_TEXT and CHANNEL_KEY_DUCKNAME parameters, along with the timetoken, and passes them all to updateDuckTalk. updateDuckTalk will update the interface.

Subscribing

Now that we have listeners with associated code to process received messages, we need to tell the PubNub service that we want to receive those messages. That’s called subscribing. A client can subscribe to multiple channels at one time. For now, we are just going to subscribe to the same channel that we will publishing messages to – the channel identified by the CHANNEL_NAME_TALK variable in the js/pubnub-keys.js file.

Replace:

    /**
     * Suscribe to channels
     */

with:

    /**
     * Subscribe to channels. Best practice is to bundle subscribe events when possible
     *   as it reduces network connections.
     */
    pubnub.subscribe({
        channels: [CHANNEL_NAME_TALK],
    });

This tells PubNub we want to receive any messages posted to the channel identified by CHANNEL_NAME_TALK. When that happens, the service sends it to the SDK which routes to our installed listener.

If you reload now, you should connect to the PubNub service and the send message buttons should show. If you click on the Show PubNub message log link at the bottom you can see the messages received from PubNub.

At this point, if someone published a message using your publish and subscribe keys and on the channel defined by CHANNEL_NAME_TALK, it would replace “Hello from PubNub!”.

But, if you click on one of the buttons or tried to send a custom message, nothing will happen. We need to set up sending.

Sending a Message Over the PubNub Network

Receiving messages from others is interesting and Ducks want to participate. The buttons and custom field to send messages are there now because we’ve made a subscribe connection. They just do not do anything because we do not have a sending function.

In index.js there are two functions that send chat messages, handleCustomTextMessageSend() and handleButtonClick(). These gather the chat message and send it to a function called sendMessageToPubNub(). Let’s add that.

Replace:

/**
 * Send a message to PubNub
 */

with:

/**
 * Send a message to PubNub. Takes the channel, contentKey and content.
 * @param {*} channelName 
 * @param {*} contentKey 
 * @param {*} content 
 */
function sendMessageToPubNub (channelName, contentKey, content ) {
    let msgToSend = {
        channel: channelName,
        message: {
            [contentKey]: content,
            [CHANNEL_KEY_DUCKNAME]: generatedDuckName, 
        }
    };
    pubnub.publish(msgToSend, function (status, response) {
        if (status.error) {
            updateDuckStatus("There was an error sending your message.");
            setTimeout(function(){ updateDuckStatus(""); }, 5000);
        } else {
            logSentMessage(msgToSend, "a message to the '" + channelName + "' channel");
        }
    });
}

To send, we need a channelName, a contentKey and the content to send.

With those values, we build a message object with the channel and message content. We call in the generatedDuckName from earlier to send along with the message.

Next, we call pubnub.publish with the message object. If the publish fails, we show a basic error message for a few seconds. If it succeeds, it adds to the message log. The message logs allows you to see what messages were sent and received. Nice for a demo, probably won’t be necessary for production.

Demo

At this point, Pirate Duck IT should have an app that meets the requirements set out by the Admiral and scales to the millions of rafts around the world. With this much communication, we can all welcome our new Pirate Duck overlords.

The post Using PubNub to Build Realtime Chat for Pirate Ducks appeared first on PubNub.

From simple rule-based auto responders, to sentient, intelligent chatbots at massive scale, PubNub provides a realtime platform for deploying flexible chatbots to suit your exact use case. Customer service and support, new user registration, eCommerce, and even Main Street businesses are utilizing chatbots to more effectively and efficiently engage and assist customers and prospects.

With PubNub Functions, and our Blocks Catalog which includes a number of best-in-class cognitive services (AWS, Microsoft Azure, and IBM Watson among them), you can quickly integrate and deploy chatbot capabilities into your chat application.

A Chatbot Example: NumberAI

NumberAI is a realtime conversation platform for Main Street that brings AI-powered communication to the phone line, text-enabling businesses of all sizes in an easy and intuitive way. The product rescues missed callers–lost business–and uses Natural Language Processing (NLP) to automatically reply to common questions that a business receives, and completes common tasks (taking food orders, for example) that generate new revenue. When the AI cannot handle a customer, an employee is notified to ensure a rapid response.

NumberAI’s product, Numa, allows businesses to communicate more quickly and conveniently with their customers. In order to deliver on the experience, several features (including message delivery!) must happen in realtime. NumberAI considered a variety of ways to deliver an enhanced realtime communication experience, from SMS to push notifications and beyond, but ultimately concluded that PubNub was the most effective and efficient. PubNub is used to power all realtime messaging and interactivity in the app between customers and the chatbot.

Read more about NumberAI’s innovative chatbot implementation here.

Chatbot Resources

• PubNub and Chatbots
• Developer Tutorial: PubNub Chatbot Basics
• Developer Tutorial: Create a Chatbot in 10 Minutes with PubNub Functions and Facebook Messenger
• Developer Tutorial: Build an 80s Chatbot with an NPM Package
• eBook: A World Transformed – Building Smarter, Next Generation Apps with Cognitive Services

The post We Won the Hacker Noon Noonie Award for Most Valuable Chatbot Platform! appeared first on PubNub.

Let’s say you need to send a constant stream of small sized, non-critical messages. Something like a frequent temperature sensor update from an IoT device, or a GPS coordinate stream in a ride-share app, or a typing indicator signal in a chat app. This is the perfect opportunity to utilize PubNub Signals instead of PubNub Publishes.

What is PubNub’s PubSub Messaging?

Pub/Sub allows developers to send messages, with a payload of up to 32KB, to any active subscribers. Publishers can be any device that knows TCP. Published messages are replicated to all PubNub global data centers. Published messages can be stored in PubNub History, or invoke a PubNub Function, or Push notification.

What is a PubNub Signal?

A Signal is the same as a PubNub Publish except it is small, with a payload of up to 30 bytes. Signals are replicated to all global data centers like Publishes. However they are not stored in History for a later fetch; only the most recent Signal message can be fetched later.

They can’t invoke external Push notifications, although they may be eligible to use PubNub Functions (speak to Support or your Account rep to set this up). Signal pricing is, as a result, far lower, making signals ideal for high-volume streams of data.

Why Use Signal Instead of Publish?

PubNub Signals include the same reliability and latency as PubNub Publishes, but they are intended for data stream messaging, where the stream of data is more important than the exact content of each individual message. Examples would include chat app typing indicators, live GPS location update stream, and live sensor update streams from IoT devices.

Chat App Typing Indicator Demo

Open the HTML page of the simple chat demo. The chat includes Typing Indicators powered by PubNub Signals. This will make invoking typing indicators inexpensive even when your chat app is being used at scale.

Using PubNub Publishes for Typing indicators may not be the best choice at scale: the extra overhead for things like global replication and history storage are not necessary for  simply displaying a typing indicator.

Be sure to get your own free PubNub API keys to put in this file. Get your API keys now in the admin dashboard.

The HTML File will not run unless you replace the YOUR_PUBNUB_PUBLISH_KEY / YOUR_PUBNUB_SUBSCRIBE_KEY with your free API key.

<!-- Chat in 10 lines of JavaScript code using PubNub JavaScript V4 SDK -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Example of a JavaScript chat app using PubNub JavaScript V4 SDK.">
    <meta name="keywords" content="JavaScript,PubNub,Chat,chat-room,chatting,SDK,PubSub-sdk,tutorial">
    <title>JavaScript Chat | PubNub</title>
</head>

<body>
    <h1>Chat Example with Typing Indicators</h1>
    <h2>Typing Indicators using PubNub Signals</h2>
    <p>
        <a href="https://www.pubnub.com/?devrel_pbpn=javascript-chat">
            <img src="https://d2c805weuec6z7.cloudfront.net/Powered_By_PubNub.png" alt="Powered By PubNub" width="150">
        </a>
        <p>
            <p>Enter chat and press enter.</p>
            <input id="input" placeholder="Your Message Here" />
            <p id="typing-indicator" style="visibility:hidden;">Is Typing:<span id="typing-user-id"></span></p>
            <p>Chat Output:</p>
            <div id="box"></div>
        </p>
    </p>
</body>
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.24.5.min.js"></script>
<script>
(function() {
    const pubnub = new PubNub({ publishKey: 'YOUR_PUBNUB_PUBLISH_KEY', subscribeKey: 'YOUR_PUBNUB_SUBSCRIBE_KEY' }); // Your PubNub keys here. Get them from https://dashboard.pubnub.com.

    let box = document.getElementById("box"),
        input = document.getElementById("input"),
        typingIndicator = document.getElementById("typing-indicator"),
        typingUserId = document.getElementById("typing-user-id");
        chatMessageChannel = 'chat-signals-example',
        timeoutCache = 0,
        isTyping = false,
        isTypingChannel = 'is-typing';

    let hideTypingIndicator = () => {
        isTyping = false;
        typingIndicator.style = "visibility:hidden;";
    };

    pubnub.subscribe({ channels: [chatMessageChannel, isTypingChannel] }); // Subscribe to a channel.

    pubnub.addListener({
        message: function(m) {
            clearTimeout(timeoutCache);
            hideTypingIndicator(); // When a message has been sent, hide the typing indicator
            box.innerHTML = ('' + m.message).replace(/[<>]/g, '') + '<br>' + box.innerHTML; // Add message to page.
        },
        signal: function(s) {
            clearTimeout(timeoutCache);
            typingIndicator.style = "";
            typingUserId.innerText = s.publisher; // the UUID of the user who is typing
            timeoutCache = setTimeout(hideTypingIndicator, 10000) // 10 seconds

            if (s.message === '0') {
                hideTypingIndicator();
            }
        }
    });

    input.addEventListener('keyup', function(e) {
        // Publish new PubNub message when return key is pressed.
        if ((e.keyCode || e.charCode) === 13 && input.value.length > 0) {
            pubnub.publish({
                channel: chatMessageChannel,
                message: input.value
            });

            input.value = '';
        }

        const inputHasText = input.value.length > 0;

        // Publish new PubNub signal: Typing Indicator ON (1) or OFF (2)
        if ((inputHasText && !isTyping) || (!inputHasText && isTyping)) {
            isTyping = !isTyping;
            pubnub.signal({
                channel: isTypingChannel,
                message: inputHasText ? '1' : '0'
            });
        }
    });
})();
</script>

</html>

Here is what the demo looks like in 2 browser windows, one is incognito mode so there is a second user ID shown in in the typing indicator UI.

Live demo of Typing Indicators with PubNub Signals.

The post Typing Indicators in Chat Powered by PubNub Signals appeared first on PubNub.

Android WebSocket Client

For the Android client, we are going to make a simple demo app that contains four image buttons of cute animals. To get started, initialize a new project on Android Studio, with a Basic Activity, called JavaWebSocketClient. We are going to use a lightweight WebSocket client library for the app, which can be found in this repo. In order to use this library, we have to add it to the build.gradle file in the app directory. Add the following to the dependencies and sync the project:

dependencies { 
    // Add this
    implementation 'tech.gusavila92:java-android-websocket-client:1.2.2'    
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    ...
}

Make sure to include the internet access permission in the manifest file:

<uses-permission android:name="android.permission.INTERNET" />

Connect the Client to the Server

Go to MainActivity.java, import the following packages and set up onCreate():

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.TextView;
import java.net.URI;
import java.net.URISyntaxException;
import tech.gusavila92.websocketclient.WebSocketClient;

public class MainActivity extends AppCompatActivity {
  private WebSocketClient webSocketClient;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.animal_sounds);
    createWebSocketClient();
  }
}

Next, create a new method createWebSocketClient():

  private void createWebSocketClient() {
    URI uri;
    try {
      // Connect to local host
      uri = new URI("ws://10.0.2.2:8080/websocket");
    }
    catch (URISyntaxException e) {
      e.printStackTrace();
      return;
    }

    webSocketClient = new WebSocketClient(uri) {
      @Override
      public void onOpen() {
        Log.i("WebSocket", "Session is starting");
        webSocketClient.send("Hello World!");
      }

      @Override
      public void onTextReceived(String s) {
        Log.i("WebSocket", "Message received");
        final String message = s;
        runOnUiThread(new Runnable() {
          @Override
          public void run() {
            try{
              TextView textView = findViewById(R.id.animalSound);
              textView.setText(message);
            } catch (Exception e){
                e.printStackTrace();
            }
          }
        });
      }

      @Override
      public void onBinaryReceived(byte[] data) {
      }

      @Override
      public void onPingReceived(byte[] data) {
      }

      @Override
      public void onPongReceived(byte[] data) {
      }

      @Override
      public void onException(Exception e) {
        System.out.println(e.getMessage());
      }

      @Override
      public void onCloseReceived() {
        Log.i("WebSocket", "Closed ");
        System.out.println("onCloseReceived");
      }
    };

    webSocketClient.setConnectTimeout(10000);
    webSocketClient.setReadTimeout(60000);
    webSocketClient.enableAutomaticReconnection(5000);
    webSocketClient.connect();
  }

This may look like a lot, but really, we are doing four key things in this method:

1. Starting a new connection to the localhost “ws://10.0.2.2:8080/websocket”.
2. Sending a message to the server once a connection is opened.
3. Displaying the messages sent from the server on the app.
4. Setting timeouts and automatic reconnection.

Now that we connected the client to the server, let’s set up the method to send messages to the server.

Send Messages to the Server

In MainActivity.java, add the following to sendMessage():

public void sendMessage(View view) {
   Log.i("WebSocket", "Button was clicked");

   // Send button id string to WebSocket Server
   switch(view.getId()){
     case(R.id.dogButton):
       webSocketClient.send("1");
       break;

     case(R.id.catButton):
       webSocketClient.send("2");
       break;

     case(R.id.pigButton):
       webSocketClient.send("3");
       break;

     case(R.id.foxButton):
       webSocketClient.send("4");
       break;
   }
 }

When a button is pressed, the button id is sent to the server. This method is called from the file animal_sounds.xml, which you can get from my Java WebSocket Programming Repo. Make sure to modify the file strings.xml under the values directory so you won’t get any errors in the XML file.

The last thing to do on the client-side is to add the images for the animals in the drawable directory. The images are made by Freepik from www.flaticon.com.

Run the Android app in your emulator:

Nothing happens right now because the server is not set up. Let’s do that right now!

Spring Boot WebSocket Server

For our server, we will use Spring Boot which makes it easy to create production-grade Spring applications with minimum configurations. To quickly bootstrap our project, we will use Spring Initializr. We will generate a Gradle project, but you can also generate a Maven project if you prefer. Configure the Initializr like the screenshot below and make sure to add WebSocket as a dependency:

Generate the project to download a zip file. Once you unzip the file, go to the src directory and keep on clicking the subdirectories until you get to the JavaWebSocketServerApplication.java file.

package com.example.javawebsocketserver;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class JavaWebSocketServerApplication {
  public static void main(String[] args) {
    SpringApplication.run(JavawebsocketserverApplication.class, args);
  }
}

Add two files to the directory: WebSocketHandler.java and WebSocketConfiguration.java.

Handle the WebSocket Messages

We have to handle the incoming messages that arrive in the server. To do so, in WebSocketHandler.java inherit the class AbstractWebSocketHandler to implement the method handleTextMessage(). Add the following code to the file:

package com.server.javawebsocketserver;

import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.AbstractWebSocketHandler;
import java.io.IOException;

public class WebSocketHandler extends AbstractWebSocketHandler {
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws IOException {
        String msg = String.valueOf(message.getPayload());
        // Send back unique message depending on the id received from the client
        switch(msg){
            case("1"):
                System.out.println("Dog button was pressed");
                session.sendMessage(new TextMessage("Woooof"));
                break;

            case("2"):
                System.out.println("Cat button was pressed");
                session.sendMessage(new TextMessage("Meooow"));
                break;

            case("3"):
                System.out.println("Pig button was pressed");
                session.sendMessage(new TextMessage("Bork Bork"));
                break;

            case("4"):
                System.out.println("Fox button was pressed");
                session.sendMessage(new TextMessage("Fraka-kaka-kaka"));
                break;

            default:
                System.out.println("Connected to Client");
        }
    }
}

Inside the method, we simply get the string value of the message payload and do a switch expression to check the value of the message with the value of each case. A unique message with the animal sound is sent to the client.

Configure the WebSocket Request Handling

In WebSocketConfiguration.java, implement the interface WebSocketConfigurer and add the following code to the file:

package com.server.javawebsocketserver;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
// Add this annotation to an @Configuration class to configure processing WebSocket requests
public class WebSocketConfiguration implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new WebSocketHandler(), "/websocket");
    }
}

We set up the method registerWebSocketHandlers to configure the WebSocketHandler to the path “/websocket“.

That is all for the server-side. Now that we have everything set up, let’s start the WebSocket server and run the app!

Send Data between Server and Client

In the terminal, go to the root directory of your Spring Boot project and run the following command to start the server:

gradle bootRun

Next, run the Android client in Android Studio and once the app loads, click any of the four buttons.

Play around with the Android app and see how messages are sent from client-to-server with WebSockets!

Update the Android Client to Pub/Sub

Sending data client-to-server or server-to-client is not difficult and can be done pretty fast. But what if you want to send data client-to-client? You can’t directly connect clients without implementing some routing and broker logic on the server.

There are several tools we can use to make this task less time-consuming. One such tool is Socket.IO, which sets up a real-time, bidirectional connection between clients. This is a great open-source tool to use, but we still need to set up a server and connect the client to the server. Is there an easier way to securely and reliably send data between clients without manually setting up a server? With PubNub, we can.

PubNub provides the realtime infrastructure to power any device that speaks TCP. We can stream data from client-to-client, client-to-server or server-to-client using PubNub’s Global Data Stream Network in under 100 ms! With PubNub, an always-on connection is made between the devices connected to the channel, similar to WebSockets. The best part is that you don’t have to worry about setting up a server and maintaining the server because PubNub is serverless and is infinitely scalable.

To see how PubNub simplifies the process of sending data from client-to-client, we will modify the Android app we built earlier. But first, sign up for a free PubNub account to get your free Pub/Sub API keys. Sign up and log in using the form below:

Modify the Android Client

To differentiate the updated app from the old app, create a new Android project called PubNubJavaClient. In order to use PubNub’s Android SDK, add the following to the build.gradle file in the app directory and sync the project:

dependencies {
    implementation group: 'com.pubnub', name: 'pubnub-gson', version: '4.25.0' // Add this
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    ...
}

Include the following permissions to the manifest file:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Everything else, except MainActivity.java, is the same. From the previous app, add the following files to the updated app:  animal_sounds.xml, strings.xml and the images from the drawable directory. Once you finish this, go to MainActivity.java to add the new code. Import the following packages and set up onCreate():

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import com.pubnub.api.PNConfiguration;
import com.pubnub.api.PubNub;
import com.pubnub.api.callbacks.PNCallback;
import com.pubnub.api.callbacks.SubscribeCallback;
import com.pubnub.api.models.consumer.PNPublishResult;
import com.pubnub.api.models.consumer.PNStatus;
import com.pubnub.api.models.consumer.pubsub.PNMessageResult;
import com.pubnub.api.models.consumer.pubsub.PNPresenceEventResult;
import java.util.Arrays;

public class MainActivity extends AppCompatActivity {
  PubNub pubnub;
  TextView textView;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.animal_sounds);

    initPubNub(); // Initialize PubNub
  }

Make a call to initPubNub() to initialize PubNub:

public void initPubNub(){
  PNConfiguration pnConfiguration = new PNConfiguration();
  pnConfiguration.setPublishKey("ENTER_YOUR_PUB_KEY"); // REPLACE with your pub key
  pnConfiguration.setSubscribeKey("ENTER_YOUR_SUB_KEY"); // REPLACE with your sub key
  pnConfiguration.setSecure(true);
  pubnub = new PubNub(pnConfiguration);

  // Listen to messages that arrive on the channel
  pubnub.addListener(new SubscribeCallback() {
    @Override
    public void status(PubNub pub, PNStatus status) {
    }

    @Override
    public void message(PubNub pub, final PNMessageResult message) {
      // Replace double quotes with a blank space
      final String msg = message.getMessage().toString().replace("\"", ""); 
      textView = findViewById(R.id.animalSound);

      runOnUiThread(new Runnable() {
        @Override
        public void run() {
          try{
            // Display the message on the app
            textView.setText(msg);
          } catch (Exception e){
              System.out.println("Error");
              e.printStackTrace();
          }
        }
      });
    }

    @Override
    public void presence(PubNub pub, PNPresenceEventResult presence) {
    }
  });

  // Subscribe to the global channel
  pubnub.subscribe()
    .channels(Arrays.asList("global_channel"))
    .execute();
}

We do three key things in this method:

1. Initialize the PubNub client API. Make sure to replace “ENTER_YOUR_PUB_KEY” and “ENTER_YOUR_SUB_KEY” with your Pub/Sub keys.
2. Set up a listener to get notified of messages that arrive on the channel. As we did earlier, display the message on the app for the client to see.
3. Subscribe to the global channel where messages will be published.

When the user presses a button, the method sendMessage() is called:

// This method is called when a button is pressed
public void sendMessage(View view) {
  // Get button ID
  switch(view.getId()){
    case(R.id.dogButton):
      publishMessage("Woooof");
      break;

    case(R.id.catButton):
      publishMessage("Meooow");
      break;

    case(R.id.pigButton):
      publishMessage("Bork Bork");
      break;

    case(R.id.foxButton):
      publishMessage("Fraka-kaka-kaka");
      break;
  }
}

This method is similar to what we did earlier, except now we publish the actual message, the animal sound, to the global channel and not the server. We use publishMessage() as a helper function to publish the message.

public void publishMessage(String animal_sound){
  // Publish message to the global chanel
  pubnub.publish()
    .message(animal_sound)
    .channel("global_channel")
    .async(new PNCallback<PNPublishResult>() {
      @Override
      public void onResponse(PNPublishResult result, PNStatus status) {
        // status.isError() to see if error happened and print status code if error
        if(status.isError()) {
          System.out.println("pub status code: " + status.getStatusCode());
        }
      }
    });
}

That is all we need to get the app up-and-running!

Send Data Between Clients

Run the Android app in two emulators to see messages appear in realtime.

Now that you know how to send data with WebSockets in Java, make sure to check out the other tutorials in Socket Programming in Python and WebSocket Programming in Node.js.

Have suggestions or questions about the content of this post? Reach out at devrel@pubnub.com.

The post Java WebSocket Programming with Android and Spring Boot appeared first on PubNub.

In this tutorial, we’ll be using PubNub Functions to prevent multiple push notifications being triggered from a Smart Doorbell app built in React Native and a PubNub-powered IoT smart button. You can use this tutorial as a guide to shape data and messages in any PubNub app.

In our Smart Doorbell app, a user can press a smart button to trigger a remote push notification, but nothing stops a user from pressing the button repeatedly. Using PubNub Functions we will implement logic within the PubNub Network to remove the push notification keys from the message for messages sent less than 30 seconds from the last push notification. This kind of functionality is commonly known as debouncing. Debounces are often used in programming to ensure that tasks do not fire so often. Since we’re using PubNub Functions to manipulate the data, we won’t need to make any changes to our PubNub powered IoT smart button or the Smart Doorbell app.

What are PubNub Functions?

PubNub Functions is a serverless environment for executing functions on the edge, transforming, enriching, and filtering messages as they route through the PubNub network. PubNub Functions are JavaScript event handlers that can be executed on in-transit PubNub messages or in the request/response style of a RESTful API over HTTPS.

If you’ve used Node.js and Express, the “On Request” event handler development will be second nature.

Here are some of the things you could use PubNub Functions to do:

• Secure API Calls – Trigger an alert when a secure message meets certain criteria – email, text message, tweet, mobile push, etc.
• Decrease Time to Market: Focus on building your product and not managing the infrastructure to support it.
• Reduce Latency: Your users are global. Your product should be global. PubNub operates points of presence across the globe.
• Translation – Send a message in English and receive it in Spanish with a 3rd part translation API.
• Network Logic – Reliably count up millions of votes during realtime audience interaction.
• Serve Data – Build a globally replicated, low latency, production REST API in 5 minutes.
• Reduced Cost: Pay for usage and not idle servers.

Getting Started

You’ll need a free PubNub account and a React Native app.

Your app does not have to be the Smart Doorbell app we’re using in this tutorial. You can use your own PubNub application or you can build the Smart Doorbell app.

Here’s what you need for the Smart Doorbell app:

IoT Smart Button

You’ll need to build your own PubNub powered IoT smart button to use with the Smart Doorbell app. I’ve put together a guide to build your own IoT smart button.

You only need two hardware components:

• A push button.
• A MKR1000 development board.

Build your button by following the guide.

Smart Button React Native App

Next, you’ll need to complete the tutorial for building a Smart Doorbell app in React Native that tracks the history of the smart button press events. The app works on both iOS and Android.

Build the Smart Doorbell app by following the tutorial.

Push Notifications

Last, you’ll need to enable push notifications in the app by completing the tutorial for Instant Push Notifications for iOS and Android from a React Native App.

Creating a Function to Alter Messages

Go to your PubNub Admin Dashboard and select your app. Then click on the keyset that was created for that app.

Next, click “Functions” in the sidebar and then create a new module named “PushFilter.” Select the module you just created.

Create a Function with the name “Push-Filter.”

Set the event type to “Before Publish or Fire”, and set the channel name to “smart_buttons”.

Delete any code in the editor and replace it with a function to send an altered message if messages are sent less than 30 seconds apart:

const store = require('kvstore');

export default (request) => {
    // Limit push notifications.
    const duration = 30;  

    // Get the time and compare to the last time a notification was sent. 
    const currentTime = Math.round(Date.now() / 1000);

    return store.get('anti_spam').then((value) => {
        // Get the last time a message was sent with push notifications.
        const lastMessageTime = value.last_message_time;
        
        // Edit message if duplicate.
        if ((currentTime - lastMessageTime) < duration) {
            // Modify the message to remove push keys.
            console.log("Duplicate push notification removed.");
            request.message = { "event": { "button": "pressed" }};
        } else {
            // Allow full message and record time.
            store.set('anti_spam', {
                last_message_time: currentTime
            });
        }

        return request.ok();
    })
    .catch((e) => {
        console.error(e);
        return request.abort(); 
    });
}

Click “Save” and then “Restart module.”

Test Message Debounce with IoT Smart Button

Press your PubNub powered IoT smart button and you’ll see in the console that an unaltered message is allowed only once every 30 seconds. No more push notification spam!

Test Message Debounce with Debug Console

You can also test by sending messages to the “smart_buttons” channel from the PubNub Debug Console. Go to your PubNub Admin Dashboard, select the keys you created for this project, and create a client in the Debug Console. Set the “Default Channel” to “smart_buttons” and leave the other fields blank. Click “ADD CLIENT”.

Send a test message to the channel and you’ll see that an unaltered message is allowed only once every 30 seconds.

{
  "event": {
    "button": "pressed"
  },
  "pn_apns": {
    "aps": {
      "alert": "Someone is at the door."
    }
  },
  "pn_gcm": {
    "notification": {
      "body": "Someone is at the door."
    }
  }
}

What’s next?

• Build a Smart Home powered by PubNub Functions.
• Link your PubNub-powered IoT smart button with an IFTTT recipe.
• Use push notifications to alert users of a delivery driver’s location.

Have suggestions or questions about the content of this post? Reach out at devrel@pubnub.com.

The post How to Manipulate, Augment, and Filter Realtime Data Streams using PubNub Functions appeared first on PubNub.

I won’t put you through a sales pitch on Rust itself, after all, this Stack Overflow poll speaks for itself. However, I do want to show how to integrate Pub/Sub messaging into your Rust project by creating a Rust chat app.

What is Publish-Subscribe?

Publish-Subscribe, or Pub/Sub is a way for services and clients to communicate with each other in realtime. One common use case of Pub/Sub in Rust is to connect multiple devices or servers and reflect any changes or updates across them simultaneously. One can use these payloads to update systems, send chat app messages, live geolocation tracking and more. Another use is networking in Web Assembly, a pre-compiled binary format that will replace JavaScript in the browser. This will enable developers to make website front ends with another language besides JavaScript. Instead of having to interpret JavaScript at runtime, it compiles other programming languages to binary before the page loads.

There are a few Pub/Sub API’s out there; I’m going to use PubNub. The reason why I use it with Rust is that it has a simple REST API that I can leverage. While also providing pre-written, open-source API integrations, it provides a solid infrastructure for my use case.

Sign Up for PubNub

It’s time to take the first step in creating our project, let’s get our free PubNub API keys. There are two ways to obtain them, either through signing up in the PubNub Admin Dashboard or using the form below.

Setting Up a Rust Environment

When starting to develop with Rust, I found the compiler to be extremely helpful. Aside from running your code, it tells you where and what you’re doing wrong, and it will tell you why if you ask it! Let’s get it installed by typing curl https://sh.rustup.rs -sSf | sh into your terminal.

Once that finishes, navigate to where you want your new Rust project to live and type cargo new rustychat

Now navigate into your project and use cargo run to run your project!

Now that you have a project set up, let’s go over some of the files inside of your project.

The file “Cargo.toml” is similar to a package.json from Node.js. This is where you’ll put all your crates (libraries), and when you build your project, they’ll be installed. If you’ve installed iOS frameworks with Cocoapods, listing these dependencies will feel similar. 

Inside here, under dependencies, you should include the six crates that our app uses. The libraries will allow us to: 

• Send GET requests 
• Define custom error types more easily
• Construct and destruct JSON objects
• Derive custom structs from JSON
• Create a custom Terminal UI 
• URL encode our requests

[dependencies]
reqwest = "0.9.18"
custom_error = "1.6.0"
serde_json = "1.0"
serde = { version = "1.0", features = ["derive"] }
cursive = { version = "0.12.0", default-features = false, features = ["pancurses-backend"] }
percent-encoding = "1.0.1"

Your Cargo.toml should now have all of the crates we plan on using. When we build our project, Rust will automatically install these dependencies. 

The next file is src -> main.rs, your main Rust code file. Here is where your main function is, in addition to “imports” of crates and the defining of structs. 

Above your main function, insert these lines to gain access to the crates you just listed as dependencies. Include some crates that come standard in Rust.

extern crate reqwest;
use percent_encoding::{percent_encode, PATH_SEGMENT_ENCODE_SET};
use serde::{Deserialize, Serialize};
use std::sync::mpsc::{channel, Sender};
use std::thread;
use cursive::align::HAlign;
use cursive::traits::*;
use cursive::Cursive;
use cursive::view::ScrollStrategy;
use cursive::views::{BoxView, Dialog, DummyView, EditView, LinearLayout, ScrollView, TextView};
use custom_error::custom_error;

If you run your code again, it should build all the crates, and then output “Hello World.”

Create a Custom Error

When taking risky actions in code, you should write error handlers to gracefully marshall code execution gone awry. This is why I used custom_error, a crate that reduces the boilerplate needed in normal Rust for creating errors. We define the type, and for each type of error we expect, we can return a description. 

In our code, we’ll be turning an object into a JSON string (and vice-versa), making a GET request to a URL, and accessing what comes back as a response. All three of these are risky and might fail, but we can recover. Once we detect an error, create a description to output in the terminal.

Look below for an example of the errors that I cover and how I define them. 

custom_error! {ChatError
    JSONError{source: serde_json::error::Error} = @{
        source.to_string()
    },
    ReqwestError{source: reqwest::Error } = @{
        source.to_string().split(": ").collect::<Vec<&str>>()[1]
    },
    Unknown = "unknown error"
}

Define Structs for Rust JSON Response

In this section, we will define a few structs that represent a JSON response that we get from PubNub. We’ll have four structs that each represent one layer of the response object we receive.

Response holds a Time and a vector of MessageResp. Time holds a time token string, MessageResp holds a Message, which has a UUID string field and a text string field. Each of these fields needs to be deserializable. This allows us to throw the JSON response into a Response struct, and it’ll take care of organizing the data. Message also needs to be serializable to turn it into JSON data. 

#[derive(Deserialize)]
struct Response {
    t: Time,
    m: Vec<MessageResp>,
}

#[derive(Deserialize)]
struct MessageResp {
    d: Message,
}

#[derive(Deserialize)]
struct Time {
    t: String,
}

//Message is a sub object of MessageResp
#[derive(Serialize, Deserialize)]
struct Message {
    uuid: String,
    text: String,
}

Asynchronous Rust: How to Multithread

Our main function in this project will create two threads: a thread that searches for new messages arriving and a thread for our UI. Let’s start with making our program use multithreading. Making our program run on multiple threads allows for us to block one thread waiting for messages while the user can still type new messages in the chat input.

The app runs on one thread, going line by line, by default. We can create a second thread that runs the subscribe loop at the same time. Before we create this second thread, how would we access its data on the main thread?

That’s where the channel comes in. It creates a sender and a receiver, also known as a producer and consumer. The sender can be cloned but the receiver cannot, allowing the receiver to access messages in the order they were sent.

Create two separate channels, one is to send a channel from the UI to the subscribe thread, and the other is to send messages from the subscribe thread to the UI.

fn main() {

    //We create two channels, one to pass the channel name to the subscribe function 
    //Another to send new messages from the subscribe function to the UI 
    let (channel_sender, channel_receiver) = channel();
    let (mut msg_sender, msg_receiver) = channel();
    
    //... 
    //REST OF THE MAIN FUNCTION 
}

Now create a thread using spawn, which is the simplest way to create new threads in Rust. We put the keyword “move“ before the callback to take ownership of the channel receiver and message sender. Inside the new thread, create an empty string that we’ll use for our initial time token. To subscribe, we need a channel from our UI. Our UI will send a channel once the user submits one, but until then, we should halt our thread.

The great thing about using channels is that we have the option of waiting for information to be sent. Let’s use the “`recv()“` function on our receiver, which waits for a single value to be passed through the channel. 

//... 
//INSIDE MAIN
//Create a seperate thread, this allows us to have a subscribe loop that wont stop the UI from updating
let _handle1 = thread::spawn(move || {
  let mut time_token = "".to_string();
    //We wait for the UI to send us the channel name
    let test_channel = channel_receiver.recv();
    //...
    //REST OF THREAD
}
//...
//REST OF MAIN

When we receive a variable from another thread, we don’t know if it is an error or not. If the value is “Ok,” unwrap it into a string. Let’s create our subscribe loop! Use the “loop“ keyword to create an infinite loop. 

//...
//INSIDE THREAD
if test_channel.is_ok() {

    let channel_name: String = test_channel.unwrap();
    loop {
        //...
        //REST OF LOOP
    }
}

The next step will be to call our subscribe function. It’ll return a Result enum of String, and ChatError. Results contain values wrapped in either an “Ok” or an “Err.” If the action went well, then an “Ok” will return, but “Err” will return if there was an error. You can check if the result is an error or a success, and additionally see what the value is by unwrapping it. The subscribe function will borrow the time token, a mutable version of the message sender, and the channel name.

//...
//Loop
let result: Result<String, ChatError> = subscribe(&time_token, &mut msg_sender, &channel_name);

We haven’t created this function yet, but I’ll walk you through it soon. All that we need to know right now is that the function might return an error. Let’s handle both cases. 

If our subscribe Result went smoothly, “`result.is_ok()“` should return true. If so, unwrap it and assign your time token to its value. 

if result.is_ok() {
    //We update the time_token var to get all messages that happened after that specific time.
    time_token = result.ok().unwrap();
}

If it did not go well, don’t start worrying about alerting the user yet; it might be a ‘timed out’ error. This is expected every so often if there were no new messages.

Because PubNub’s REST API uses HTTP Long Polling, time outs mean that nothing new happened. If it was not a time out, then we should print the error and then break out of the loop. This cancels our program. That’s the end of our loop, if we receive a time token or a timeout error from our subscribe function then we start the loop over. 

else if result.is_err() {
    let err = result.unwrap_err();
    //If the request times out, thats okay, we just restart it with that same time token, looking for new messages.
    if err.to_string() != "timed out" {
        println!(
            "Error: {:?} \nPlease restart application to try again.",
            err.to_string()
        );
        break;
    }
}
//...
//END LOOP
//END IF
//END THREAD

It’s time to pause on the main function now that we finished our subscribe loop. It’s time to delve deeper into subscribing by actually creating the function. 

PubNub REST API

Since we already obtained our keys, let’s learn how we’ll use PubNub in Rust. 

PubNub has a REST API, which allows us to access Pub/Sub and more with just HTTP GET requests. Check out the REST API with HTTP GET docs for more information.

The PubNub REST API allows developers to publish messages and to subscribe to channels using HTTP requests. Having low-level control over requests lets you decide how often to make the subscribe calls and whether calls will be asynchronous or not. For this chat app, we’ll be making subscribe calls as soon as our previous one ends so users can still interact with other parts of our app. 

Check out the diagram below to understand the flow of information in our app. 

We’ll be using the Publish and Subscribe URLs in our app, each in its function. I’ll first give instructions on subscribing, then we can use some of the similar concepts to publish.

Subscribing to a Channel in Rust with a REST API

This section will be a guide for creating a request to PubNub for Pub/Sub Subscribe. Through this, we’ll have a better understanding of how PubNub works with Rust. We’ll learn how to message data from this thread to the UI. 

Function Definition

As we saw earlier, our function borrows a time, a sender to a channel, and a channel name. It returns a Result that either contains a String or a ChatError, which we defined at the beginning of our project. This allows us to define what might go wrong in our code, and what to do in each situation

fn subscribe(time: &str, msg_sender: &mut Sender<String>, channel: &str ) -> Result<String, ChatError> {
    //...
    //Subscribe Function
}

Create the URL String

The first step in these functions will be to create the URL string. To do this, we use the macro function format and the crate percent-encoding. Using “format” makes it easier to create URLs with variables. The percent-encoding package lets us convert our objects into URL encoded strings. 

In each request, there is a spot to put your subscribe key and channel name. We include a time parameter at the end, even though we won’t always have one. We don’t always pass one to the subscribe function. We always receive one in a successful response from PubNub. 

//...
//In subscribe
//Format the URL
let url = format!(
    "https://{host}/v2/subscribe/{subkey}/{channel}/0/{time}",
    host = "ps.pndsn.com",
    subkey = "INSERT_SUB_KEY_HERE",
    channel = percent_encode(channel.as_bytes(), PATH_SEGMENT_ENCODE_SET),
    time = percent_encode(time.as_bytes(), PATH_SEGMENT_ENCODE_SET),
);

Call the reqwest::get function

Once we have the URL we want to request messages from, we call it using “Reqwest.” Reqwest is an abstraction over Hyper: a lower level Rust crate for making network requests. This function may return the information we want, but it also may give an error. This is where our functions’ Result return type plays a role. If something goes wrong, it’ll return an error.

let mut resp = reqwest::get(&url)?;

When using reqwest::get, we leave a question mark at the end. This means that if this call fails, the subscribe function will return an “Err” value. Instead of having to tell our functions to return an “Err” with custom error information on the inside, they will do it automatically. 

Successful Response – JSON to Object

If the status of the response is successful, we can dive into what we received. We defined a few structs at the beginning of the file that will help us access the information inside! One of the crates we packed makes this deserialization process painless. We use serde_json to turn our response’s text into a nice object, that’s easy to access the information. This process also might fail, but we already have that error handled with ChatError. 

if resp.status().is_success() {
    let deserialized: Response = serde_json::from_str( & resp.text()?).unwrap();
    //...
    //Rest of If 
}

We sometimes won’t receive one message in the response, so let’s iterate through the Vector inside of it. For each of the messages, we’ll use our Sender to pass each message’s information. I create a string from the two values we get from each, a UUID and text. Be sure to unwrap the statement afterward. After iterating through the messages we can return the new time we received in an “Ok”.

//...
//In if statement
for m in deserialized.m {
    //Send the new message to the UI above.
    msg_sender
        .send(format!("{} : {}", m.d.uuid, m.d.text))
        .unwrap();
}
return Ok(deserialized.t.t);
//End of if

If the response did not succeed, put an “Ok” Result at the end of the subscribe function.  Give it the original time that was passed in, which is converted to a string. 

Ok(time.to_string())
//End of subscribe

Errors 

Did you notice that we didn’t include any Err statements? All our errors are handled by ChatError. We do include some filled “Ok” statements, which allow us to pass some information back to the calling function and say “Hey, things went fine!”

Publishing Messages in Rust

After creating our subscribe function, let’s create another function to publish to PubNub. This function will follow most of the same format as the last one, but there are a few small changes. 

Function Definition

This function will accept 3 strings as parameters. They are the text we want to send, the UUID of the sender, and the channel name. Just like the previous function, we return a Result, but this time it’s an empty “Ok”, or a ChatError Err.

fn publish(text: String, uuid: String, channel: String) -> Result<(), ChatError> {
  //...
    //PUBLISH FUNCTION
}

Object to JSON

At the beginning of this function, let’s create a Message with a couple of the parameters provided. We’re going to do the opposite of the subscribe function, but this time we’ll turn our object into a JSON string. This might return an error, so leave a question mark at the end and our ChatError will take care of it.

//...
//In publish
let message = Message { uuid, text };
let m_json = serde_json::to_string(&message)?;

Create URL String

This will be quite similar to the subscribe function, just adding and swapping some parameters. Replace ‘subscribe’ with ‘publish’, include your publish key, and replace time with a message. Both the channel and the message need to be URL encoded as well. 

let url = format!(
    "https://{host}/publish/{pubkey}/{subkey}/0/{channel}/0/{message}",
    host = "ps.pndsn.com",
    pubkey = "INSERT_PUB_KEY_HERE",
    subkey = "INSERT_SUB_KEY_HERE",
    channel = percent_encode(channel.as_bytes(), PATH_SEGMENT_ENCODE_SET),
    message = percent_encode(m_json.as_bytes(), PATH_SEGMENT_ENCODE_SET),
);

Create GET Request

Make a GET request and put a question mark after the call. Put an “Ok” Result on the next line. Once these are complete, we’ve finished our publish function!

let _resp = reqwest::get(&url)?;
Ok(())
//End of publish

Create a Terminal UI using Cursive

What is a TUI?

We’ve learned how to use PubNub’s REST API and we also created a separate thread to long poll PubNub for new messages. So far, we look for messages on a channel and we send those new messages somewhere. We haven’t defined where we get the channel from and where the new messages go. Both of these have much to do with the user interface. 

While it is possible to create a command-line based chat, using a Terminal User Interface makes the experience much more clean and smooth. I used Cursive, a simple and feature-rich TUI that lets us separate the input from the output. 

Channel and Username Input

To initiate Cursive, you need to create a mutable instance of its default function.

//Below end of _handle1 thread
let mut siv = Cursive::default();

Cursive uses a format that is reminiscent of other methods of UI creation, namely using Views. Views can hold other views and have different uses. Views at the very base are contained by layers. These are the windows that can be added or popped.

Create a layer, and pass it a Dialog. A Dialog is a type of window that can hold another view. It should be around a LinearLayout view, which we can set to a vertical orientation. LinearLayouts are great for organizing child views into stacks or rows. You can add children to it with the “`child“` function, and it can be chained any number of times. You can also use “`with“` to dynamically add in children. We’ll use that later, but for now, let’s design our connection layer inside the LinearLayout. 

siv.add_layer(
    Dialog::around(
        LinearLayout::vertical()
        //...
        //LinearLayout's children
    )

    //...
    //Title and buttons of Dialog
);

We are going to use a few different views to create this layer. We use TextViews for short lines of text, like a label. EditViews let users enter information, which we can later access with a specific ID. DummyViews are useful to space out our other views. You can design these how you want in your space, but I center the TextViews and set the EditViews width to 20. In addition to setting the styles, make sure you set an ID to each EditView AFTER “`new()“`, but before “`fixed_wifth(20)“`. If the ID is not in that spot, then we will not be able to reference that value later on. The Dummy Views are useful to space out items. 

//...
//LinearLayout's children
.child(DummyView.fixed_height(1))
.child(TextView::new("Enter Username").h_align(HAlign::Center))
.child(EditView::new().with_id("username").fixed_width(20))
.child(DummyView.fixed_height(1))
.child(TextView::new("Enter Channel").h_align(HAlign::Center))
.child(EditView::new().with_id("channel").fixed_width(20))

After the LinearLayout is complete, finish up creating the Dialog. Add a title to the Dialog, create an “Okay” button with a callback, and a quit button. Finally, align it in the center. We’ll go into the “Okay” button’s callback next. 

//...
//Attacched to Dialog
.title("PubNub Chat")
.button("Okay", CALLBACK )
.button("Quit", | s | s.quit())
.h_align(HAlign::Center),

Connect to a Channel

Inside of the “Okay” button, we have the option to provide a callback. This runs when the user either clicks or presses enter on the button. We want to use the “`move“` keyword again to allow this callback ownership of all the variables it needs. 

.button("Okay", move | s | {
    //... 
    //Okay callback
}

Let’s grab the values that the user entered into the EditViews earlier.

//Inside Okay
let channel = s
    .call_on_id("channel", |view: &mut EditView| view.get_content())
    .unwrap();
let username = s
    .call_on_id("username", |view: &mut EditView| view.get_content())
    .unwrap();

Check if the username is empty, and if so, create a layer telling the user to enter a username. If it does not, then check if the channel name was empty. If it was, set it to “global” as a default.

//Checking if username input is empty.
if username.is_empty() {
    s.add_layer(Dialog::info("Please enter a username!".to_string()));
} else {
    let new_channel =
        if channel.is_empty() {
        "global".to_string()
        } else {
            channel.to_string()
        };

    //...
    //The rest of connecting to PubNub
}

Continuing in that same else statement, let’s send the channel that we have (either “global” or a user-defined channel) to the subscribe loop. Once we do this, our loop will be able to proceed, and request messages from PubNub. Before we load the next screen, pop the initial layer.

channel_sender.send(new_channel).unwrap();
s.pop_layer();

Create the Chat Layer

Create another layer now, this will be a BoxView with a fixed size of 40, 20. Inside of that box will be a Dialog with a title. It has a content field. It’ll be aligned in the center, with a send and a quit button. 

//...
//Still in else statement
s.add_layer(BoxView::with_fixed_size((40, 20),
    Dialog::new()
    .title("PubNub Chat")
    .content(
        //...
        //Chat view: Includes list of messages and EditView
    )
    .h_align(HAlign::Center)
    .button("Send", CALLBACK)
    .button("Quit", | s | s.quit()),
))
//End of UI design

I’ll first show how to design the content, then I’ll show how to send a message. Inside the content function of the Dialog, insert a LinearLayout. This is to stack a Scrollview and an EditView on top of each other. Inside of the ScrollView, we insert another LinearLayout. This extra LinearLayout is so we can remove extra lines if we’d like. Some other views do not provide this functionality. Make the ScrollView stick to the bottom when new messages are received, using “`scroll_strategy“`. 

//Inside Content
LinearLayout::vertical()
    .child(
        ScrollView::new(
            LinearLayout::vertical()
            //Children of the LinearLayout
        )
        .scroll_strategy(ScrollStrategy::StickToBottom),
    )
    //Next Child

Inside of this second LinearLayout, we have DummyViews on the top and bottom, with the “`with“` child between. It provides a reference to the LinearLayout and we can add children dynamically. Add some DummyViews, I chose 13, a number that works well with our layers height. We add these empty lines so that when new messages come in, they appear at the bottom first. Set the LinearLayouts ID to “messages” or whatever you want. 

//Children of inner LinearLayout
.child(DummyView.fixed_height(1))
//Add in a certain amount of dummy views, to make the new messages appear at the bottom
.with( | messages | {
    for _ in 0. .13 {
   		messages.add_child(DummyView.fixed_height(1));
    }
})
.child(DummyView.fixed_height(1))
.with_id("messages"),

At the end of the first LinearLayout add an EditView child with the ID of “message.” 

//Child of first LinearLayout
.child(EditView::new().with_id("message")),
//End of content

Publishing a Message

Now that we’ve designed our chat view, let’s work on sending some messages! Just like our “Okay” button from the previous layer, we want a callback and to move all the required variables into it.

.button("Send", move |s| {
  //...
    //Rest of the callback
}

Take the message from the EditView, as we did before, and check if it’s empty. If it is, then alert the user and tell them to type a message. If it is not empty, then we check if the channel that they entered is empty or filled, like we did above.

//Inside callback
let message = s
    .call_on_id("message", |view: &mut EditView| view.get_content())
    .unwrap();
if message.is_empty() {
    s.add_layer(Dialog::info("Please enter a message!".to_string()))
} else {
    let new_channel_2 = if channel.is_empty() {
    	"global".to_string()
    } else {
    	channel.to_string()
    };
    
    //...
    //Will handlee publishing messages
}
//End of callback

Call our publish function with the message, the username, and the channel names that the user entered. If the result was an error, then we tell the user that we encountered an error while publishing. If it went well, then we clear the text from the EditView. 

//In the else statement
let result = publish(message.to_string(), username.to_string(), new_channel_2 );
if result.is_err() {
    //If there was an error then we say that there is one, and don't do anything.
    s.add_layer(Dialog::info("Error Publishing".to_string()));
} else {
    //Clear out the EditView.
    s.call_on_id("message", |view: &mut EditView| {
        view.set_content("")
  }).unwrap();
}
//End of else + callback

Inserting New Messages Into UI

Usually, we would use the command “`siv.run()“` to have the UI start, but since we want to control when the UI changes we use “`siv.refresh()“` instead. Create a new variable to count how many messages we receive, and refresh the UI after it updates.

//...
//After creating the UI design/layers
let mut message_count = 0;
siv.refresh();

Create a loop that first calls “step” to increment through the UI event loop. Check if cursive is running at that point, and if it’s not, break out of the loop. Create a variable to track whether there needs to be a UI refresh and set it to false. 

loop {
    siv.step();
    if !siv.is_running() {
        break;
    }

    let mut needs_refresh = false;

    //...
    //Handle new messages
}

Now for the final requirement, we need to check if any messages are waiting for us in the channel queue. We can use a non-blocking method on the “`msg_receiver“` to see if anything is waiting. If there are messages, it will return an iterator. We can use a Rust for loop to iterate through the messages. 

for m in msg_receiver.try_iter() {
    //...
    //Adding each message "m" in
}

Inside of this for loop, we access the LinearLayout with the ID “messages”. We can then set our refresh boolean to true, add one to the message count, and add the message as a child to the LinearLayout. In that loop, you can also remove the first child. This is to avoid a scroll bar from appearing until the messages go past the screen! Be sure to check if the message count is less than or equal to your DummyView count plus one.

//Inside of for loop
siv.call_on_id("messages", |messages: &mut LinearLayout| {
  needs_refresh = true;
    message_count += 1;
    messages.add_child(TextView::new(m));
    if message_count <= 14 {
        messages.remove_child(0);
    }
});

If our refresh boolean is true at the end of the loop, then we can refresh the UI and show the changes.

if needs_refresh {
    siv.refresh();
}
//End of loop
//End of Main

After completing the main function, the chat app finished. If you enter cargo run into your terminal, A UI will pop up asking for a username and channel name. Entering at least a username will allow you to connect to either the channel you entered or “global” as a default. If you enter a message and click “Send”, the message will appear on your screen. Open up multiple command lines and chat in between them, or chat with others if they have access to the same keys as you.

Our final chat app with a Cursive Terminal UI.

Next Steps

In this tutorial, we created a terminal chat app in Rust. It uses PubNub’s Pub/Sub to send and receive messages through a Cursive Terminal UI. This is only an example of what is possible with Rust and PubNub.  If you’re using Rust to compute an algorithm, or run a game, and you need some I/O around the world, PubNub can help.

Want to try this in another language? PubNub has over 75+ SDKs and hundreds of tutorials.

The post Rustacean Terminal Chat App in Rust appeared first on PubNub.

With a simple webcam, your program will be able to recognize the faces of people you choose to allow into the system. It will trigger a text, email, and snapshot image alert system, if any unrecognized faces appear in front of your webcam. We’ll also use Cloudinary and PubNub to build a React Native application that can receive a snapshot image of an “intruder’s” face. It will also allow a user to be added to the system if you desire.

What is Computer Vision?

Computer Vision is a specific field in artificial intelligence that deals with training machine learning models to understand and interpret the visual world. By learning from images and frames from cameras and videos, a computer vision AI can accurately classify the objects it sees and subsequently perform reactionary tasks just like we humans do.

Source Accessed 7/31/19

But enough talk…It’s time to code!

Python Code for Your FaceTracking Alert System

Before jumping into the code, be sure you sign up for a free PubNub account so we don’t run into any issues later.

To start building the project from scratch, create your project’s directory using your computer’s command line app:

mkdir faceTrackingApp
cd faceTrackingApp

Then create a new Python file called facetracker.py.

Libraries and Dependencies for Computer Vision

OpenCV and face_recognition

First, let’s import some machine learning libraries for our app’s face tracking capabilities. The main libraries we are going to use are OpenCV and face_recognition.

import face_recognition # Machine Learning Library for Face Recognition
import cv2 # OpenCV
import numpy as np # Handling data
import time
import os,sys

OpenCV is the most popular machine learning library for realtime Computer Vision. The library has useful tools such as webcam control as well as models to train a face tracking app from scratch.

However, our project will primarily use ageitgey’s face_recognition python library as it already comes with a face recognition model out of the box, making it extremely quick and easy to use.

PubNub

Next, we’re going to setup PubNub as our Data Stream Network to handle all of the data between our Python script and mobile application.

After you’ve retrieved your free PubNub API keys, install the PubNub Python SDK.

pip install 'pubnub>=4.1.4'

Then, import the library in your python file,

from pubnub.callbacks import SubscribeCallback
from pubnub.pnconfiguration import PNConfiguration
from pubnub.pubnub import PubNub
from pubnub.enums import PNOperationType, PNStatusCategory

and configure a PubNub instance with your API keys.

# PubNub Config
pnconfig = PNConfiguration()
pnconfig.subscribe_key = "YOUR_SUBSCRIBE_KEY"
pnconfig.publish_key = "YOUR_PUBLISH_KEY"
pnconfig.ssl = False
pubnub = PubNub(pnconfig)

Cloudinary

Lastly, we will setup Cloudinary as our Content Delivery Network to store images of intruders’ faces. This will work beautifully with PubNub as our python script can upload the image to Cloudinary, get the URL from the response, then PubNub will send that URL to our Client app to render.

First, sign up for a free Cloudinary account and then install the Cloudinary Python SDK with:

pip install cloudinary

Setup the CLOUDINARY_URL environment variable by copying it from the Management Console.

Using zsh/bash/sh:

export CLOUDINARY_URL=cloudinary://API-Key:API-Secret@Cloud-name

Import the library in your Python script,

from cloudinary.api import delete_resources_by_tag, resources_by_tag
from cloudinary.uploader import upload
from cloudinary.utils import cloudinary_url

and configure a Cloudinary instance.

# Cloudinary Config
os.chdir(os.path.join(os.path.dirname(sys.argv[0]), '.'))
if os.path.exists('settings.py'):
    exec(open('settings.py').read())
DEFAULT_TAG = "python_sample_basic"

Machine Learning Face Tracking Algorithm

Before we begin building our face recognition machine learning model, we’ll need to declare some global variables:

# Setup some Global Variables
video_capture = cv2.VideoCapture(0) # Webcam instance
known_face_names = [] # Names of faces
known_face_encodings = [] # Encodings of Faces
count = 0 # Counter for Number of Unknown Users
flag = 0 # Flag for Setting/Unsetting "Intruder Mode"

NOTE: We create a count variable for the unknown users because we are going to dynamically save the user’s snapshot image in a file path. We’re  going to append the count to the file name like an ID tag. In order to find this snapshot image later, we need to pull up that user’s count variable, so we can find the image in the file path.

To start training our face recognizer model, we’ll begin with two sample images of faces. You will need two images of two different people’s faces in your project directory.

# Load a sample picture and learn how to recognize it.
sample_face_1 = face_recognition.load_image_file("sample_1.jpeg")
sample_face_1_encoding = face_recognition.face_encodings(sample_face_1)[0]

# Load a second sample picture and learn how to recognize it.
sample_face_2 = face_recognition.load_image_file("17.png")
sample_face_2_encoding = face_recognition.face_encodings(sample_face_2)[0]

# Create arrays of known face encodings and their names
known_face_encodings = [
    sample_face_1_encoding,
    sample_face_2_encoding
]

# Create Names for Sample Face encodings
known_face_names = [
    "sample_1",
    "sample_2"
]

# Initialize some variables
face_locations = []
face_encodings = []
face_names = []
process_this_frame = True

Next, we will declare a while loop that will run continuously for the duration of the app. The loop will be responsible for the main functions of our app:

• Turning on and displaying the webcam feed
• Tracking faces that appear in front of the webcam and drawing a red box around the face in realtime
• Displaying a name below a known user’s face and “Unknown” for a face that has not been added to the database
• Calling a series of Alerts and Functions to handle when an “Unknown” face appears on screen

while(True):
    
    video_capture = cv2.VideoCapture(0)
    # Grab a single frame of video
    ret, frame = video_capture.read()

    # Resize frame of video to 1/4 size for faster face recognition processing
    small_frame = cv2.resize(frame, (0, 0), fx=0.25, fy=0.25)

    # Convert the image from BGR color (which OpenCV uses) to RGB color (which face_recognition uses)
    rgb_small_frame = small_frame[:, :, ::-1]

    # Only process every other frame of video to save time
    if process_this_frame:
        # Find all the faces and face encodings in the current frame of video
        face_locations = face_recognition.face_locations(rgb_small_frame)
        face_encodings = face_recognition.face_encodings(rgb_small_frame, face_locations)

        face_names = []
        for face_encoding in face_encodings:
            # See if the face is a match for the known face(s)
            matches = face_recognition.compare_faces(known_face_encodings, face_encoding)
            name = "Unknown"

            # # If a match was found in known_face_encodings, just use the first one.
            # if True in matches:
            #     first_match_index = matches.index(True)
            #     name = known_face_names[first_match_index]

            # Or instead, use the known face with the smallest distance to the new face
            face_distances = face_recognition.face_distance(known_face_encodings, face_encoding)
            best_match_index = np.argmin(face_distances)
            if matches[best_match_index]:
                name = known_face_names[best_match_index]

            face_names.append(name)

            #---------------------See next section for this code block's explanation---------------------#

            ## Set Unknown User Flag and Send Alerts
            #global flag
            #if(name=='Unknown' and flag==0):
            #    flag = 1
            #    Alert()
            #
            #--------------------------------------------------------------------------------------------#

    process_this_frame = not process_this_frame

    # Display the results
    for (top, right, bottom, left), name in zip(face_locations, face_names):
        # Scale back up face locations since the frame we detected in was scaled to 1/4 size
        top *= 4
        right *= 4
        bottom *= 4
        left *= 4

        # Draw a box around the face
        cv2.rectangle(frame, (left, top), (right, bottom), (0, 0, 255), 2)

        # Draw a label with a name below the face
        cv2.rectangle(frame, (left, bottom - 35), (right, bottom), (0, 0, 255), cv2.FILLED)
        font = cv2.FONT_HERSHEY_DUPLEX
        cv2.putText(frame, name, (left + 6, bottom - 6), font, 1.0, (255, 255, 255), 1)

    # Display the resulting image
    cv2.imshow('Video', frame)

    # Hit 'q' on the keyboard to quit!
    if cv2.waitKey(10) & 0xFF == ord('q'):
        break

# Release handle to the webcam
video_capture.release()
cv2.destroyAllWindows()

Sending Alerts

We shall take care of the case when an unregistered face appears in front of our webcam. We want our program to trigger an alert system the moment it sees an “Unknown” face. Luckily, all we need to do is add a few lines of code to our main while loop at the end of the for face_encoding in face_encodings: loop.

# Set Unknown User Flag and Send Alerts
global flag
if(name=='Unknown' and flag==0):
    flag = 1 # Stop repeated calls of Alerts until after the Unknown User is dealt with
    Alert() # Trigger Alert System

When the alert is triggered, we can then define a function to take a snapshot of the unknown user’s face, call a function to upload the snapshot to Cloudinary, and finally call our Text/Email alert function.

def Alert():
    global count
    video_capture = cv2.VideoCapture(0) # Create Open CV Webcam Instance
    path = './' # Specify where you want the snapshot to be stored
    name = 'Unknown_User' + str(count) # Append User ID to File Path

    # Wait for 3 seconds
    print('Taking picture in 3')
    time.sleep(1)
    print('Taking picture in 2')
    time.sleep(1)
    print('Taking picture in 1')
    time.sleep(1)

    # Take Picture
    ret, frame = video_capture.read()

    # Grayscale Image to save memory space
    gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)

    # Save Image in File Path
    status = cv2.imwrite('% s/% s.jpg' % (path, name),gray)
    print('Unknown User Saved to Database', status)

    # Upload Snapshot to Cloudinary 
    upload_files('% s/% s.jpg' % (path,name))
    
    # Send Out Email and Text Alerts
    sendAlerts()

NOTE: We grayscale the image because the face recognizer doesn’t need color to determine facial features. We also store the snapshot image locally so we can add the face to the recognizer if the client wants to add the user later.

When defining our upload_files() function, we’re passing in the snapshot’s file path so Cloudinary knows where to upload the file from. We then get the response URL of where the image lives in the cloud. We send this url along with a user ID (count of Unknown user) over PubNub to our client application. The client application can then render the image of the snapshot from the Cloudinary URL.

def upload_files(msg):
    global count # Make global changes to count
    response = upload(msg, tags=DEFAULT_TAG) # Upload Image to Cloudinary
    url, options = cloudinary_url( 
        response['public_id'],
        format=response['format'],
        width=200,
        height=150,
        crop="fill"
    )
    dictionary = {"url": url, "ID": count}
    pubnub.publish().channel('global').message(dictionary).pn_async(publish_callback)
    count+=1 # Increment Unknown User Count

In order to publish with PubNub, we need to define a publish callback.

def publish_callback(result, status):
    pass
    # Handle PNPublishResult and PNStatus

To setup your Text and Email alerts, you’ll need to sign up for a free ClickSend account as well as a free SendGrid account to get your API keys.

Now you get to see the power and beauty behind PubNub Functions with our Partnered Blocks. Go ahead and visit both our ClickSend Block as well as our SendGrid Block. Through those links, PubNub will automatically generate a customizable PubNub Function.

The serverless, open-source code will completely handle the APIs for you. All you need to do is put in your API keys and you’re good to go!

Once you’ve set up your PubNub Functions, you can define a sendAlerts() function to publish a message, implementing your Text and Email alerts:

def sendAlerts():
    dictionary = {
    "to" : 'RECEIVING PHONE NUMBER',
    "body": "There is an unregistered user at your desk!"
    }
    pubnub.publish().channel('clicksend-text').message(dictionary).pn_async(publish_callback)

    dictionary = {
    "to": "EMAIL RECEIVER",
    "toname": "EMAIL SENDER",
    "subject": "INTRUDER ALERT",
    "text": "THERE IS AN UNREGISTERED USER AT YOUR DESK"
    }   
    pubnub.publish().channel('email-sendgrid-channel').message(dictionary).pn_async(publish_callback)

NOTE: In order to properly use a PubNub block, you need to publish over the same channel specified in your block (you can check this in your blocks Functions dashboard) as well as formatting the message payload properly (according to the block’s documentation).

Adding Users to Our Facetracker

When an Unregistered face is detected on our webcam, our Python script sends an email/text alert as well as a snapshot image to our client application.

We now want to add the ability to add a user’s face to our app’s “known_faces” database, so the user will no longer trigger our alert system. To do this, the client application must publish a message over PubNub.

To receive this message in our python application, we must subscribe to the channel the client is publishing from, and create a Subscriber Callback to handle the incoming message.

class MySubscribeCallback(SubscribeCallback):
    def status(self, pubnub, status):
        pass
        # The status object returned is always related to subscribe but could contain
        # information about subscribe, heartbeat, or errors
        # use the operationType to switch on different options
        if status.operation == PNOperationType.PNSubscribeOperation \
                or status.operation == PNOperationType.PNUnsubscribeOperation:
            if status.category == PNStatusCategory.PNConnectedCategory:
                pass
                # This is expected for a subscribe, this means there is no error or issue whatsoever
            elif status.category == PNStatusCategory.PNReconnectedCategory:
                pass
                # This usually occurs if subscribe temporarily fails but reconnects. This means
                # there was an error but there is no longer any issue
            elif status.category == PNStatusCategory.PNDisconnectedCategory:
                pass
                # This is the expected category for an unsubscribe. This means here
                # was no error in unsubscribing from everything
            elif status.category == PNStatusCategory.PNUnexpectedDisconnectCategory:
                pass
                # This is usually an issue with the internet connection, this is an error, handle
                # appropriately retry will be called automatically
            elif status.category == PNStatusCategory.PNAccessDeniedCategory:
                pass
                # This means that PAM does not allow this client to subscribe to this
                # channel and channel group configuration. This is another explicit error
            else:
                pass
                # This is usually an issue with the internet connection, this is an error, handle appropriately
                # retry will be called automatically
        elif status.operation == PNOperationType.PNSubscribeOperation:
            # Heartbeat operations can in fact have errors, so it is important to check first for an error.
            # For more information on how to configure heartbeat notifications through the status
            if status.is_error():
                pass
                # There was an error with the heartbeat operation, handle here
            else:
                pass
                # Heartbeat operation was successful
        else:
            pass
            # Encountered unknown status type
 
    def presence(self, pubnub, presence):
        pass  # handle incoming presence data
    def message(self, pubnub, message):
        addUser(message.message["ID"], message.message["name"])
 
 
pubnub.add_listener(MySubscribeCallback())
pubnub.subscribe().channels('ch1').execute()

NOTE: Above we assume the client is publishing the ID of the unknown user (for image file path) as well as the name of the user (to display below the user’s face).

With the parameters in hand, we can add the new user to our database.

def addUser(ID, name):
    global known_face_encodings, known_face_names, flag
    path = './Unknown_User' + str(ID) # Append User ID to File Path
    # Load User's picture and learn how to recognize it.
    user_image = face_recognition.load_image_file('% s.jpg' % (path)) # Load Image
    user_face_encoding = face_recognition.face_encodings(user_image)[0] # Encode Image
    known_face_encodings.append(user_face_encoding) # Add Encoded Image to 'Known Faces' Array
    known_face_names.append(name) # Append New User's Name to Database
    flag = 0 # Reset Unknown User Flag

React Native Code for Our Client Application

Setting Up Our Realtime React Native Environment

Install Xcode so we can build and simulate our app for IOS and Android Studio for Android.

Then install Node.js and watchman using Homebrew:

brew install node
brew install watchman

Install the React Native CLI with NPM:

npm install -g react-native-cli

To create a React Native App template, enter the React Native CLI command in your project’s directory:

react-native init client
cd client

Since we’re going to be using PubNub in our Client app to send and receive messages, we’ll need to install the PubNub React SDK,

npm install --save pubnub pubnub-react

and then link the library like so:

react-native link pubnub-react

Setting Up Realtime Pub/Sub Messaging

To start sending and receiving messages in realtime in our app, first import the PubNub React SDK.

import PubNubReact from 'pubnub-react';

Then import the TouchableOpacity and Image components from React Native,

import {
  StyleSheet,
  View,
  Text,
  TextInput,
  TouchableOpacity,
  Image,
} from 'react-native';

Now we add a constructor at the top of our App Component. The constructor will be responsible for setting up a PubNub instance with our Publish/Subscribe keys as well as initialize the following state variables:

• image – Snapshot image from an unknown user alert (we initialize it with a placeholder image until a Snapshot alert arrives).
• message – Incoming alert message from the face tracking app.
• text – Client user’s input for typing in the name of a user.
• count –  To keep track of which unknown user we are getting an alert from.

export default class App extends React.Component {

  constructor(props) {
    super(props)

    this.pubnub = new PubNubReact({
      publishKey: "YOUR PUBLISH KEY",
      subscribeKey: "YOUR SUBSCRIBE KEY"
    })

    //Base State
    this.state = {
      image: require('./assets/PLACEHOLDER_IMAGE.jpg'),
      message: '',
      text: '',
      count: 0,
    }

    this.pubnub.init(this);
  }

/// .......VVV REST OF THE CODE VVV.......///

When our client app first fires up, we declare an asynchronous function that will subscribe to our face tracking alert channel and handle message events. In this case, we receive the ID (count of unknown user) as well as the snapshot image URL (from Cloudinary) of the unknown user.

async componentDidMount() {
  this.setUpApp()    
}

async setUpApp(){
  this.pubnub.getMessage("global", msg => {
    this.setState({count: msg.message.ID})
    this.setState({image: msg.message.url})
  })

  this.pubnub.subscribe({
    channels: ["global"],
    withPresence: false
  });
}

Once that image is received by the mobile app, the client user should then be able to add the unknown user to the face tracker’s “known_faces” database. We can define a function to set the state of the client user’s input for the unknown user’s name.

 handleText = (name) => {
   this.setState({ text: name })
}

We can also write a function to publish the added user’s name along with the added user’s ID.

 publishName = (text) => {
  this.pubnub.publish({
    message: {
      ID: this.state.count,
      name: text,
    },
    channel: "ch1"
  });
}

Creating and Rendering App Components

At the top of our screen we’ll render the snapshot image from an incoming “Unknown User” Alert. The source of this image will be a URI we grabbed from the alert message that we saved to state.

<Image
  source={{uri: this.state.image}}
  style={{width: 250, height: 250}}
/>

Below that, we can display a suitable caption.

<Text>{'Do You Know This Person?'}</Text>

We then create a Text Input component to store the name of the User to be added to the face tracker, if the client decides to do so.

<TextInput style = {styles.input}
         underlineColorAndroid = "transparent"
         placeholder = "Name"
         placeholderTextColor = "#9a73ef"
         autoCapitalize = "none"
         onChangeText = {this.handleText}/>

Lastly, we create a submit button with TouchableOpacity to publish the added user’s name for our Face Tracker to add to the system:

<TouchableOpacity
    style = {styles.submitButton}
    onPress = {
      () => this.publishName(this.state.text)
    }>
      <Text>"SUBMIT"</Text>
</TouchableOpacity>

Wrap all those components in a <View> </View> and you’re good to go!

Running the Program

First, start up the React Native client application on Android or iOS by opening a terminal in the client app’s directory.

react-native run-ios

or

react-native run-android

Then, in another terminal window, run the Python face tracker.

python facetracker.py

If You’re Still Hungry For More…

Feel free to send us any of your questions, concerns, or comments at devrel@pubnub.com.

If you’re still hungry for more PubNub Machine Learning content, here are some other articles that you may be interested in:

• Realtime Machine Learning: Online Learning with PubNub
• How PubNub Can Turbocharge Your Machine Learning Algorithm
• The Cognitive Era: Big Data, Realtime, and the Edge (Computing)

The post FaceTracking Desktop Security System with OpenCV, React Native, Cloudinary, ClickSend, SendGrid and PubNub appeared first on PubNub.

What is a WebSocket?

WebSocket is its own layer 7 protocol, similar to HTTP. WebSockets create a full-duplex connection for sending messages from client to server, or server to client at any instant. This pattern is far superior to HTTP request-response when an application requires systems to get the latest data ASAP.

When Should I Write WebSocket Code?

Besides a realtime stock or cryptocurrency tracker app, other common realtime use cases for WebSockets are:

• Chat apps
• Live geolocation tracking on a map
• Live audience interaction
• Online auctions bid submission
• IoT device updates
• WebRTC call orchestration

WebSockets create a TCP socket connection between multiple devices or processes. Similar functionality can be implemented using HTTP Long Polling or using a service like PubNub. Let’s go over some basic socket and WebSocket programming with Node.js.

Node.js Socket Example

Let’s say you need to write a server application, and you chose Node.js as your programming language. Your users can be any type of client, like a web browser, mobile app, IoT device, Node.js client, or anything that knows TCP.

You need to serve assets to your users over HTTP, but you also need to provide them with streams for bi-directional messaging. We can accomplish this in a single Node.js server app!

The code from the video, and also this article is available in my Node.js WebSocket Examples GitHub Repository.

First we’ll go over some plain socket code, followed by WebSocket code. If you already serve assets with something like Express.js, Hapi, or the native Node.js HTTP library, we can jump into the socket code.

Socket Server JavaScript Code

// Node.js socket server script
const net = require('net');

// Create a server object
const server = net.createServer((socket) => {
  socket.on('data', (data) => {
    console.log(data.toString());
  });

  socket.write('SERVER: Hello! This is server speaking.\n');
  socket.end('SERVER: Closing connection now.\n');
}).on('error', (err) => {
  console.error(err);
});

// Open server on port 9898
server.listen(9898, () => {
  console.log('opened server on', server.address().port);
});

This script runs a Node.js socket server on port 9898. Whenever a client connects to this server app (IP_ADDRESS:9898) the server sends the client a string over the open socket. It says “SERVER: Hello! This is server speaking.” Whenever the client sends some data to the server, the Node.js script logs the contents in the ‘data’ event handler.

Socket Client JavaScript Code

Here we have our Node.js socket client script, which can connect to the Node.js socket server above.

// Node.js socket client script
const net = require('net');

// Connect to a server @ port 9898
const client = net.createConnection({ port: 9898 }, () => {
  console.log('CLIENT: I connected to the server.');
  client.write('CLIENT: Hello this is client!');
});

client.on('data', (data) => {
  console.log(data.toString());
  client.end();
});

client.on('end', () => {
  console.log('CLIENT: I disconnected from the server.');
});

The client script attempts to connect to localhost:9898. If the connection succeeds, then the client sends a string to the server over the open socket. It says “CLIENT: Hello this is client!” Whenever the server sends some data to the client, the client logs it in the ‘data’ event handler.

This is what the output looks like for client and server Node.js socket scripts running on the command line.

Node.js WebSocket Example

Writing socket code is fun, but when you’re trying to implement it in a web browser, it’s kind of complicated. This issue has been addressed by all major browsers in their action to support the WebSocket protocol out of the box! This way, web pages that use sockets can load really fast because the front end libraries for handling the protocol are already in the browser applications. No need to fetch big JS libraries whenever a user visits your realtime app web page.

Node.js WebSocket Server

Let’s swap out our Node.js socket server code for WebSocket server code! This way, we will be able to easily serve our web browser users. We’ll go over some vanilla JS for WebSockets that can be implemented in something like a React.js application.

This code uses the Node.js native “http” library and a 3rd party WebSocket NPM package to create a WebSocket server. It has the same functionality as the socket script we wrote earlier. This time, we are using the official WebSocket protocol to bi-directionally send our data between client and server.

// Node.js WebSocket server script
const http = require('http');
const WebSocketServer = require('websocket').server;

const server = http.createServer();
server.listen(9898);

const wsServer = new WebSocketServer({
    httpServer: server
});

wsServer.on('request', function(request) {
    const connection = request.accept(null, request.origin);

    connection.on('message', function(message) {
      console.log('Received Message:', message.utf8Data);
      connection.sendUTF('Hi this is WebSocket server!');
    });
    connection.on('close', function(reasonCode, description) {
        console.log('Client has disconnected.');
    });
});

Node.js WebSocket Browser Client

Next, we have our HTML file that loads up in client web browsers. Notice that the WebSocket class in the browser JS has no declaration. This is because modern browsers give developers automatic access to this class in their front-end JavaScript!

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket Playground</title>
</head>
<body>

</body>
<script>

const ws = new WebSocket('ws://localhost:9898/');

ws.onopen = function() {
    console.log('WebSocket Client Connected');
    ws.send('Hi this is web client.');
};

ws.onmessage = function(e) {
  console.log("Received: '" + e.data + "'");
};

</script>
</html>

We can get our fun client-server handshake example going fast! Here’s what the output for the server script and the web browser JS console look like:

Peer-to-Peer Message Passing

The above samples are intuitive code implementations for realtime application development. What if we want to stream data from user to user? What if we want to do this without implementing the complicated routing logic on our server to connect two or more users? We can accomplish all of this cheaply, securely, and without having to spin-up expensive infrastructure.

We have access to awesome, hosted, realtime infrastructure with PubNub. We can infinitely scale to any user volume. PubNub offers low cost, transaction-based pricing with easy to use messaging APIs. Let’s take a look at an example for peer-to-peer messaging. By the way, this can also be implemented to stream data from client to server, or server to client, in addition to peer-to-peer.

Before you try the following scripts you must get your free PubNub API keys. They work for up to 1 million free transactions per month, forever. Use this form to get free API keys right now.

PubNub Data Streaming

We can bi-directionally send data between services, clients, or server apps using the PubNub global data stream network. There is an SDK for every popular language and device. Here is the basic browser JS or Node.js code for utilizing the Pub/Sub network. This publishes a message whenever the user hits the return key.

const PubNub = require('pubnub'); // or in browser: <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.24.4.js"></script>

const pubnub = new PubNub({
    publishKey: 'your_pubnub_publish_api_key_here',
    subscribeKey: 'your_pubnub_subscribe_api_key_here'
});

pubnub.subscribe({
    channels: ['my_channel']
});

pubnub.addListener({
    message: (pubnubMessage) => {
        console.log('New Message:', pubnubMessage.message);
    }
});

// Use Control + C to end the program
process.stdin.on('data', (key) => {
    // When the user presses the return key
    if (key.toString() === '\n') {
        pubnub.publish({
            message: 'Hello from client 1!',
            channel: 'my_channel'
        });
    }
});

Note that the “process” object cannot be accessed in web browser JS, but a similar key press event handler can accomplish the same functionality.

object.addEventListener('keypress',(event) => {});

PubNub Node.js SDK

Here is the documentation for the PubNub JavaScript SDK.

When we execute the above script in 2 terminal windows, we can see realtime Pub/Sub in action. I made a second script with the same code, except the published message indicates that it comes from client number “2.” Be sure to install the PubNub Node.js SDK before you try executing the scripts on your command line.

npm install pubnub

That’s all there is to it. I hope you were able to glean some valuable insights from this peer-to-peer, client-to-server, and server-to-client WebSocket data streaming tutorial. Please reach out to us at devrel@pubnub.com if you need assistance or have some questions about building a realtime application. We love hearing your ideas!

For more on implementing JavaScript with PubNub, take a look at our React Native blog post tutorials for realtime geolocation tracking, a realtime chat app, and more! There is also a blog post about socket programming in Python. Thanks for reading! If you liked this post, subscribe to our newsletter!

The post Node.js WebSocket Programming Examples appeared first on PubNub.