How we build Bytebase — Part One: Real-time Chat with WebSockets

Bytebase
Bytebase
Nov 12, 2019 · 4 min read

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.

WebSocket messages for Bytebase

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 Protocol

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 Protocol

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.

Server Sent Events (SSE)

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.

WebSocket

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.

WebSocket Protocol

The HTTP Upgrade header looks like this

HTTP Upgrade Header for WebSocket Protocol

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.

Bytebase

Written by

Bytebase

This is the official blog of Bytebase — the byte-size knowledge base.

More From Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade