| HTML5 Web Sockets will single handedly | | | | respectively. The default port for WebSockets is |
| revolutionize web technologies as we know it. The | | | | 81 and the default port for secure WebSocket is |
| purpose of this post is to explain what techniques | | | | 815. |
| have been used to simulate server push until now, | | | | Step 2: Attach JavaScript Callback Functions |
| define HTML5 web sockets, and then give an | | | | Associate event listeners to handle each phase of |
| example of how to use it in your HTML5 | | | | the connection life |
| application. | | | | cycle.stockTickerWebSocket.onopen = |
| What is polling? | | | | function(evt) {alert("Stock Ticker Connection |
| Until now, the web has been one directional. In | | | | open..."); |
| other words, web pages could only send a | | | | };stockTickerWebSocket.onmessage = |
| request to a web server, and not the other way | | | | function(evt) {alert( "Received Ticker Update: " + |
| around. Once AJAX came along in 2005, web | | | | evt.data); |
| developers quickly adopted techniques to simulate | | | | };stockTickerWebSocket.onclose = function(evt) |
| a request from server to client known as polling. | | | | {alert("Connection closed."); |
| There are two types of polling, short polling and | | | | }; |
| long polling. | | | | Step 3: Send and Receive Data |
| Short polling is implemented by making a request | | | | To send a message to the server, simply call the |
| to the web server every few seconds or so to | | | | postMessage method on the webocket with the |
| see if data has changed. If it has, the web server | | | | content you wish to send to the |
| will respond with the new data. Otherwise, it will | | | | server.stockTickerWebSocket.postMessage("BUY: |
| respond with a blank message. The drawback to | | | | GOOG,100@200.25″); |
| this technique, however, is both a surplus is | | | | This will send the BUY message to the server. |
| server requests and an overhead in CPU usage | | | | Any message coming from the server will be |
| on the web server to constantly check if an | | | | delivered to the onmessage callback registered in |
| update to the data has been made. | | | | step #2. |
| Long polling is implemented by making a single | | | | Step 4: Disconnect When Done |
| request to the web server and keeping the | | | | When completed, call the disconnect() method to |
| connection open until the data has changed, at | | | | close the WebSocket |
| which point the web server sends back a | | | | connection.stockTickerWebSocket.disconnect(); |
| response. The drawback to this technique, like | | | | As demonstrated in the example above, there |
| short polling, is that the web server still has to | | | | are no HTTP requests made to the server from |
| check if the data has changed every few | | | | the client side to retrieve data, instead the data |
| seconds or so, creating an overhead in CPU | | | | was pushed to the client from the server - when |
| usage. | | | | it becomes available. |
| What's an HTML5 web socket? | | | | When a new WebSocket connection is established |
| This is where HTML5 web sockets come in. | | | | the browser opens an HTTP connection to the |
| HTML5 will be the first HTML specification to | | | | server first and then negotiates with the server |
| support client side web sockets. In other words, | | | | to upgrade the connection to a dedicated and |
| when data changes on the web server, the web | | | | persistent WebSocket connection. This process |
| server can send a request to client, eliminating the | | | | automatically sets up a tunnel through to the |
| need for polling. | | | | server - passing through all network agents |
| HTML5 web socket example | | | | (proxies, routers, and firewalls) in the middle (very |
| Step 1: Create a WebSocket with a valid URL | | | | much like HTTPS establishing a secure, endtoend |
| Create a new WebSocket connection to | | | | connection), solving numerous issues that the |
| WebSocket server at var stockTickerWebSocket | | | | various Comet programming techniques |
| = new WebSocket("ws://finance.example.com"); | | | | encountered. Once established the WebSocket is |
| Note that a ws:// and wss:// prefix indicate a | | | | a fullduplex channel between the client and the |
| WebSocket and a secure WebSocket connection | | | | server. |