SLIDE 1
WEBSOCKETS bidirectional full-duplex communication Motivation - - PowerPoint PPT Presentation
WEBSOCKETS bidirectional full-duplex communication Motivation - - PowerPoint PPT Presentation
CS 498RK FALL 2016 WEBSOCKETS bidirectional full-duplex communication Motivation Client Server MY BLOG HTTP POST This is my first post. ADD POST API DATABASE HTTP GET MY BLOG 02/23/15 This is my first post. NEW POST Client Server
SLIDE 2
SLIDE 3
MY BLOG
ADD POST This is my first post.
MY BLOG
NEW POST This is my first post. 02/23/15
API DATABASE
Client Server
HTTP POST HTTP GET
SLIDE 4
MY BLOG
ADD POST This is my first post.
MY BLOG
NEW POST This is my first post. 02/23/15
API DATABASE
Client Server
HTTP POST HTTP GET
AJAX allows server requests to be made in the background
SLIDE 5
…but if clients don’t request, servers can’t respond!
SLIDE 6
What types of applications need servers to push data?
SLIDE 7
LOW-LATENCY, REAL-TIME
Multiplayer online games Chat applications Realtime updating social streams
SLIDE 8
How can servers push data?
SLIDE 9
POLLING
keep making requests to the server to see if there’s any new information performance problems: server has to process HUGE number of connections a second
aka faking it
SLIDE 10
COMET
a set of more advanced techniques hidden iframes (i.e., forever frames) AJAX with long polling unstandardized hacks, performance issues
not an acronym!
en.wikipedia.org/wiki/Comet_%28programming%29
SLIDE 11
BROWSER PLUGINS
Adobe Flash, Java raw push real-time data to clients through raw TCP socket connections with servers plug-ins not guaranteed to be installed, firewall issues
SLIDE 12
WebSockets
SLIDE 13
WEBSOCKETS
WebSocket API introduced in HTML5 (2009) persistent connection between the client and server send data back and forth without HTTP overhead
en.wikipedia.org/wiki/WebSocket
bidirectional full-duplex communication
SLIDE 14
GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 Origin: http://example.com
en.wikipedia.org/wiki/WebSocket
Client Request
SLIDE 15
HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat
en.wikipedia.org/wiki/WebSocket
Server Response
SLIDE 16
var connection = new WebSocket(‘ws:// html5rocks.websocket.org/echo'); Open a WebSocket Connection
www.html5rocks.com/en/tutorials/websockets/basics/
SLIDE 17
// When the connection is open, send some data to the server connection.onopen = function () { connection.send(‘Lorenzo Llamas'); // Send the message ‘Lorenzo Llamas' to the server }; // Log messages from the server connection.onmessage = function (e) { console.log('Server: ' + e.data); }; // Log errors connection.onerror = function (error) {/*…*/}; // Close connection connection.onclose = function(){ /*…*/ }
www.html5rocks.com/en/tutorials/websockets/basics/
Attach Event Handlers
SLIDE 18
CROSS ORIGIN COMMUNICATION
supports communication between clients and servers on any domain server decides which domains to allow connections from
www.html5rocks.com/en/tutorials/websockets/basics/
SLIDE 19
PROBLEMS
Immediate security concerns (Opera 11, Safari 5) Protocol was revamped and now supported by all modern browsers Incompatibility with HTTP upgrade system and some proxy servers
even if client supports it, can’t establish a connection!
SLIDE 20
WEBSOCKETS TODAY
use libraries that use earlier fallbacks whenever WebSocket is not available socket.io
SLIDE 21
Socket.IO
SLIDE 22
If at first you don’t succeed…
WebSockets Adobe Flash Socket Ajax long polling Ajax multipart streaming Forever iFrame JSONP Polling
SLIDE 23
“Socket.IO enables real-time bidirectional event-based communication. It works on every platform, browser or device, focusing equally on reliability and speed.”
socket.io
SLIDE 24
Demo
SLIDE 25
<script> var socket = io(); $('form').submit(function(){ socket.emit('chat message', $('#m').val()); $('#m').val(''); return false; }); socket.on('chat message', function(msg){ $('#messages').append($('<li>').text(msg)); }); </script>
socket.io
Client Code
SLIDE 26
app.get('/', function(req, res){ res.sendfile('index.html'); }); io.on('connection', function(socket){ socket.on('chat message', function(msg){ io.emit('chat message', msg); }); }); http.listen(3000, function(){ console.log('listening on *:3000'); });
socket.io
Server Code
SLIDE 27