Slide 1

Slide 1 text

WEB SOCKETS @MICHEALHARKER

Slide 2

Slide 2 text

Micheal Harker Co-maintainer coffea, Moderator /r/npm https://michealharker.com/ @michealharker

Slide 3

Slide 3 text

JUNIOR DEVELOPER iResources http://i-resources.co.uk/ @iresources

Slide 4

Slide 4 text

EXAMPLES, SUPPORT, ETC.

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

PERFORMANCE

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

XHR: REQUEST DATA, RECEIVE DATA HTTP not designed for bi-directional communication. HTTP/1.1 200 OK HTTP/1.1 GET /api/apples

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

SECURITY

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

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.

Slide 21

Slide 21 text

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)

Slide 22

Slide 22 text

TLS ws:// and wss:// exist. "ws" is plaintext, whereas "wss" is a TLS-secured web socket. Enough said.

Slide 23

Slide 23 text

CONSIDERATIONS PITFALLS

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

? QUESTIONS?