Basic Architecture

Learn the basics of how web sockets work in redux.

We'll cover the following

WebSockets have brought a robust socket communication method directly into our browsers. What started as a solution for polling data changes on the server is slowly taking over more and more responsibilities from traditional REST endpoints. The action-based architecture of Redux makes working with WebSockets exceptionally easy and natural, as it involves using WebSockets as pipes to pass actions to and from the server.

Basic architecture

WebSockets allow us to open a connection to a server and send or receive messages in a fully asynchronous way. The native implementation in browsers has only four callback methods that are required to fully support WebSockets:

  • onopen: A connection has become active.
  • onclose: A connection has been closed.
  • onerror: An error has been raised related to WebSocket communication.
  • onmessage: A new message has been received.

While we might use WebSockets, most applications will require a single one or a few connections for different servers based on function (chat server, notifications server, etc.).

To start, we will build a system to communicate with a single WebSocket in the next lessons. We can expand this system later for multi-WebSocket support.

Get hands-on with 1200+ tech skills courses.