HTML5 WebSockets {week 14 }

Rensselaer Polytechnic Institute CSCI-4220 – Network Programming David Goldschmidt, Ph.D. HTML5 WebSockets{week 14}

Are you connected? • The Internet (1969) is a network that’s • Global • Decentralized • Redundant • Made up of many different types of machines

Browsing the Web from Fluency with Information Technology, 4th edition by Lawrence Snyder, Addison-Wesley, 2010, ISBN 0-13-609182-2

The World Wide Web • Sir Tim Berners-Lee

Weaving the Web • The World Wide Web (or just Web) is: • Global • Decentralized • Redundant (sometimes) • Made up of Web pagesand interactive Web services • How many Web pages are on the Web?

Uniform Resource Locator (URL) • A URL identifies a resource on the Web,and consists of: • A scheme or protocol (e.g. http, https) • A hostname (e.g. www.cs.rpi.edu) • A resource (e.g. /~goldsd/index.php) • http://www.cs.rpi.edu/~goldsd/index.php

AJAX? • AJAX (Asynchronous JavaScript And XML) provides Web clients a means to send mini-requests to the Web server • Via the XMLHttpRequest object • Removes need to reload entire page • Server has no way to notify the browserunless the client makes a request

see http://dev.w3.org/html5/websockets/ for the latest HTML5 WebSocket protocol • WebSockets is a big step forward for HTML! • Two-way communication without expensive/annoying client-side polling • Ideal for low-latency persistent connections • e.g. for real-time Web applications • Only requires 2 bytes of overhead per message • Requires server-side support • e.g. via JavaScript or Python on the Web server

see http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-17 for more details WebSocket Upgrade handshake • To establish a WebSockets connection, the client requests (via HTTP) an upgrade: GET /chat HTTP/1.1 Host: www.rpi.edu Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: 7cxQRnWs91xJW9T0QLSuVQ== Sec-WebSocket-Version: 13 etc. -- blank line --

see http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-17 for more details WebSocket Upgrade handshake • The server acknowledges the request: • Once connected, data is transmitted (bidirectionally) via frames HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: ZPw+oQ5cCHEzxVXd0OdijIPDYWU= etc. -- blank line --

see http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-17 for more details WebSocket framing • Data is transmitted via frames, which may be sent by client or server at any time

see http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-17 for more details WebSocket frame bits • The FIN bit indicates whether this is the final fragment of a message • The 4-bit opcode field specifieshow to interpret the payload • e.g. text, binary, ping, pong, etc. • The MASK bit indicates whetherthe frame is masked (1) or not (0) • All client-to-server frames must be masked....

see http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-17 for more details WebSocket masking • When the MASK bit is set, a 32-bit mask is used to transform each payload byte • Masking and unmasking algorithms are identical because of XOR operation: • Security feature or too much overhead? foreach index j in payload: data[j] = data[j] XOR mask[jMOD 4]

see http://dev.w3.org/html5/websockets/ for the latest WebSockets client code • Open a WebSockets connection to a specified WebSockets server: // JavaScript client-side code example // Create new WebSocket object var url = "ws://servername.edu:8787/path"; var socket = new WebSocket( url ); // socket.readyState property indicates // the current status of the connection // (see next slide) Use “wss” for a secure connection

see http://dev.w3.org/html5/websockets/ for the latest WebSockets readyState • The readyState property is a number: • 0 (socket.CONNECTING): client is establishing the connection to the server • 1 (socket.OPEN): client is connected; use send() and an onmessage event handler to communicate • 2 (socket.CLOSING): the connection is in the process of being closed • 3 (socket.CLOSED): connection is closed

see http://dev.w3.org/html5/websockets/ for the latest WebSockets client code • WebSockets API is event-driven (onopen, onmessage, onerror, onclose): // JavaScript client-side code example (continued) // Opening message (sent once) var msg = "I AM theman"; socket.onopen = function() { socket.send( msg ); } // Listen for incoming message from server socket.onmessage = function( msg ) { alert( "Server says: " + msg ); }

see http://dev.w3.org/html5/websockets/ for the latest WebSockets server side • On the server side, we need a server that supports WebSockets • mod_pywebsocket: a Python-based module for Apache • Netty: a Java network framework that includes WebSocket support • node.js: a server-side JavaScript framework that supports WebSocket server implementation http://code.google.com/p/pywebsocket/ http://www.jboss.org/netty http://nodejs.org/

Implementing WebSockets • This week: • Use mod_pywebsocket, Netty, or node.js to get a WebSockets server up and running • Get the websocket.py andwebsocket.html examplesworking (or their equivalentsin Java or JavaScript)

HTML5 WebSockets {week 14 }