Welcome!

Java IoT Authors: Pat Romanski, Elizabeth White, Liz McMillan, Yeshim Deniz, Frank Lupo

Related Topics: Java IoT, Agile Computing

Java IoT: Blog Feed Post

Real-Time Web Communications In Action: A Tutorial

WebSocket, Big Data, and Non-Blocking Server-Side I/O with Kaazing, MongoDB, and Node.js

In this example, we look at how real-time Web communications can work well with a non-blocking JavaScript back-end server and a NoSQL database. Our demo is a simple drawing app.

If all you use is WebSocket with simple pub-sub messaging, you can already achieve pretty amazing things with drawing. For example, you can share a drawing board among multiple browser clients and while viewing each other’s drawings in real time.

Screen Shot 2013-06-03 at 12.05.19 PM

If you add a server-side component to it, you can do some central coordination and processing. And if on top of that you use a persistent storage, you can record all your real-time interactions to the database, and if needed play it all back. Icing on the cake is the ability of setting the replay speed: speeding it up or slowing it down.

Here’s what we did:

Read on to see how we did it.

The Architecture

Now let’s see how it’s all done.

The browsers connect to the Kaazing WebSocket Gateway. We use a higher level pub/sub API, JMS; this keeps our JavaScript code, running in the browser, simple. The JMS Edition of Kaazing comes out-of-the-box with an open source message broker, Apache ActiveMQ. The primary role of the message broker is to route the messages between the message publishers and the message subscribers. In addition to the browsers, we have Node.js as well connecting to the message broker.

To achieve all this, we use a STOMP (Simple or Streaming Text Oriented Protocol) connector package for Node.js. By doing so Node.js will receive the same messages that the browsers receive. As the messages arrive to Node.js, they’re quickly passed on to MongoDB, which in turn will persist them. When the playback time comes, the messages are retrieved from MongoDB, and Node.js schedules and plays them back to the message broker, so they can be sent to the browsers for display.


Installing Kaazing and the Multi-Client WebSocket Drawing App

The simplest way of getting started is by installing the WebSocket app. To do so, you need to get a WebSocket server. You can download, install, and start a fully functional unlimited developer licensed Kaazing WebSocket Gateway in a few minutes. The simple steps are documented and shown here. Kaazing comes in various flavors (editions). As mentioned above, we use the JMS Edition, bundled with the open source Apache ActiveMQ JMS message broker, giving us the power of messaging on top of HTML5 WebSocket. Once you have the WebSocket server and the message broker up and running, all you need to do is copy the application code into a sub-directory: $GATEWAH_HOME/web/extras. We called ours draw. You can download the application from github.

Screen Shot 2013-06-04 at 9.51.28 AM

After starting up the Kaazing WebSocket Gateway, you’ll be able to access the application through the following URL:

http://YOUR_IP_ADDRESS:8001/draw

For example:

http://192.168.4.106:8001/draw

This will invoke the index.html file, pulling in the required JavaScript and CSS files from the /js and /css directories.

At this point, you have a collaborative mini drawing app. The app uses simple color coding: red is used to display drawing happening in this browser, and yellow is used when the drawing is originating from somewhere else, that is another browser window or played back from the database.

Installing MongoDB

mongodbThe next step is installing MongoDB, an open source NoSQL document database. It’s as simple as it gets, and is all documented here.

Installing Node.js

nodeThe last component is Node.js, an event-driven, non-blocking I/O server, allowing you to build data-intensive real-time apps in a lightweight manner. Node.js uses JavaScript on the server side.

The Application

Now, let’s walk through how the app was built.

HTML5 App in the Browser

The client-side HTML5 app consists of a couple of simple files: index.html, js/draw.js, and css/draw.css.

The HTML file renders the visible objects (canvas, button, and speed slider) on the page, the CSS file sets the visual attributes for them.

The draw.js file contains all the application logic. On the one hand it detects mouse gestures and takes care of the drawing, on the other hand it handles the communication with the message broker: it publishes messages when you’re drawing on the canvas, and consumes messages when somebody else is drawing or when a previously recorded drawing is played back from MongoDB and Node.js.

The browser can send two “types” of messages: control messages and drawing messages. Control messages are startRecordingstopRecordingplayBack, and deleteRecording.

If you’d like to learn more how you can use WebSocket with pub/sub messaging to build collaborative apps, this Tutorial is a great starting point.

Server-Side Code in Node.js

The app running in Node.js communicates with the message broker through STOMP. The server-side code is located in server.js. Before starting it, make sure you have Apache ActiveMQ running, as the server is attempting to connect to upon start. To start the server, simply run:

$>node server.js

After successfully connecting to it, the app will subscribe to drawTopic (/topic/drawTopic) that the browsers are publishing to. When the browser sends a control message, Node.js works hand-in-hand with MongoDB.

Recording

When recording, we save the coordinates of the pixels, along with the timestamp. Saving the timestamp will allow us to play back the recording in a properly timed manner (longer pauses in the drawing are recorded and played back as such).

Playing Back

The play-back functionality is done by Node.js querying the contents of the database (pixels to be drawn), and then scheduling the messages for publishing through the message broker. The messages will then eventually result in actual pixels drawn on the canvas(es) in the browser(s). We use the timestamp to set the delay between the messages.

Deleting the Recording

We can very easily delete the previous recording by deleting the collection from MongoDB.

More Information

  • Check out the project on github.
  • Try following the tutorial for building a simple peer-to-peer application yourself.
  • Learn more about Kaazing WebSocket Gateway – JMS Edition, which is a messaging over WebSocket solution using the Java Message Service API.
  • Check out the API documentation and other how-tos for building clients using Kaazing WebSocket Gateway – JMS Edition.

 

More Stories By Kaazing Blog

Kaazing is helping define the future of the event-driven enterprise by accelerating the Web for the Internet of Things.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


@ThingsExpo Stories
Join IBM November 1 at 21st Cloud Expo at the Santa Clara Convention Center in Santa Clara, CA, and learn how IBM Watson can bring cognitive services and AI to intelligent, unmanned systems. Cognitive analysis impacts today’s systems with unparalleled ability that were previously available only to manned, back-end operations. Thanks to cloud processing, IBM Watson can bring cognitive services and AI to intelligent, unmanned systems. Imagine a robot vacuum that becomes your personal assistant tha...
SYS-CON Events announced today that TidalScale will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. TidalScale is the leading provider of Software-Defined Servers that bring flexibility to modern data centers by right-sizing servers on the fly to fit any data set or workload. TidalScale’s award-winning inverse hypervisor technology combines multiple commodity servers (including their ass...
As hybrid cloud becomes the de-facto standard mode of operation for most enterprises, new challenges arise on how to efficiently and economically share data across environments. In his session at 21st Cloud Expo, Dr. Allon Cohen, VP of Product at Elastifile, will explore new techniques and best practices that help enterprise IT benefit from the advantages of hybrid cloud environments by enabling data availability for both legacy enterprise and cloud-native mission critical applications. By rev...
Infoblox delivers Actionable Network Intelligence to enterprise, government, and service provider customers around the world. They are the industry leader in DNS, DHCP, and IP address management, the category known as DDI. We empower thousands of organizations to control and secure their networks from the core-enabling them to increase efficiency and visibility, improve customer service, and meet compliance requirements.
With major technology companies and startups seriously embracing Cloud strategies, now is the perfect time to attend 21st Cloud Expo October 31 - November 2, 2017, at the Santa Clara Convention Center, CA, and June 12-14, 2018, at the Javits Center in New York City, NY, and learn what is going on, contribute to the discussions, and ensure that your enterprise is on the right path to Digital Transformation.
SYS-CON Events announced today that N3N will exhibit at SYS-CON's @ThingsExpo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. N3N’s solutions increase the effectiveness of operations and control centers, increase the value of IoT investments, and facilitate real-time operational decision making. N3N enables operations teams with a four dimensional digital “big board” that consolidates real-time live video feeds alongside IoT sensor data a...
Amazon is pursuing new markets and disrupting industries at an incredible pace. Almost every industry seems to be in its crosshairs. Companies and industries that once thought they were safe are now worried about being “Amazoned.”. The new watch word should be “Be afraid. Be very afraid.” In his session 21st Cloud Expo, Chris Kocher, a co-founder of Grey Heron, will address questions such as: What new areas is Amazon disrupting? How are they doing this? Where are they likely to go? What are th...
In his Opening Keynote at 21st Cloud Expo, John Considine, General Manager of IBM Cloud Infrastructure, will lead you through the exciting evolution of the cloud. He'll look at this major disruption from the perspective of technology, business models, and what this means for enterprises of all sizes. John Considine is General Manager of Cloud Infrastructure Services at IBM. In that role he is responsible for leading IBM’s public cloud infrastructure including strategy, development, and offering ...
Digital transformation is changing the face of business. The IDC predicts that enterprises will commit to a massive new scale of digital transformation, to stake out leadership positions in the "digital transformation economy." Accordingly, attendees at the upcoming Cloud Expo | @ThingsExpo at the Santa Clara Convention Center in Santa Clara, CA, Oct 31-Nov 2, will find fresh new content in a new track called Enterprise Cloud & Digital Transformation.
SYS-CON Events announced today that NetApp has been named “Bronze Sponsor” of SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. NetApp is the data authority for hybrid cloud. NetApp provides a full range of hybrid cloud data services that simplify management of applications and data across cloud and on-premises environments to accelerate digital transformation. Together with their partners, NetApp emp...
Smart cities have the potential to change our lives at so many levels for citizens: less pollution, reduced parking obstacles, better health, education and more energy savings. Real-time data streaming and the Internet of Things (IoT) possess the power to turn this vision into a reality. However, most organizations today are building their data infrastructure to focus solely on addressing immediate business needs vs. a platform capable of quickly adapting emerging technologies to address future ...
Most technology leaders, contemporary and from the hardware era, are reshaping their businesses to do software. They hope to capture value from emerging technologies such as IoT, SDN, and AI. Ultimately, irrespective of the vertical, it is about deriving value from independent software applications participating in an ecosystem as one comprehensive solution. In his session at @ThingsExpo, Kausik Sridhar, founder and CTO of Pulzze Systems, will discuss how given the magnitude of today's applicati...
As popularity of the smart home is growing and continues to go mainstream, technological factors play a greater role. The IoT protocol houses the interoperability battery consumption, security, and configuration of a smart home device, and it can be difficult for companies to choose the right kind for their product. For both DIY and professionally installed smart homes, developers need to consider each of these elements for their product to be successful in the market and current smart homes.
SYS-CON Events announced today that Avere Systems, a leading provider of enterprise storage for the hybrid cloud, will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Avere delivers a more modern architectural approach to storage that doesn't require the overprovisioning of storage capacity to achieve performance, overspending on expensive storage media for inactive data or the overbui...
Widespread fragmentation is stalling the growth of the IIoT and making it difficult for partners to work together. The number of software platforms, apps, hardware and connectivity standards is creating paralysis among businesses that are afraid of being locked into a solution. EdgeX Foundry is unifying the community around a common IoT edge framework and an ecosystem of interoperable components.
SYS-CON Events announced today that Avere Systems, a leading provider of hybrid cloud enablement solutions, will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Avere Systems was created by file systems experts determined to reinvent storage by changing the way enterprises thought about and bought storage resources. With decades of experience behind the company’s founders, Avere got its ...
High-velocity engineering teams are applying not only continuous delivery processes, but also lessons in experimentation from established leaders like Amazon, Netflix, and Facebook. These companies have made experimentation a foundation for their release processes, allowing them to try out major feature releases and redesigns within smaller groups before making them broadly available. In his session at 21st Cloud Expo, Brian Lucas, Senior Staff Engineer at Optimizely, will discuss how by using...
In this strange new world where more and more power is drawn from business technology, companies are effectively straddling two paths on the road to innovation and transformation into digital enterprises. The first path is the heritage trail – with “legacy” technology forming the background. Here, extant technologies are transformed by core IT teams to provide more API-driven approaches. Legacy systems can restrict companies that are transitioning into digital enterprises. To truly become a lead...
SYS-CON Events announced today that CAST Software will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. CAST was founded more than 25 years ago to make the invisible visible. Built around the idea that even the best analytics on the market still leave blind spots for technical teams looking to deliver better software and prevent outages, CAST provides the software intelligence that matter ...
SYS-CON Events announced today that Daiya Industry will exhibit at the Japanese Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Ruby Development Inc. builds new services in short period of time and provides a continuous support of those services based on Ruby on Rails. For more information, please visit https://github.com/RubyDevInc.