Web Sockets – The Messiah of the Web

Transcript

1. WEB SOCKETS @MICHEALHARKER
2. Micheal Harker Co-maintainer coffea, Moderator /r/npm https://michealharker.com/ @michealharker
3. JUNIOR DEVELOPER iResources http://i-resources.co.uk/ @iresources
4. EXAMPLES, SUPPORT, ETC.
5. const http = require('http'), WebSocketServer = require('ws').Server, express = require('express'); let server = http.createServer(), app = express(), wss = new WebSocketServer({server: server}); /* * WebSocketServer event handling and sending of data. */ server.on('request', app); server.listen(process.env.PORT || 3000);
6. let ws = new WebSocket('ws://localhost:3000/'); ws.onopen = () => { console.log(`We're now connected to the websocket!`); }; ws.onmessage = (message) => { // Echo our message! ws.send(message); }; ws.onclose = () => { console.warn(`The socket connection's been closed!`); };
7. EDGE 13 FIREFOX 45 OPERA 35 SAFARI 9 DROID 47 OPERA 11.5 DROID N/A OPERA 10.1 SAFARI 6.1 SAFARI 4 IE 9 FIREFOX 3.6 FIREFOX 15 LATEST VERSION WITHOUT SUPPORT LATEST VERSION WITH PARTIAL SUPPORT LATEST VERSION WITH FULL SUPPORT DROID 4.3 IE N/A IOS 9 IOS 5.1 IOS 4.1 CHROME N/A CHROME 15 CHROME 49 SOURCE: http://caniuse.com/#feat=websockets
8. PERFORMANCE
9. Ian Hickson Lead of HTML5 Spec, Google “Reducing kilobytes of data to 2 bytes…and reducing latency from 150ms to 50ms is far more than marginal. In fact, these two factors alone are enough to make Web Sockets seriously interesting to Google.”
10. XHR: REQUEST DATA, RECEIVE DATA HTTP not designed for bi-directional communication. HTTP/1.1 200 OK HTTP/1.1 GET /api/apples
11. POLLING: REQUEST DATA, RECEIVE DATA ... SOMETIME Wait for a response to your request. "Cheating" HTTP SERVER EVENT HTTP/1.1 200 OK HTTP/1.1 GET /api/apples
12. WS: REQUEST CONNECTION, USE CONNECTION Uses HTTP for "handshake", WebSocket protocol for everything else. HTTP/1.1 101 Switching Protocols HTTP/1.1 GET wss://[...] Frames of data being passed bidirectionally
13. WS > XHR • one request vs many - think of DNS overhead, bandwidth, etc. • as long as websocket is connected, data can flow • doesn't count towards chrome 6 simultaneous requests/origin limit
14. You, right now Attendee @ Frontend NE Might be a Frontend Developer, not stereotyping... “How can I be assured that Web Sockets alone can single handedly save me network throughput, and thus money and headaches when coming to choose servers to deploy my platform on?”
15. CONSIDER THIS CASE STUDY • Runs a website with a lot of users. • Website uses long polling to check the availability of users in chat. • Website is running slowly and want to consider Web Sockets but unsure if it'll make a difference. • Average header size of this endpoint is 600 bytes per request. • Average data size of each response is 10 bytes.
16. Network Throughput 0Kbit/s 10,000Kbit/s 20,000Kbit/s 30,000Kbit/s 40,000Kbit/s 50,000Kbit/s 60,000Kbit/s 70,000Kbit/s 80,000Kbit/s 90,000Kbit/s 100,000Kbit/s Sequential Users 5k 10k 20k 97,600 Kbit/s 48,800 Kbit/s 24,400 Kbit/s 1,600 Kbit/s 800 Kbit/s 400 Kbit/s HOW I DID THE MATHS h = header length (bytes) b = body length (bytes) u = users ((h + b) * u) * 8 / 1000 = Kbits/sec FUN FACT To achieve the same network throughput that 25,000 polling users would generate with WebSockets, you'd need 305,000 users.
17. Ian Hickson Lead of HTML5 Spec, Google “Reducing kilobytes of data to 2 bytes…and reducing latency from 150ms to 50ms is far more than marginal. In fact, these two factors alone are enough to make Web Sockets seriously interesting to Google.”
18. SECURITY
19. MITM MITM much less likely when web socket connection already established due to it being a continuous TCP connection - after connection is made, less chance of MITM.
20. SUBPROTOCOL VALIDATION Since web sockets could be considered a pure way of transmitting data in a TCP-socket like fashion, we have the idea of sub-protocols so we can transfer specific protocols using web sockets. The Sec-WebSocket-Protocol header defined what protocols can be used.
21. FRAME MASKING Prevents against "cache poisoning" with proxies and middleware that caches responses, since the mask is random and can't be cached (also, looks nothing like a HTTP response so caching servers won't try to cache this data)
22. TLS ws:// and wss:// exist. "ws" is plaintext, whereas "wss" is a TLS-secured web socket. Enough said.
23. CONSIDERATIONS PITFALLS
24. • Clients need to implement the security features of web sockets. • Due to web socket standards being around since 2008 and there being many revisions, some browsers have old implementations. • Newer implementations may be lacking.
25. ? QUESTIONS?