To see streaming as you code, open the link in another tab.

View source

Overview

About the app

This is a sample application to demonstrate how to use Azure Web PubSub to livestream your code to others.

Azure Web PubSub enables

• Real-time code editing

How it works?

Server side

Serve a static web page public/index.html A REST API  /negotiate which returns a url to connect to Web PubSub

• Serve a static web page public/index.html
• A REST API /negotiate which returns a url to connect to Web PubSub

Client side

The most logic of this app is happening at client side. In client there're two roles:

• Streamer
  Streamer is the one who writes code and broadcasts to others. It uses WebSocket.send() to send the changes from the code editor (by hooking the editor.on('change') event) to a group (whose ID is generated in negotiate) in Azure Web PubSub. And for performance consideration, it buffers the changes and send them in a batch every 200 milliseconds. The main implementation can be found at  startStream() in public/index.html.
• Watcher
  Watcher is the one who watches streamer to code. It receives the changes from Azure Web PubSub and applies them one by one to the code editor (by calling the applyDelta() function). Since the changes is only a delta from the previous content there needs to be a way to get the full content from streamer when watcher is connected for the first time. So in this app when watcher is connected it will send a sync message to streamer (through another group called id-control) and streamer will send the full content to the group. The main implementation can be found at  watch() in public/index.html.