HTML5 WebSockets {week 14 }

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

http://dev.w3.org/html5/websockets/

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

http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-17

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



WebSocket framing

Data is transmitted via frames, which may be sent by client or server at any time



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



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[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



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



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 );}



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/


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)

Documents

HTML5 WebSockets {week 14 }