For your convenience Apress has placed some of the front matter material after the index. Please use the Bookmarks and Contents at a Glance links to access them. Contents at a Glance Foreword ���������������������������������������������������������������������������������������� xiii About the Authors ���������������������������������������������������������������������������� xv About the Technical Reviewer ������������������������������������������������������� xvii Acknowledgments �������������������������������������������������������������������������� xix ■ Chapter 1: Introduction to HTML5 WebSocket �������������������������������� 1 ■ Chapter 2: The WebSocket API ����������������������������������������������������� 13 ■ Chapter 3: The WebSocket Protocol ��������������������������������������������� 33 ■ Chapter 4: Building Instant Messaging and Chat over WebSocket with XMPP ��������������������������������������������������������� 61 ■ Chapter 5: Using Messaging over WebSocket with STOMP ���������� 85 ■ Chapter 6: VNC with the Remote Framebuffer Protocol ������������� 109 ■ Chapter 7: WebSocket Security �������������������������������������������������� 129 ■ Chapter 8: Deployment Considerations �������������������������������������� 149 ■ Appendix A: Inspecting WebSocket Traffic ��������������������������������� 163 ■ Appendix B: WebSocket Resources �������������������������������������������� 177 Index ���������������������������������������������������������������������������������������������� 183 v CHAPTER 1 Introduction to HTML5 WebSocket This book is for anyone who wants to learn how to build real-time web applications. You might say to yourself, “I already do that!” or ask “What does that really mean?” Let’s clarify: this book will show you how to build truly real-time web applications using a revolutionary new and widely supported open industry standard technology called WebSocket, which enables full-duplex, bidirectional communication between your client application and remote servers over the Web—without plugins! Still confused? So were we a few years ago, before we started working with HTML5 WebSocket. In this guide, we’ll explain what you need to know about WebSocket, and why you should be thinking about using WebSocket today. We will show you how to implement a WebSocket client in your web application, create your own WebSocket server, use WebSocket with higher-level protocols like XMPP and STOMP, secure traffic between your client and server, and deploy your WebSocket-based applications. Finally, we will explain why you should be thinking about using WebSocket right now. What is HTML5? First, let’s examine the “HTML5” part of “HTML5 WebSocket.” If you’re already an expert with HTML5, having read, say, Pro HTML5 Programming, and are already developing wonderfully modern and responsive web applications, then feel free to skip this section and read on. But, if you’re new to HTML5, here’s a quick introduction. HTML was originally designed for static, text-based document sharing on the Internet. Over time, as web users and designers wanted more interactivity in their HTML documents, they began enhancing these documents, by adding form functionality and early “portal” type capabilities. Now, these static document collections, or web sites, are more like web applications, based on the principles of rich client/server desktop applications. These web applications are being used on almost any device: laptops, smart phones, tablets—the gamut. HTML5 is designed to make the development of these rich web applications easier, more natural, and more logical, where developers can design and build once, and deploy anywhere. HTML5 makes web applications more usable, as well, as it removes the need for plugins. With HTML5, you now use semantic markup language like <header> instead of <div class="header">. Multimedia is also much easier to code, by using tags like 1 CHAPTER 1 ■ INTRODUCTION TO HTML5 WEBSOCKET <audio> and <video> to pull in and assign the appropriate media type. Additionally, by being semantic, HTML5 is more accessible, since screen readers can more easily read its tags. HTML5 is an umbrella term that covers the large number of improvements and changes happening in web technologies, and includes everything from the markup you use on your web pages to the CSS3 styling, offline and storage, multimedia, connectivity, and so on. Figure 1-1 shows the different HTML5 feature areas. Figure 1-1. HTML5 feature areas (W3C, 2011) There are lots of resources that delve into these areas of HTML5. In this book, we focus on the Connectivity area, namely the WebSocket API and protocol. Let’s take a look at the history of HTML5 connectivity. HTML5 Connectivity The Connectivity area of HTML5 includes technologies like WebSocket, Server-Sent Events, and Cross-Document Messaging. These APIs were included in the HTML5 specification to help simplify some of the areas where browser limitations prevented web application developers from creating the rich behavior they desired or where web application development was becoming overly complex. One example of simplification in HTML5 is Cross-Document Messaging. Before HTML5, communication between browser windows and frames was restricted for security reasons. However, as web applications started to bring together content and applications from different web sites, it became necessary for those applications to communicate with each other. To address this, standards bodies and major browser vendors agreed to support Cross-Document Messaging, which enables secure cross-origin communication across browser windows, tabs, and iFrames. Cross- Document Messaging defines the postMessage API as a standard way to send and receive messages. There are many use cases for consuming content from different hosts and domains—such as mapping, chat, and social networks—to communicate inside the web 2 CHAPTER 1 ■ INTRODUCTION TO HTML5 WEBSOCKET browser. Cross-Document Messaging provides asynchronous messages passing between JavaScript contexts. The HTML5 specification for Cross-Document Messaging also clarifies and refines domain security by introducing the concept of origin, which is defined by a scheme, host, and port. Basically, two URIs are considered from the same origin if and only if they have the same scheme, host and port. The path is not considered in the origin value. The following examples show mismatched schemes, hosts, and ports (and therefore different origins): • https://www.example.com and http://www.example.com • http://www.example.com and http://example.com • http://example.com:8080 and http://example.com:8081 The following examples are URLs of the same origin: http://www.example.com/page1.html and http://www.example.com/page2.html. Cross-Document Messaging overcomes the same-origin limitation by allowing messages to be exchanged between different origins. When you send a message, the sender specifies the receiver’s origin and when you receive a message the sender’s origin is included as part of the message. The origin of the message is provided by the browser and cannot be spoofed. On the receiver’s side, you can decide which messages to process and which to ignore. You can also keep a “white list” and process only messages from documents with trusted origins. Cross-Document Messaging is a great example of where the HTML5 specification simplifies communication between web applications with a very powerful API. However, its focus is limited to communicating across windows, tabs, and iFrames. It does not address the complexities that have become overwhelming in protocol communication, which brings us to WebSocket. Ian Hickson, the lead writer of the HTML5 specification, added what we now call WebSocket to the Communication section of the HTML5 specification. Originally called TCPConnection, WebSocket has evolved into its own independent specification. While WebSocket now lives outside the realm of HTML5, it’s important for achieving real- time connectivity in modern (HTML5-based) web applications. WebSocket is also often discussed as part of the Connectivity area of HTML5. So, why is WebSocket meaningful in today’s Web? Let’s first take a look at older HTTP architectures where protocol communication is significant. Overview of Older HTTP Architectures To understand the significance of WebSocket, let’s first take a look at older architectures, specifically those that use HTTP. HTTP 101 (or rather, HTTP/1.0 and HTTP/1.1) In older architectures, connectivity was handled by HTTP/1.0 and HTTP/1.1. HTTP is a protocol for request-response in a client/server model, where the client (typically a web browser) submits an HTTP request to the server, and the server responds with the 3 CHAPTER 1 ■ INTRODUCTION TO HTML5 WEBSOCKET requested resources, such as an HTML page, as well as additional information about the page. HTTP was also designed for fetching documents; HTTP/1.0 sufficed for a single document request from a server. However, as the Web grew beyond simple document sharing and began to include more interactivity, connectivity needed to be refined to enable quicker response time between the browser request and the server response. In HTTP/1.0, a separate connection was made for every request to the server, which, to say the least, did not scale well. The next revision of HTTP, HTTP/1.1, added reusable connections. With the introduction of reusable connections, browsers could initialize a connection to a web server to retrieve the HTML page, then reuse the same connection to retrieve resources