Skip to main content

Launch a local Reactor

Tutorial Repository

📦 Reference Code: chatroom-demo

This final step demonstrates real-time collaboration by running a local Reactor instance.

In this final section, we'll create a local Reactor instance to test the real-time synchronization capabilities of your ChatRoom. This simulates how messages would sync between multiple users in a production environment.

What is a Reactor?​

A Reactor is a node in the Powerhouse network that:

  • Hosts and synchronizes documents across multiple clients
  • Manages document state and operations
  • Enables real-time collaboration between users

In production, Reactors are typically hosted as remote servers. For development and testing, we can run a local Reactor.

Start the local Reactor​

First, stop the Connect application if it's running. Then start the Reactor:

ph reactor

This spins up a Reactor that:

  • Runs locally on your machine
  • Creates a public drive accessible from your Connect sidebar
  • Enables synchronization between multiple browser sessions

Test real-time collaboration​

To validate the real-time functionality of your ChatRoom:

  1. Open two browser windows with the Connect application
  2. Navigate to the Reactor drive in the left sidebar (it will appear as a public drive)
  3. Login with different Ethereum addresses in each window
  4. Create a ChatRoom document in one window
  5. Open the same document in the other window

Now you can:

  • Send messages from one window and see them appear in the other
  • React to messages with emojis and watch the reactions sync
  • Edit the chat name or description and see updates propagate
Real-time Sync

The Reactor ensures that all operations are synchronized across connected clients. Each message and reaction is recorded as an operation, maintaining a complete history that can be replayed to reconstruct the document state.

Additional features to explore​

While testing your ChatRoom, try these features:

  1. Operation History: Click on the revision history in the top right corner to see all operations performed on the document

  2. ENS Integration: If you login with an Ethereum address that has an ENS name, your name and avatar will appear in your messages

  3. Reaction Toggling: Click on an existing reaction to toggle it on/off for your user

Running Connect alongside Reactor​

You can also run Connect and Reactor together. In separate terminal windows:

# Terminal 1: Start the Reactor
ph reactor

# Terminal 2: Start Connect (in a separate terminal)
ph connect

This allows you to:

  • Use Connect's local drive for development
  • Access the Reactor's public drive for collaboration testing
  • Switch between local and synchronized documents

What you've accomplished​

Congratulations! 🎉 You've now completed the ChatRoom tutorial and learned how to:

✅ Create a Powerhouse project - Initialize and configure a new project
✅ Define a document model - Design schemas using GraphQL SDL
✅ Implement reducers - Write the business logic for state transitions
✅ Build an editor - Create a React-based UI for your document
✅ Test with a Reactor - Validate real-time collaboration features

Next steps​

Now that you've completed this tutorial, you can:

  1. Explore the Mastery Track - Dive deeper into Document Model Creation for advanced concepts

  2. Try Vetra Studio - Use AI-assisted development with Vetra Studio for faster iteration

  3. Build your own project - Apply what you've learned to create your own document models and editors

  4. Join the community - Connect with other Powerhouse builders and share your creations

This tutorial demonstrated one of the many ways to use document models within the Powerhouse ecosystem. The patterns you've learned here apply to any collaborative application you want to build.