Web Sockets intro Web Sockets fullduplex TCPbased persistent

Web. Sockets [intro]

Web. Sockets? • • full-duplex TCP-based persistent connection message-oriented cross-origin standardized protocol Java. Script API

Web. Sockets in action • http: //wordsquared. com/ • http: //paintwith. me/ • http: //www. youtube. com/watch? v=64 Tc. Biqm. Vko&feature=player_embe dded • …and more!

Why Web. Sockets? • • HTTP is half-duplex HTTP has too much overhead Ajax doesn’t help Comet doesn’t help

Web. Socket uses • • Real-time updates (sports, finance) Games Collaboration & Education Feeds & rich communication Location-based services Services based on real-time APIs User Monitoring & Logging

Web. Socket protocol GET /chat HTTP/1. 1 Host: server. example. com Upgrade: websocket Connection: Upgrade Sec-Web. Socket-Key: d. Ghl. IHNhb. XBs. ZSBub 25 j. ZQ== Origin: http: //example. com Sec-Web. Socket-Protocol: chat, superchat Sec-Web. Socket-Version: 13 HTTP Client HTTP GET Upgrade request HTTP Server

Web. Socket protocol HTTP/1. 1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-Web. Socket-Accept: s 3 p. PLMBi. Txa. Q 9 k. YGzzh. ZRb. K+x. Oo= Sec-Web. Socket-Protocol: chat HTTP Client HTTP 101 Switching Protocol response HTTP Server

Using Web. Sockets Server-side: • Node. js Web. Socket-Node Socket. IO Engine. IO • C#/. NET (IIS 8 ASP. NET 4. 5) XSockets. NET Fleck • Java Atmosphere • Ruby EM-Web. Socket

Web. Socket API browser support Google Chrome 16 Safari 6 Opera 12. 10 Internet Explorer 10 Firefox 11

Web. Socket API Web. Socket( in DOMString url, in optional DOMString protocols ); Web. Socket( in DOMString url, in optional DOMString[] protocols );

Web. Socket API 1. 2. 3. 4. 5. 6. Parse URL or throw SYNTAX_ERR If port is blocked, throw SECURITY_ERR Check sub-protocol Get origin from <script> Return Web. Socket object Establish a socket connection

Web. Socket API Status Methods • ready. State • • CONNECTING ( = 0 ) OPEN ( = 1 ) CLOSE ( = 2 ) CLOSING onopen onmessage onclose onerror ≤ 123, LOL • close(code, reason) • send(data) • • • String Array. Buffer Blob https: //developer. mozilla. org/en-US/docs/Web. Sockets_reference/Close. Event#Status_codes

Web. Socket API var socket = new Web. Socket('ws: //www. example. com/socketserver', 'protocol. One'); socket. onopen = function() { socket. send('hey'); } socket. onmessage = function(event) { var msg = JSON. parse(event. data); }

Web. Sockets Demo Server HTTP server WS server mobile. html Tablet deviceorientation de skt op . ht ml Desktop

Binary data in JS [oh why] • • Web. GL Files XHR 2 Web. Sockets • • Data. View Typed arrays Blobs Clamped arrays

= 1 byte Binary data in JS [is great] var buffer = new Array. Buffer(16) 0 x 00 0 x 01 0 x 02 0 x 03 0 x 04 0 x 05 0 x 06 0 x 07 0 x 08 0 x 09 0 x 0 a 0 x 0 b 0 x 0 c 0 x 0 d 0 x 0 e 0 x 0 f 13 37 0 x 0 a 0 x 0 b 0 x 0 c 0 x 0 d 0 x 0 e 0 x 0 f var dv = new Data. View(buffer, 8, 4) 0 x 00 0 x 01 0 x 02 0 x 03 0 x 04 0 x 05 0 x 06 dv. set. Uint 16(2, 0 x 1337) 0 x 01 0 x 02 0 x 03 0 x 04 0 x 05 0 x 06 0 x 07 0 x 08 0 x 09 { 0 x 00 Data. View

= 1 byte Binary data in JS [is great] dv. get. Int 8(2) -> 0 x 13 0 x 00 0 x 01 0 x 02 0 x 03 0 x 04 0 x 05 Int 8, Uint 8: Int 16, Uint 16: x 2 0 x 06 0 x 07 0 x 08 0 x 09 13 37 0 x 0 a 0 x 0 b 0 x 0 c Int 32, Uint 32, Float 32: x 4 Float 64: x 8 0 x 0 d 0 x 0 e 0 x 0 f

= 1 byte Binary data in JS [is great] … 0 x 00 0 x 01 0 x 02 0 x 03 0 x 04 0 x 05 0 x 06 0 x 07 0 x 08 0 x 09 13 37 0 x 0 a 0 x 0 b 0 x 0 c 0 x 0 d 0 x 0 e 0 x 0 f var arr = new Int 32 Array(buffer) 0 x 00 0 x 01 0 x 02 [0] 0 x 03 0 x 04 0 x 05 0 x 06 [1] 0 x 07 0 x 08 0 x 09 [2] arr[2] ? [3]

WAT

= 1 byte Binary data in JS [is great? . . ] var arr = new Int 32 Array(buffer) 0 x 00 0 x 01 0 x 02 [0] 0 x 03 0 x 04 0 x 05 0 x 06 0 x 07 0 x 08 [1] 37 0 x 0 a 0 x 0 b [2] 0 x 08 LSB dv. set. Uint 16(2, 0 x 1337, true) 0 x 09 13 0 x 09 0 x 0 c 0 x 0 d 0 x 0 e [3] 13 37 0 x 0 a 0 x 0 b MSB 0 x 37130000 0 x 0 f

Blobs Blob( [optional] Array parts, [optional] Blob. Property. Bag properties ); Blob slice( optional long start, optional long end, optional DOMString content. Type }; Blob. Builder

Binary data over WS …just send it already! opcode meaning 0 Continuation Frame 1 Text Frame 2 Binary Frame 8 Connection Close Frame 9 Ping Frame 10 Pong Frame socket. binary. Type = “arraybuffer” | “blob”

The Web. Socket Challenge wsc. jit. su 1. 2. 3. 4. 5. 6. 7. 8. 9. Array. Buffer JSON Danger { msg: ”challenge_accepted”, name: “Socketeers” } { msg: “auth”, auth_token: “ 6 f 7 sd 8 s 78”} Task 1 request: { msg: “task_one”, auth_token: “ 6 f 7 sd 8 s 78”} Task 1 server response: { msg: “compute”, operator: ”+/-/*”, operands: [4, 5]} Task 1 send result: { msg: “task_one_result”, result: 9, auth_token: “ 6 f 7 sd 8 s 78” } Task 2 request: { msg: ? ? ? , auth_token: “ 6 f 7 sd 8 s 78” } Task 2 server response: {msg: “binary_sum”, bits: 8/16 } and Array. Buffer (16 bytes) Convert to an unsigned typed array according to the `bits` field 10. Task 2 send result: { msg: “task_two_result”, result: 0, auth_token: “ 6 f 7 sd 8 s 78” } Check message type with typeof evt. data == “string”

The End [you are awesome]