1. Rensselaer Polytechnic Institute CSCI-4220 – Network Programming David Goldschmidt, Ph.D.

2.  The Internet (1969) is a network that’s  Global  Decentralized  Redundant  Made up of many different types of machines

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

4.  Sir Tim Berners-Lee

5.  The World Wide Web (or just Web) is:  Global  Decentralized  Redundant (sometimes)  Made up of Web pages and interactive Web services  How many Web pages are on the Web?

6.  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

7.  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 browser unless the client makes a request

8.  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://dev.w3.org/html5/websockets/ for the latest http://dev.w3.org/html5/websockets/

9.  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. 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 http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-17

10.  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. 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 http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-17

11.  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 http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-17

12.  The FIN bit indicates whether this is the final fragment of a message  The 4-bit opcode field specifies how to interpret the payload  e.g. text, binary, ping, pong, etc.  The MASK bit indicates whether the 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 http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-17

13.  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? see http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-17 for more details http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-17 foreach index j in payload: data[j] = data[j] XOR mask[j MOD 4]

14.  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) // 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 http://dev.w3.org/html5/websockets/

15.  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 http://dev.w3.org/html5/websockets/

16.  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 ); } // 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 http://dev.w3.org/html5/websockets/

17.  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 see http://dev.w3.org/html5/websockets/ for the latest http://dev.w3.org/html5/websockets/ http://code.google.com/p/pywebsocket/ http://www.jboss.org/netty http://nodejs.org/

18.  This week:  Use mod_pywebsocket, Netty, or node.js to get a WebSockets server up and running  Get the websocket.py and websocket.html examples working (or their equivalents in Java or JavaScript)