A STEP-BY-STEP TUTORIAL OF BUILDING A SIMPLE PEER-TO-PEER WEBSOCKET APP – PART 1
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)
- 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:
Modify the name of the topic. For example:
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:
After the changes:
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.