Skip to content

Repository files navigation

Web page over WebSocket with live updates

Every asset goes through one WebSocket on the same port as HTTP(S) — no extra listener, no extra handshake. That matters on HTTPS, where each new connection is expensive. HTTP stays for bootstrap and as a fallback.

A Service Worker intercepts same-origin GETs and puts files in Cache Storage, so the browser’s own cache is the local layer. Tabs read from there; anything missing is fetched over the shared WebSocket. Disk edits push immediately and the open page reloads. Normal loading still works (we have fallback); you can swap the transport later.

  • One WebSocket for all tabs, through a Service Worker
  • Cache-first, WebSocket on miss, works offline
  • Subscribe only to files the client actually used
  • Reconnect restores subscriptions from cache; ws:// / wss:// from the page
  • Aliases: /docs, /docs/, /docs/index.html
  • Node.js, Service Worker, Cache API, WebSocket (single npm dependency ws)

This is interesting solution for local-first apps, long-lived sessions, interactive platforms, and anything that needs transport, cache, and sync.

Next we are going to implement:

  • Serve from memory (one disk read per change) and multiplex chunks of different files on the same socket
  • HTTP/3, WebTransport and WebRTC support to optimize an asset delivery, with crypto signatures to protect static files

See initial post

Quick start

  • Node.js >= 18
  • Run this:
npm i
node server.js

License & Contributors

Copyright (c) 2026 How.Programming.Works contributors

About

Web page over Websocket

Resources

Stars

2 stars

Watchers

0 watching

Forks

Contributors

Languages