Lecture 18. WebSocket

Transcription

1 Lecture 18. WebSocket 1. What is WebSocket? 2. Why WebSocket? 3. WebSocket protocols 4. WebSocket client side 5. WebSocket on server side 1. Case study, WebSocket on nose.js 2. Case study, WebSocket on Jetty WebSocket 1

2 1. What is WebSocket WebSocket is a web technology providing fullduplex communications channels over a single TCP connection The WebSocket API is being standardized by the W3C, and the WebSocket protocol has been standardized by the IETF as RFC Use upgraded HTTP. Work with existing HTTP apps. WebSocket 2

3 Full-duplex vs half-duplex Full-duplex or double-duplex system, allows communication in both directions simultaneously A half-duplex system provides communication in both directions, but only one direction at a time (not simultaneously) WebSocket 3

4 WebSocket vs Ajax Ajax makes TCP connection to web server makes HTTP requests, incorporates the returned data into the current DOM object. Ajax push is a technology which enables server side push, which prove the concepts of WebSocket. WebSocket makes possible to push (without request by client) data to client and incorporated with current DOM object. WebSocket makes server side push as a standard API WebSocket 4

5 2. Why WebSocket With advances of WWW, some apps need more interactions and real time communications between a browser and a server. e.g chat, game, control. Some apps need to push data to browser without the request by browser. Such as notification to browsers Has advantages less data transmission and short delay comparing with other methods, e.g. pulling, long pulling, and streaming What is pulling? What is long pulling? What is streaming? WebSocket 5

6 Browser and server side support Client side: Firefox 6, Google Chrome 14, Opera, IE 10, Safari. Server side: need to write independent server to handle WebSocket. There are WebSocket servers in Perl, PHP, Java, ObjectC, Python, Ruby Some existing webserver can interpret WebSocket requests and call relevant handlers. Apatche, IIS, Apache Tomcat 7, Jetty 7, Node.js WebSocket 6

7 Applications using WebSockets This is a relatively new technology. Application developments are on its way. Transform some existing applications for better performance New applications that take advantages of WebSocket 9 killer uses for WebSockets 1. Social feeds 2. Multiplayer games 3. Collaborative editing/coding 4. Clickstream dat 5. Financial tickers 6. Sports updates 7. Multimedia chat 8. Location-based apps 9. Online education ( WebSocket 7

8 3. WebSocket protocol Client request: GET /mychat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3jjhmbdl1ezlkh9gbhxdw== Sec-WebSocket-Protocol: chat Sec-WebSocket-Version: 13 Origin: WebSocket 8

9 WebSocket protocol handshake Server response: HTTP/ Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat WebSocket 9

10 4. WebSocket client side API Client side JavaScript API: var connection = new WebSocket('ws:// ', [ ', ]); connection.onopen = function () { connection.send( something'); } connection.onerror = function (error) { console.log('websocket Error ' + error); }; connection.onmessage = function (e) { console.log('server: ' + e.data); }; connection.close(); connection.onclose() = function (e) { console.log('server close: ' + e.data); }; WebSocket 10

11 5. WebSocket Server side WebSocket Server side is technology dependent Node.js provides WebSocket support Webserver server side Jetty 8 or later support server side WebSocket protocol. WebSocket 11

12 Use node.js for websocket Node.js is a software platform for scalable server-side and networking applications written in JavaScript, and can be run within the Node.js runtime on Windows, Mac OS X and Linux with no changes. Node.js applications are designed to maximize throughput and efficiency, using non-blocking I/O and asynchronous events Node.js applications run single-threaded Node uses multiple threads for file and network events. Node.js uses the Google V8 JavaScript engine to execute code, and a large percentage of the basic modules are written in JavaScript Node.js contains a built-in HTTP server library, making it possible to run a web server WebSocket 12

13 Chat demo with chat.js node.js var http = require('http'), fs = require('fs'); var app = http.createserver(function (request, response) { fs.readfile("client_chat.html", 'utf-8', function (error, data) { response.writehead(200, {'Content-Type': 'text/html'}); response.write(data); response.end(); }); }).listen(1337); var io = require('socket.io').listen(app); io.sockets.on('connection', function(socket) { socket.on('message_to_server', function(data) { io.sockets.emit("message_to_client",{ message: data["message"] }); }); }); See demo WebSocket 13

14 ChatWebSocket with jetty (demo) public class ChatWebSocketHandler extends WebSocketHandler { private final Set<ChatWebSocket> websockets = new CopyOnWriteArraySet<ChatWebSocket>(); public WebSocket dowebsocketconnect(httpservletrequest request, String protocol) { return new ChatWebSocket(); } private class ChatWebSocket implements WebSocket.OnTextMessage { private Connection connection; public void onopen(connection connection) { } this.connection = connection; websockets.add(this); public void onmessage(string data) { try { for (ChatWebSocket websocket : websockets) { } websocket.connection.sendmessage(data); } } catch (IOException x) { this.connection.close(); } public void onclose(int closecode, String message) { websockets.remove(this); } }} WebSocket 14