Creating a Simple WebSocket

WebSockets as the backbone of real-time applications

We’ll use WebSockets as our communication layer; they form the backbone of real-time web applications today. This may change as technology evolves, but it’s the best solution in the current technology landscape. We’ll start building real-time applications in the next section, but first, we’ll going to break down how WebSockets work. Understanding WebSockets is crucial to developing and delivering real-time applications to users.

Note: We’ll use a “Hello, World!”-style Phoenix application to see the communication of a WebSocket.

Once this application is running, we’ll look at the different components of a WebSocket to understand how they work.

Importance of layers

We can build a real-time system without understanding all the different layers, such as WebSockets, but lacking this knowledge may hurt us in the long run.

Author’s note: I remember shipping my first real-time Phoenix application where I didn’t fully understand all the layers involved. My WebSockets weren’t able to connect! I researched and realized that I needed to understand more about WebSockets to work with my production load balancer and reduce my application’s memory usage. Learning more about the different layers allowed me to ensure each was working correctly.

Why WebSockets?

It used to be challenging to write real-time systems due to technology limitations at the communication layer. Developers of real-time systems had to make trade-offs between performance, cost, and maintenance; the complicated techniques often pushed browsers to the limit of their capabilities. Those techniques were highly dependent on the particular web browser used. This meant that a client would be working correctly in one browser but not in another.

Support for WebSocket

The RFC for the WebSocket protocol emerged with the HTML5 spec in 2011 to solve the challenges of real-time web communication. It took some time for WebSockets to gain support, but they are now supported natively by all major browsers and can be considered mature for application development.