Render Real-time HTML with Channels (Back-end)

HTML replacement

There are two major real-time features of our store. The first is to mark a shoe as released and update all connected shoppers with the released shoe. We’ll use HTML replacement for this feature by swapping out “coming soon” with our size selector. This approach makes it easy to ensure that a user interface looks the same before and after a real-time update occurs. Adding the application’s real-time features is usually less work than the other parts of writing due to the Channel’s abstractions.

In this section, we’ll write a small amount of code compared to the size of the project base that exists already. Real-time features are often added on top of other features, so it does make sense that we’ll spend more time building the features and less time enhancing them to be real-time.

Our front end isn’t currently connected to a Channel that could provide real-time updates. To start, we’ll add a very simple Socket and Channel and then connect our storefront to it. We’ll leverage a Channel to send data from the server to a client. We don’t need to add authentication because this is a public feature that anyone can see. There is no user-sensitive data in any of the Channels that we’ll build in this section.

Let’s start by updating our Endpoint with a new Socket.