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.

Strengths of WebSocket

We’ll be using WebSockets as the primary communication layer in this course because of these strengths:

• WebSockets allow for efficient two-way data communication over a single TCP connection. This helps to minimize message bandwidth and avoids the overhead of creating frequent connections.

• WebSockets have strong support in Elixir with the cowboy web server. They map very well to the Erlang process model, which helps to create robust performance-focused applications.

• WebSockets originate with an HTTP request, which means that many standard web technologies such as load balancers and proxies can be used with them.

• WebSockets can stay at the edge of our Elixir application, which allows us to change the communication layer in the future if a better technology becomes available.

Applications using WebSocket

WebSockets are powerful. This is evident by the famous and successful applications built using them.

• Facebook Messenger uses WebSockets to send and receive real-time chats from user clients, allowing Messenger chats to feel snappy.

• Yahoo Finance uses WebSockets to power their real-time stock ticker across global financial markets.

• Multiplayer games such as Slither are trendy (not to mention fun!) and are powered entirely via WebSockets.

WebSockets power many essential features for our business users, such as real-time notifications and live website information. We send hundreds of millions of events over WebSockets each day.

Enough talk, though; it’s time for some action! We’ll use a small local Elixir application that exposes a WebSocket to see how to connect a WebSocket and how data can be sent over it. We’ll use this technique to inspect and debug our applications later in the course.