1 / 16

HTML5 WebSockets {week 13 }

Rensselaer Polytechnic Institute CSCI-4220 – Network Programming David Goldschmidt, Ph.D. HTML5 WebSockets {week 13 }. 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.

miles
Download Presentation

HTML5 WebSockets {week 13 }

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

  4. check out http://www.rpi.edu/academics/commencement/ The World Wide Web • Sir Tim Berners-Lee

  5. 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?

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

  7. see http://dev.w3.org/html5/websockets/for more details 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

  8. see https://tools.ietf.org/html/rfc6455for 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 --

  9. see https://tools.ietf.org/html/rfc6455for 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 --

  10. see https://tools.ietf.org/html/rfc6455for more details WebSocket framing • Data is transmitted via frames, which may be sent by client or server at any time

  11. see https://tools.ietf.org/html/rfc6455for 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....

  12. see https://tools.ietf.org/html/rfc6455for 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]

  13. see http://dev.w3.org/html5/websockets/for more details 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

  14. see http://dev.w3.org/html5/websockets/for more details 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

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

  16. see http://dev.w3.org/html5/websockets/for more details 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/

More Related