Make any site multiplayer in a few lines. Serverless WebRTC matchmaking

Summary

Below is some code describing whatʼs happening on this site right now. Anyone on this page will connect directly to others in real-time, syncing mouse movement and clicks. (Try it, I dare you). Trystero can connect peers via 🌊 BitTorrent, 🐦 Nostr, 📡 MQTT, 🪐 IPFS, ⚡️ Supabase, and 🔥 Firebase. Right now youʼre the only person with the page open, but you can cheat and just open this URL in another tab to see what itʼs like with others. Hereʼs how you use it. Join a room with an app ID and a room ID: import {joinRoom} from 'trystero' const room = joinRoom({appId: 'trystero-lounge'}, '101') Listen for peers joining and leaving (leaving out some boring UI code): room.onPeerJoin(addCursor) room.onPeerLeave(removeCursor) Make some actions to send and respond to: const [sendMove, getMove] = room.makeAction('mouseMove') const [sendClick, getClick] = room.makeAction('click') Broadcast your actions to other peers: window.addEventListener('mousemove', e => sendMove([e.clientX, e.clientY])) window.addEventListener('click', () => sendClick(randomFruit()) And listen for when peers send theirs: getMove(([x, y], peerId) => setCursorPosition(peerId, x, y)) getClick((fruit, peerId) => dropFruitFrom(peerId, fruit)) Thatʼs all this page is doing, but you can do much more like audio/video streams and binary data (like files). Peruse the readme to see how. -o-<<| Dan Motzenbecker | github/dmotz