Welcome!

IoT User Interface Authors: John Basso, Elizabeth White, Liz McMillan, Pat Romanski, AppDynamics Blog

Related Topics: Java IoT, Industrial IoT, Microservices Expo, Microsoft Cloud, IoT User Interface, Agile Computing

Java IoT: Blog Feed Post

Building a Simple Peer-to-Peer WebSocket App – Part 1

A Step-by-Step Tutorial

This tutorial series walks you through the simple steps of building an HTML5 WebSocket app, demonstrating the power of the publish/subscribe development pattern directly in JavaScript. Our sample is almost as simple as a Chat app, the “Hello World” app of the WebSocket world, but is a tad more visual and dynamic.

After trying out the completed application, you can either jump in the code and play with it right away, or move on to Part 2 (coming soon) of this tutorial for a step-by-step guide.

About the Environment
This tutorial requires a WebSocket server. We will use http://tutorial.kaazing.com, which hosts the JMS Edition of Kaazing WebSocket Gateway, Kaazing’s high-performance enterprise-grade WebSocket Server. All you’ll need to do is create a WebSocket connection to this server directly from your browser and start “talking” (read: send messages) to it from your browser. On the client side, you can use any modern browser, supported by JSFiddle (learn more about JSFiddle).

Getting Started
First, to understand how the tutorial environment in JSFiddle works, open up the completed demo in JSFiddle. If you’re using a tablet or a smart phone, use the full page mode of the demo.

JSFiddle provides a simple, integrated environment to edit the source of your web pages and apps. It has four panes:

  • Top-left: HTML code (very minimal HTML code in our demo)
  • Bottom-left: JavaScript code
  • Top-right: CSS code (empty in our case)
  • Bottom-right: Result

In the bottom right pane, you can interact with the completed app. Using the slider, you can change the size of the image. Now, open another browser window, pointing to the same JSFiddle demo URL. You can also use a tablet or a smart phone. Position your two browser windows side-by-side. As you adjust the slider in the bottom-right pane, right above the image in one browser window, the slider position and image size change in the other one. They’re kept in sync.

The browsers are communicating with the WebSocket gateway which is running in Amazon’s EC2 cloud, hosted in North Virginia, USA. When you move the slider, messages travel from your browser, to the WebSocket gateway, and back to the other browser.

Watch this video demonstrating the completed application (if the letters are blurry, switching the video to HD helps):

At this point, you can make any changes to the application. Click the Run button to test out your changes. To roll back to the original state, simply reload the original JSFiddle demo URL.

Note: If you see the image resize without you moving the slider, there’s a chance that somebody else is experimenting with the tutorial as well. To ensure that you’re not interfering with anybody else, change the topic name to something unique to you, for example by appending your name. Locate the following line in the bottom-left pane, towards the top of the file:

 

var TOPIC_NAME = "/topic/myTopic";

 

Modify the name of the topic. For example:

 

var TOPIC_NAME = "/topic/PeterTopic";

Test your code by clicking the Run button.

As another test, you can also change the application’s logging behavior. To give it a try, change the value of the IN_DEBUG_MODE variable to false, located in the bottom-left pane towards the top of the file. Original line:

var IN_DEBUG_MODE = true;

After the changes:

var IN_DEBUG_MODE = false;

Test your code by clicking the Run button.

In Part 2 (coming soon) you can learn about the demo code and how quickly and easily you can build real-time web applications with Web messaging.

Read the original blog entry...

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.

@CloudExpo Stories
"We've discovered that after shows 80% if leads that people get, 80% of the conversations end up on the show floor, meaning people forget about it, people forget who they talk to, people forget that there are actual business opportunities to be had here so we try to help out and keep the conversations going," explained Jeff Mesnik, Founder and President of ContentMX, in this SYS-CON.tv interview at 18th Cloud Expo, held June 7-9, 2016, at the Javits Center in New York City, NY.
SYS-CON Events announced today that Isomorphic Software will exhibit at DevOps Summit at 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. Isomorphic Software provides the SmartClient HTML5/AJAX platform, the most advanced technology for building rich, cutting-edge enterprise web applications for desktop and mobile. SmartClient combines the productivity and performance of traditional desktop software with the simp...
“Being the one true cloud-agnostic and storage-agnostic software solution, more and more customers are coming to Commvault and saying ' What do you recommend? What's your best practice for implementing cloud?” explained Randy De Meno, Chief Technologist at Commvault, in this SYS-CON.tv interview at 18th Cloud Expo, held June 7-9, 2016, at the Javits Center in New York City, NY.
“delaPlex Software provides software outsourcing services. We have a hybrid model where we have onshore developers and project managers that we can place anywhere in the U.S. or in Europe,” explained Manish Sachdeva, CEO at delaPlex Software, in this SYS-CON.tv interview at @ThingsExpo, held June 7-9, 2016, at the Javits Center in New York City, NY.
"When you think about the data center today, there's constant evolution, The evolution of the data center and the needs of the consumer of technology change, and they change constantly," stated Matt Kalmenson, VP of Sales, Service and Cloud Providers at Veeam Software, in this SYS-CON.tv interview at 18th Cloud Expo, held June 7-9, 2016, at the Javits Center in New York City, NY.
From wearable activity trackers to fantasy e-sports, data and technology are transforming the way athletes train for the game and fans engage with their teams. In his session at @ThingsExpo, will present key data findings from leading sports organizations San Francisco 49ers, Orlando Magic NBA team. By utilizing data analytics these sports orgs have recognized new revenue streams, doubled its fan base and streamlined costs at its stadiums. John Paul is the CEO and Founder of VenueNext. Prior ...
IoT is rapidly changing the way enterprises are using data to improve business decision-making. In order to derive business value, organizations must unlock insights from the data gathered and then act on these. In their session at @ThingsExpo, Eric Hoffman, Vice President at EastBanc Technologies, and Peter Shashkin, Head of Development Department at EastBanc Technologies, discussed how one organization leveraged IoT, cloud technology and data analysis to improve customer experiences and effi...
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.
The Internet of Things will challenge the status quo of how IT and development organizations operate. Or will it? Certainly the fog layer of IoT requires special insights about data ontology, security and transactional integrity. But the developmental challenges are the same: People, Process and Platform and how we integrate our thinking to solve complicated problems. In his session at 19th Cloud Expo, Craig Sproule, CEO of Metavine, will demonstrate how to move beyond today's coding paradigm ...
Let’s face it, embracing new storage technologies, capabilities and upgrading to new hardware often adds complexity and increases costs. In his session at 18th Cloud Expo, Seth Oxenhorn, Vice President of Business Development & Alliances at FalconStor, discussed how a truly heterogeneous software-defined storage approach can add value to legacy platforms and heterogeneous environments. The result reduces complexity, significantly lowers cost, and provides IT organizations with improved efficienc...
"We view the cloud not really as a specific technology but as a way of doing business and that way of doing business is transforming the way software, infrastructure and services are being delivered to business," explained Matthew Rosen, CEO and Director at Fusion, in this SYS-CON.tv interview at 18th Cloud Expo, held June 7-9, 2016, at the Javits Center in New York City, NY.
Internet of @ThingsExpo, taking place November 1-3, 2016, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with the 19th International Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world and ThingsExpo Silicon Valley Call for Papers is now open.
Big Data engines are powering a lot of service businesses right now. Data is collected from users from wearable technologies, web behaviors, purchase behavior as well as several arbitrary data points we’d never think of. The demand for faster and bigger engines to crunch and serve up the data to services is growing exponentially. You see a LOT of correlation between “Cloud” and “Big Data” but on Big Data and “Hybrid,” where hybrid hosting is the sanest approach to the Big Data Infrastructure pro...
"My role is working with customers, helping them go through this digital transformation. I spend a lot of time talking to banks, big industries, manufacturers working through how they are integrating and transforming their IT platforms and moving them forward," explained William Morrish, General Manager Product Sales at Interoute, in this SYS-CON.tv interview at 18th Cloud Expo, held June 7-9, 2016, at the Javits Center in New York City, NY.
In his session at 18th Cloud Expo, Sagi Brody, Chief Technology Officer at Webair Internet Development Inc., and Logan Best, Infrastructure & Network Engineer at Webair, focused on real world deployments of DDoS mitigation strategies in every layer of the network. He gave an overview of methods to prevent these attacks and best practices on how to provide protection in complex cloud platforms. He also outlined what we have found in our experience managing and running thousands of Linux and Unix ...
A critical component of any IoT project is what to do with all the data being generated. This data needs to be captured, processed, structured, and stored in a way to facilitate different kinds of queries. Traditional data warehouse and analytical systems are mature technologies that can be used to handle certain kinds of queries, but they are not always well suited to many problems, particularly when there is a need for real-time insights.
Continuous testing helps bridge the gap between developing quickly and maintaining high quality products. But to implement continuous testing, CTOs must take a strategic approach to building a testing infrastructure and toolset that empowers their team to move fast. Download our guide to laying the groundwork for a scalable continuous testing strategy.
With 15% of enterprises adopting a hybrid IT strategy, you need to set a plan to integrate hybrid cloud throughout your infrastructure. In his session at 18th Cloud Expo, Steven Dreher, Director of Solutions Architecture at Green House Data, discussed how to plan for shifting resource requirements, overcome challenges, and implement hybrid IT alongside your existing data center assets. Highlights included anticipating workload, cost and resource calculations, integrating services on both sides...
In his session at @DevOpsSummit at 19th Cloud Expo, Yoseph Reuveni, Director of Software Engineering at Jet.com, will discuss Jet.com's journey into containerizing Microsoft-based technologies like C# and F# into Docker. He will talk about lessons learned and challenges faced, the Mono framework tryout and how they deployed everything into Azure cloud. Yoseph Reuveni is a technology leader with unique experience developing and running high throughput (over 1M tps) distributed systems with extre...
"We are a well-established player in the application life cycle management market and we also have a very strong version control product," stated Flint Brenton, CEO of CollabNet,, in this SYS-CON.tv interview at 18th Cloud Expo, held June 7-9, 2016, at the Javits Center in New York City, NY.