TIL: Websockets basics


  • URL protocol used isn’t http or https, it is instead ws:// or wss://
  • wss:// is websockets over TLS, same way https is.
  • With http, the comms are one way in that server can only respond to an HTTP req initiated by the client, whereas with websockets, the server can also initiate comms
    • 2 way TCP/IP connection between a client and a server
    • full-duplex

In a WebSocket request, a client requests that once HTTP connection is established, the server should Upgrade  to WebSocket connection, as defined in the Connection  header


Basic ws request example

GET ws://websocket.example.com/ HTTP/1.1
Origin: http://example.com
Connection: Upgrade
Host: websocket.example.com
Upgrade: websocket
  • The header Sec-WebSocket-Protocol allows you to specify the sub-protocol that your web-socket connection intends on using. describes the data formats you’ll be using.
    • soap
    • wamp
    • mqtt


ws communication happens using frames, and there are many different kinds of frames.

  • Text frames
  • binary data frames
  • ping/pong frames - which check whether a connection is still alive

WebSocket .send() method can send either text or binary data.



The initial value of a useState hook is always discarded on re-renders - it only has an effect when the component mounts. src

useState reading to be continued tomorrow if I get the time