Welcome!

Java IoT Authors: Elizabeth White, Yeshim Deniz, Pat Romanski, Liz McMillan, Paul Simmons

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
Explosive growth in connected devices. Enormous amounts of data for collection and analysis. Critical use of data for split-second decision making and actionable information. All three are factors in making the Internet of Things a reality. Yet, any one factor would have an IT organization pondering its infrastructure strategy. How should your organization enhance its IT framework to enable an Internet of Things implementation? In his session at @ThingsExpo, James Kirkland, Red Hat's Chief Archi...
The current age of digital transformation means that IT organizations must adapt their toolset to cover all digital experiences, beyond just the end users’. Today’s businesses can no longer focus solely on the digital interactions they manage with employees or customers; they must now contend with non-traditional factors. Whether it's the power of brand to make or break a company, the need to monitor across all locations 24/7, or the ability to proactively resolve issues, companies must adapt to...
In his keynote at 18th Cloud Expo, Andrew Keys, Co-Founder of ConsenSys Enterprise, provided an overview of the evolution of the Internet and the Database and the future of their combination – the Blockchain. Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life settl...
Organizations planning enterprise data center consolidation and modernization projects are faced with a challenging, costly reality. Requirements to deploy modern, cloud-native applications simultaneously with traditional client/server applications are almost impossible to achieve with hardware-centric enterprise infrastructure. Compute and network infrastructure are fast moving down a software-defined path, but storage has been a laggard. Until now.
In his general session at 19th Cloud Expo, Manish Dixit, VP of Product and Engineering at Dice, discussed how Dice leverages data insights and tools to help both tech professionals and recruiters better understand how skills relate to each other and which skills are in high demand using interactive visualizations and salary indicator tools to maximize earning potential. Manish Dixit is VP of Product and Engineering at Dice. As the leader of the Product, Engineering and Data Sciences team at D...
DXWorldEXPO LLC announced today that the upcoming DXWorldEXPO | CloudEXPO New York event will feature 10 companies from Poland to participate at the "Poland Digital Transformation Pavilion" on November 12-13, 2018.
Digital Transformation is much more than a buzzword. The radical shift to digital mechanisms for almost every process is evident across all industries and verticals. This is often especially true in financial services, where the legacy environment is many times unable to keep up with the rapidly shifting demands of the consumer. The constant pressure to provide complete, omnichannel delivery of customer-facing solutions to meet both regulatory and customer demands is putting enormous pressure on...
The best way to leverage your CloudEXPO | DXWorldEXPO presence as a sponsor and exhibitor is to plan your news announcements around our events. The press covering CloudEXPO | DXWorldEXPO will have access to these releases and will amplify your news announcements. More than two dozen Cloud companies either set deals at our shows or have announced their mergers and acquisitions at CloudEXPO. Product announcements during our show provide your company with the most reach through our targeted audienc...
JETRO showcased Japan Digital Transformation Pavilion at SYS-CON's 21st International Cloud Expo® at the Santa Clara Convention Center in Santa Clara, CA. The Japan External Trade Organization (JETRO) is a non-profit organization that provides business support services to companies expanding to Japan. With the support of JETRO's dedicated staff, clients can incorporate their business; receive visa, immigration, and HR support; find dedicated office space; identify local government subsidies; get...
DXWorldEXPO LLC announced today that All in Mobile, a mobile app development company from Poland, will exhibit at the 22nd International CloudEXPO | DXWorldEXPO. All In Mobile is a mobile app development company from Poland. Since 2014, they maintain passion for developing mobile applications for enterprises and startups worldwide.
@DevOpsSummit at Cloud Expo, taking place November 12-13 in New York City, NY, is co-located with 22nd international CloudEXPO | first international DXWorldEXPO and will feature technical sessions from a rock star conference faculty and the leading industry players in the world.
"Akvelon is a software development company and we also provide consultancy services to folks who are looking to scale or accelerate their engineering roadmaps," explained Jeremiah Mothersell, Marketing Manager at Akvelon, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
As data explodes in quantity, importance and from new sources, the need for managing and protecting data residing across physical, virtual, and cloud environments grow with it. Managing data includes protecting it, indexing and classifying it for true, long-term management, compliance and E-Discovery. Commvault can ensure this with a single pane of glass solution – whether in a private cloud, a Service Provider delivered public cloud or a hybrid cloud environment – across the heterogeneous enter...
DXWorldEXPO LLC announced today that ICC-USA, a computer systems integrator and server manufacturing company focused on developing products and product appliances, will exhibit at the 22nd International CloudEXPO | DXWorldEXPO. DXWordEXPO New York 2018, colocated with CloudEXPO New York 2018 will be held November 11-13, 2018, in New York City. ICC is a computer systems integrator and server manufacturing company focused on developing products and product appliances to meet a wide range of ...
More and more brands have jumped on the IoT bandwagon. We have an excess of wearables – activity trackers, smartwatches, smart glasses and sneakers, and more that track seemingly endless datapoints. However, most consumers have no idea what “IoT” means. Creating more wearables that track data shouldn't be the aim of brands; delivering meaningful, tangible relevance to their users should be. We're in a period in which the IoT pendulum is still swinging. Initially, it swung toward "smart for smart...
Headquartered in Plainsboro, NJ, Synametrics Technologies has provided IT professionals and computer systems developers since 1997. Based on the success of their initial product offerings (WinSQL and DeltaCopy), the company continues to create and hone innovative products that help its customers get more from their computer applications, databases and infrastructure. To date, over one million users around the world have chosen Synametrics solutions to help power their accelerated business or per...
Dion Hinchcliffe is an internationally recognized digital expert, bestselling book author, frequent keynote speaker, analyst, futurist, and transformation expert based in Washington, DC. He is currently Chief Strategy Officer at the industry-leading digital strategy and online community solutions firm, 7Summits.
In an era of historic innovation fueled by unprecedented access to data and technology, the low cost and risk of entering new markets has leveled the playing field for business. Today, any ambitious innovator can easily introduce a new application or product that can reinvent business models and transform the client experience. In their Day 2 Keynote at 19th Cloud Expo, Mercer Rowe, IBM Vice President of Strategic Alliances, and Raejeanne Skillern, Intel Vice President of Data Center Group and ...
Founded in 2000, Chetu Inc. is a global provider of customized software development solutions and IT staff augmentation services for software technology providers. By providing clients with unparalleled niche technology expertise and industry experience, Chetu has become the premiere long-term, back-end software development partner for start-ups, SMBs, and Fortune 500 companies. Chetu is headquartered in Plantation, Florida, with thirteen offices throughout the U.S. and abroad.
Bill Schmarzo, author of "Big Data: Understanding How Data Powers Big Business" and "Big Data MBA: Driving Business Strategies with Data Science," is responsible for setting the strategy and defining the Big Data service offerings and capabilities for EMC Global Services Big Data Practice. As the CTO for the Big Data Practice, he is responsible for working with organizations to help them identify where and how to start their big data journeys. He's written several white papers, is an avid blogge...