Skip to content

Instantly share code, notes, and snippets.

@Ethan-Arrowood
Created July 21, 2021 16:00
Show Gist options
  • Save Ethan-Arrowood/195806f5ee70195c2aba400b5e0288cf to your computer and use it in GitHub Desktop.
Save Ethan-Arrowood/195806f5ee70195c2aba400b5e0288cf to your computer and use it in GitHub Desktop.
Learn WebSockets

Module 1 - Introduction to WebSockets

Resources:

Lesson 1 - Upgrading HTTP

This lesson will discuss the natural progression from HTTP to WebSockets. It should cover topics such as the Upgrade header, the client/server handshake, transfer of data, and connection persistance. All of these concepts and more are covered in the MDN documentation. Security should also be covered in this lesson

Lesson 2 - WebSocket Protocol Capabilities

This lesson will discuss possible application designs utilizing the WebSocket protocol. It should share things like broadcasting, client -> server, server -> client, and then explore actual application examples such as messaging, multiplayer games, and monitoring dashboards.

While teaching different use case scenarios, it may be valuable to show how these same applications would suffer if limited to just HTTP (for example, if you had to build a chat app using only REST, clients would have to routinely ping the server for new messages rather than being able to be broadcasted too).

Quiz

The quiz for module 1 should reinforce the conceptual aspects of WebSockets. Students should be able to demonstrate their understanding of the WebSockets protocol, and conceptualize potential project ideas with it.

Articles

This article on Implementing a WebSocket Server using Node.js would serve useful for folks who like to deep dive into implementing things from scratch. May be worth rewriting with modern Node apis though since it was published in 2018.

Module 2 - Developing with the ws module

The second module will focus completely on using the popular ws module for building JavaScript applications with the WebSockets protocol.

Lesson 1 - Getting started with ws

There are some great usage examples provided by the ws docs. This lessons should cover these examples and feature getting started content such as installing and initializing the module.

Lesson/Project 2 - Building a chat application using ws

This lesson/project should show the student how to build a trivial chat application using the ws module. This application should be as simple as possible to focus strictly on the WebSocket protocol. The student should not be responsible for implementing DOM mutation logic, but should learn how to correctly wire up a WebSocket client for the front end part of the app.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment