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 of this tutorial for a step-by-step guide.
About the Environment
This tutorial requires a WebSocket server. We will use demos.kaazing.com, which hosts the Enterprise 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 Firstly, 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:
[sourcecode language=”javascript” light=”true” gutter=”0″]
var TOPIC_NAME = ’/topic/myTopic’;
[/sourcecode]
Modify the name of the topic. For example:
[sourcecode language=”javascript” light=”true” gutter=”0″]
var TOPIC_NAME = ’/topic/PeterTopic’;
[/sourcecode]
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:
[sourcecode language=”javascript” light=”true” gutter=”0″]
var IN_DEBUG_MODE = true;
[/sourcecode]
After the changes:
[sourcecode language=”javascript” light=”true” gutter=”0″]
var IN_DEBUG_MODE = false;
[/sourcecode]
Test your code by clicking the Run button. In Part 2 you can learn about the demo code and how quickly and easily you can build real-time web applications with Web messaging.