How we build Bytebase — Part One: Real-time Chat with WebSockets
This is our first post in a series about how we build Bytebase. This series is adapted from the Django Real-Time Chat tutorial we presented at the 2019 US DjangoCon conference in San Diego, with added topics as requested. Here’s the code.
If you don’t know us, Bytebase is the byte-size knowledge base for engineering teams. Bytebase has the ability to collaborate on a single module with your teammates in real-time. We do this with the WebSocket protocol.
Live updates in Bytebase look like this.
This post will cover
- The motivation for WebSockets
- What the WebSocket Protocol is
- Who uses WebSockets
Motivation for WebSockets
WebSocket is a protocol for enabling real-time communication. To start, let’s understand when we might need WebSockets and what some alternatives are.
HTTP
Most web applications are built on HTTP.
In HTTP, the client sends a request to the server. Then the server sends back a response.
HTTP is stateless, simple, and supported by all browsers.
The problem is, that HTTP doesn’t have real-time support. So we need something more powerful.
Some options for real-time support are Polling, Server Sent Event, and WebSockets.
Polling
In Polling, the client sends a request to the server and the server sends back a response. The client waits a short period of time, and then sends another request.
Polling provides a way to approximate real-time communication. Like HTTP, Polling is stateless and supported by all browsers. However, it’s resource-intensive, and it’s still not actually real-time.
Server Sent Events
Server Sent Events (SSE) is a standard that lets servers push data to clients asynchronously.
SSE provides real-time one-way communication. The disadvantages of SSE are that it’s limited to text-based data and that it has no Internet Explorer support. Also, SSE only supports one-way real-time communication, not two-way.
Introducing the WebSocket Protocol
WebSocket is a protocol that supports real-time two-way communication between clients and servers.
The WebSocket protocol supports binary data and has wide browser support. The main downside to WebSocket applications is that they can have tricky network configuration. We’ll cover this in a later post of the series.
How WebSockets Work
With the WebSocket Protocol, the client sends a HTTP Upgrade request to the server. The Server responds with a HTTP 101 Switching Protocols Response. Now the client and server have a persistent connection established.
The HTTP Upgrade header looks like this
Note that the WebSocket protocol and HTTP protocol both operate at the application layer, on top of TCP. They are compatible, but they are separate protocols.
Who uses WebSockets?
Slack uses WebSockets for real-time message updates.
Facebook uses WebSockets to update your feed.
ESPN uses WebSockets to update scores.
In the next section of this series, we’ll go over Django Support for WebSockets.
Later sections will also cover
- How to Deploy your Django WebSocket App with AWS
- How to debug WebSockets
Thanks for reading!
Plug: Bytebase, the byte-size knowledge base.
Bytebase is a web app that helps engineering teams share knowledge better. Everything in Bytebase is a “byte” — a short chunk of information. Bytes can be grouped together and organized, using the same principles engineers use to organize their code.
Check us out at bytebase.io or email me with subject line ‘Builder’ for access.
