Prezentacja z webinaru "Understanding WebSockets from the ground up" przeprowadzonej przez Józka Flakusa i Dawida Yerginyana. Dowiedz się jak zbudować serwer WebSocketowy od zera - bez żadnej biblioteki pomocniczej, wykorzystując tylko i wyłącznie niskopoziomowe API oferowane przez platformę Node.js. -- Join Boldare's newsletter to learn about a C-level point of view on user-centered design, software outsourcing services and the future of business. Subscribe now --> https://go.boldare.com/newsletter-slideshare/

1. Follow us @boldarecom
Understanding
WebSockets
_from the ground up_
Webinar

2. Follow us @boldarecom
Józef
Flakus
_Senior software developer_

3. Follow us @boldarecom
Dawid
Yerginyan
_Senior software developer_

4. Follow us @boldarecom
1. HTTP a Node.js
2. Protokół WebSocket
3. Nawiązywanie połączenia
4. Podprotokoły
5. Ramki
6. Demo
7. To wszystko?

6. _Request_
POST /users HTTP/1.1
Host: localhost:8000
Accept: application/json
Connection: close
Content-Type: application/json
Content-Length: 23
--- empty line ---
{“id”:“ABC123”}
_HTTP/1.x_

9. Follow us @boldarecom
Realtime? 🤔

10. WebSocket (RFC6455)
❏ protokół umożliwia dwukierunkową komunikację między
klientem a serwerem
❏ wiadomości przesyłane na tym samym połączeniu TCP
Przykłady:
❏ chaty
❏ wizualizacje/wykresy real-time
❏ gry
❏ …
Implementacje:
❏ ws
❏ sockjs 🤨
❏ socket.io🤨

11. Client:
GET /ws HTTP/1.1
Host: example.com:8000
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13
Server:
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Połączenie
❏ “handshake”
❏ request HTTP (zawsze GET)
❏ klient może zażądać
konkretnego podprotokołu
bądź rozszerzenia
❏ na tym etapie można
zastosować mechanizmy
uwierzytelniania i
autoryzacji

12. Client:
GET /ws HTTP/1.1
Host: example.com:8000
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13
Sec-WebSocket-Protocol: json, v12.stomp, plaintext
Server:
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: plaintext
Połączenie
❏ “handshake”
❏ request HTTP (zawsze GET)
❏ klient może zażądać
konkretnego podprotokołu
bądź rozszerzenia
❏ na tym etapie można
zastosować mechanizmy
uwierzytelniania i
autoryzacji

13. Ramka
❏ FIN
❏ opcode
❏ mask
❏ payload length
❏ extended payload length *
❏ masking-key *
❏ payload data
| | | |
7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0
+-+-+-+-+-------+-+-------------+-------------------------------+
|F|R|R|R| opcode|M| Payload len | Extended payload length |
|I|S|S|S| (4) |A| (7) | (16/64) |
|N|V|V|V| |S| | (if payload len == 126/127) |
| |1|2|3| |K| | |
+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
| Extended payload length continued, if payload len == 127 |
+ - - - - - - - - - - - - - - -+-------------------------------+
| | Masking-key, if MASK set to 1 |
+-------------------------------+-------------------------------+
| Masking-key (continued) | Payload Data |
+-------------------------------- - - - - - - - - - - - - - - - +
: Payload Data continued ... :
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
| Payload Data continued ... |
+---------------------------------------------------------------+

14. Ramka
❏ Ramki wysłane przez client
muszą zostać zamaskowane
prostym szyfrem XOR 🤫
❏ Ramki wysyłane przez
serwer mogą pozostać
jawne
_Client_
| | | |
7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0
+-+-+-+-+-------+-+-------------+-------------------------------+
|F|R|R|R| opcode|M| Payload len | Masking-key, if MASK set to 1 |
|I|S|S|S| (4) |A| (7) | (32) |
|N|V|V|V| |S| | |
| |1|2|3| |K| | |
+-+-+-+-+-------+-+-------------+-------------------------------+
| Masking-key (continued) | Payload Data |
+-------------------------------- - - - - - - - - - - - - - - - +
: Payload Data continued ... :
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
| Payload Data continued ... |
+---------------------------------------------------------------+
_Server_
| | | |
7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0 7 6 5 4 3 2 1 0
+-+-+-+-+-------+-+-------------+-------------------------------+
|F|R|R|R| opcode|M| Payload len | Payload Data |
|I|S|S|S| (4) |A| (7) | |
|N|V|V|V| |S| | |
| |1|2|3| |K| | |
+-+-+-+-+-------+-+-------------+-------------------------------+
: Payload Data continued ... :
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
| Payload Data continued ... |
+---------------------------------------------------------------+

15. Opcode
❏ 4 bit
❏ informuje o typie ramki
❏ na jego podstawie jesteśmy w
stanie stwierdzić strategię
wysłanej/otrzymanej
wiadomości
0x0 (0b0000) - kontynuująca ramka
0x1 (0b0001) - ramka tekstowa (utf-8)
0x2 (0b0010) - ramka binarna
0x8 (0b1000) - zamknięcie połączenia
0x9 (0b1001) - PING
0xA (0b1010) - PONG

16. Maskowanie
❏ 32 bit klucz
❏ szyfr XOR
❏ alternatywa wykluczająca
10100101 11000011 00101101 00110100 (klucz)
⊕ 01101000 01100101 01101100 01101111 (payload)
-------------------------------------
11001101 10100110 01000001 01011011

17. Follow us @boldarecom
DEMO

18. _Dalsze kroki_
❏ obsługa wiadomości powyżej 126 bit
❏ obsługa wiadomości przychodzących w częściach
❏ ping/pong
❏ wiadomości binarne
❏ zarządzanie aktywnymi połączeniami
❏ broadcasting
❏ kompresowanie wiadomości
❏ wykrywanie i zamykanie martwych połączeń
❏ implementacja dedykowanych podprotokołów
❏ ...

19. Follow us @boldarecom
❏ DEMO
github.com/JozefFlakus/ws-playground
❏ RFC6455
tools.ietf.org/html/rfc6455
❏ WS
github.com/websockets/ws
❏ szyfr XOR
en.wikipedia.org/wiki/XOR_cipher
❏ Rejestr podprotokołów WS
iana.org/assignments/websocket/websocket.xml

20. Follow us @boldarecom
Q&A!

21. @boldarecom
www.boldare.com/career