WebSocket is a protocol that provides full-duplex communication channels over a single TCP connection. It allows for more efficient communication than HTTP by establishing persistent connections and enabling bidirectional data flow that enables real-time data transfer from server to client. The key advantages are lower latency for real-time applications like games, media streaming, and chats compared to HTTP. It works by upgrading the initial HTTP connection to a WebSocket connection using a handshake. Data is then sent between client and server as frames that include opcode, length and payload fields. Common uses include applications requiring constant updates from the server.

1. WebSocket
Charmin
Pansuriya
© Qubercomm inc

2. Why?
• Web Socket represents a major upgrade in the history of web communications.
Before its existence, all communication between the web clients and the servers
relied only on HTTP.
• It is termed as a game changer because of its efficiency of overcoming all the
drawbacks of existing protocols.

3. What?
• WebSocket is the protocol.
• It offers connections that are both persistent ("long-lived") and bi-directional ("full-
duplex"). This means that, finally, the server can actively push information to the
client any time. And the client can push information to the server without doing full
HTTP requests each time.

4. Can I use it?
HTTP 0.9 - The Web
Is Born
HTTP 0.9 – (Header
- GET /index.html) -
there was no ability
to serve any media.
HTTP 1.0 and 1.1 -
HTTP
request/response
pair grew, average
HTTP header was
very big.

5. Can I use it?
source: caniuse.com

6. Advantages
• Creating an app that needs constant real-time updates (chat, interactive
streaming media, live multiplayer games, etc) then web sockets is good choice.
• HTTP – 2K+ bytes including cookie data, 800 bytes without cookie data.
• Ws - ~400 bytes Request and, ~200 bytes response.
• WebSockets does save a tiny amount of bandwidth because you don't always
have to send a request to the server in order to receive information.

7. Disadvantages
• The disadvantage with using web sockets is that it keeps the connection open on
the server for the duration of the time the user is interacting with the page. This
will increase the demand on the server, (A port is hard limited to 64k active
connections, and will seriously degrade after 10k or so.)
• Websocket is that it's harder to achieve reliable communication, especially for
mobile users who may have spotty network coverage or IP addresses that
change. To use Websocket with success, you'll need an aggressive timeout and
reconnection strategy.

8. Comparison B/T Websocket and HTTP

9. Functions of WebSockets
Upgrade HTTP
to WebSocket
(single TCP
connection)
1
Send data
frames in both
direction (bi-
directional)
2
Send
messages
independent of
each other
(full-duplex)
3
End the
connection
4

10. HTTP Request Header
• GET /WebPage HTTP/1.1
• Host: cloud.qubercomm.com
• Upgrade: websocket
• Connection: Upgrade
• Origin: http://example.com (Only from Browser side)
• Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
• Sec-WebSocket-Protocol: chat
• Sec-WebSocket-Version: 13

11. HTTP Responce Header
• HTTP/1.1 101 Switching Protocols
• Upgrade: websocket
• Connection: Upgrade
• Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
• Sec-WebSocket-Protocol: chat

12. Frame structure

13. Data frame information
• Fin bit - Is this the final frame, or is there a continuation?
• Opcode - Is this a control frame or data frame?
• Length - How long is the payload? (if < 125)
• Extended length - If payload is larger than 125, we’ll use the next 2 to 8 bytes,
in case of (l25 > length < 65535) Length = 126 + 2 bytes for total length,
in case of (length > 65535) Length = 127 + 7 bytes for data length.
• Mask - Is this frame masked? Masking key
• 4 bytes for the masking key ( If mask bit is enable).
• Payload data (text or binary)

14. Opcodes
• 0x00 Continuation frame; this frame continues the payload from the previous.
• 0x01 Text frame; this frame includes UTF-8 text data.
• 0x02 Binary frame; this frame includes binary data.
• 0x08 Connection Close frame; this frame terminates the connection.
• 0x09 Ping frame; this frame is a ping.
• 0x0a Pong frame; this frame is a pong.
• 0x0b-0x0f Reserved for future control frames.

15. HTTP request frame

16. HTTP response frame

17. Websocket data frame from client

18. Websocket data frame from server

19. Ping request by server

20. Pong – server pong - client

21. Close frame

22. Close status code
• 1000 indicates a normal closure.
• 1001 indicates that an endpoint is "going away", such as a server going down.
• 1002 indicates that an endpoint is terminating the connection due to a protocol error.
• 1003 indicates that an endpoint is terminating the connection because it has received a
type of data it cannot accept (e.g., an endpoint that understands only text data MAY
send this if it receives a binary message).
• 1007 indicates that an endpoint is terminating the connection because it has received
data within a message that was not consistent with the type of the message (e.g., non-
UTF-8 [RFC3629] data within a text message).

23. Websocket practical demo page

24. Thank You