Upload
maina
View
76
Download
0
Embed Size (px)
DESCRIPTION
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. - PowerPoint PPT Presentation
Citation preview
HTML5 WebSockets{week 14}
Rensselaer Polytechnic InstituteCSCI-4220 – Network ProgrammingDavid Goldschmidt, Ph.D.
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 editionby 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 pages
and 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 browser
unless the client makes a request
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://dev.w3.org/html5/websockets/ for the latest
WebSocket Upgrade handshake To establish a WebSockets
connection, the client requests (via HTTP) an upgrade:GET /chat HTTP/1.1
Host: www.rpi.eduUpgrade: websocketConnection: UpgradeSec-WebSocket-Key: 7cxQRnWs91xJW9T0QLSuVQ==Sec-WebSocket-Version: 13etc.-- 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: websocketConnection: UpgradeSec-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?
see http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-17 for more details
foreach index j in payload: data[j] = data[j] XOR mask[j MOD 4]
WebSockets client code
Open a WebSockets connection to a specified WebSockets server:// JavaScript client-side code example
// Create new WebSocket objectvar 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 serversocket.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
see http://dev.w3.org/html5/websockets/ for the latest
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)