Multiplayer loop station demo.
Loop is a little different from a typical Reflect project in that it uses three different Reflect "apps", one for each view of the app:
- The "orchestrator" is what users initially connect to and assigns users to rooms. We limit to 8 concurrent connections to a "play" rooom and "50" concurrent connections to a "share" room.
- The "play" app is where users can edit the grid and choose sounds
- The "share" app is the snapshot view where the grid is read-only
While it would be possible to have all this in a single app, it would mean mixing all the mutators for the different views in a single app, which doesn't really make sense. The orchestrator mutators can't be used in the the share/play views.
We will improve Reflect's APIs over time to not require separate apps for this type of usage.
- Clone repo
npm install
- In four different terminal tabs:
cd reflect/orchestrator; npx reflect dev --server-path=./server.ts
cd reflect/play; npx reflect dev --server-path=./server.ts -p 8081
cd reflect/share; npx reflect dev --server-path=./server.ts -p 8082
NEXT_PUBLIC_ORCHESTRATOR_SERVER=http://localhost:8080 NEXT_PUBLIC_PLAY_SERVER=http://localhost:8081 NEXT_PUBLIC_SHARE_SERVER=http://localhost:8082 npm run dev
- Publish each app to reflect with
npx reflect publish
- Publish the frontend to some host, i.e., Vercel and set
NEXT_PUBLIC_ORCHESTRATOR_SERVER
,NEXT_PUBLIC_PLAY_SERVER
, andNEXT_PUBLIC_SHARE_SERVER
accordingly.