Introduction
Welcome to your first Multisynq application! This tutorial will guide you through building a simple but powerful real-time counter that synchronizes perfectly across all users. When one user clicks the counter, it resets for everyone instantly.What You’ll Learn
By the end of this tutorial, you’ll understand:- How to include the Multisynq client library in your application
- The Model-View architecture that powers Multisynq apps
- Event-driven communication between models and views
- Session sharing using QR codes and URLs
Try It Live
Test Real-time Sync: Click the QR code in the demo above to open a second instance. Notice how both counters stay perfectly synchronized!
Understanding the Session Badge
Setting Up Multisynq
1. Include the Client Library
Add the Multisynq client library to your HTML:2. Get Your API Key
Get API Key
Sign up for free at multisynq.io to get your API key
Building the Application
Every Multisynq application consists of two parts:Model
Handles computation and state
- Runs identically on all instances
- Manages application logic
- Never directly accesses the view
View
Handles UI and user input
- Processes user interactions
- Updates the display
- Can read from model (read-only)
Critical Rules:
- Models MUST NEVER communicate directly with views
- Views MUST NEVER write directly to models
- All communication happens through publish/subscribe events
The Model Code
Our counter model is surprisingly simple:Breaking Down the Model
init()
- Model Initialization
Model Initialization Details
Model Initialization Details
this.count = 0
: Initialize our counter statethis.subscribe("counter", "reset", this.resetCounter)
: Listen for reset events from the viewthis.future(1000).tick()
: Schedule the first tick in 1 second
init()
only runs once when a session starts. After that, the model state is automatically saved and restored for new users joining.resetCounter()
- Handle Reset Events
- Resets the count to 0
- Notifies all views that the counter changed
tick()
- The Heartbeat
- Increments the counter
- Notifies views of the change
- Schedules the next tick
Future Messages:
this.future(1000).tick()
is a powerful Multisynq feature that schedules method calls in the future. This ensures perfect synchronization across all users.register()
- Class Registration
Every model class must be registered so Multisynq can instantiate it.
The View Code
The view handles user interface and interactions:Breaking Down the View
constructor(model)
- View Setup
Constructor Details
Constructor Details
super(model)
: Call the parent View constructorthis.model = model
: Store model reference for read-only accesscountDisplay.onclick = ...
: Set up click handlerthis.subscribe("counter", "changed", ...)
: Listen for counter changesthis.counterChanged()
: Update display immediately
counterReset()
- Handle User Clicks
counterChanged()
- Update Display
HTML Structure
The HTML is minimal:Starting Your Session
The magic happens withMultisynq.Session.join()
:
Session Parameters
Your API key from multisynq.io/coder
Unique identifier for your app (e.g., “com.example.hello-world”)
Session name. Use
Multisynq.App.autoSession()
for auto-generated namesSession password. Use
Multisynq.App.autoPassword()
for auto-generated passwordsYour Model class
Your View class
What Happens When You Join
- Connect to a nearby Multisynq reflector
- Initialize or restore the model state
- Create your view instance
- Start the event loop
- Begin synchronization with other users
Testing Your App
1. Single User Testing
Start by testing the basic functionality with one browser tab.2. Multi-User Testing
Open your app in multiple browser tabs or devices to test synchronization.3. QR Code Sharing
Use QR codes to easily share sessions with mobile devices.Mobile Testing: The QR code feature makes it incredibly easy to test your app on mobile devices. Just scan the code with your phone’s camera!
Common Patterns
Automatic Helpers
Multisynq provides helpful utilities:Event Scoping
Use meaningful scope names for your events:State Management
Keep your model state simple and serializable:Next Steps
Simple Animation
Learn about continuous animations and multiple models
Multi-user Chat
Build a real-time chat application
Model-View Architecture
Understand the core concepts in depth
API Reference
Explore the complete Multisynq API
Troubleshooting
Counter not updating
Counter not updating
- Check that your API key is valid
- Ensure
MyModel.register("MyModel")
is called - Verify the model’s
tick()
method is being called
Multiple users not synchronized
Multiple users not synchronized
- Confirm all users have the same
appId
- Check that all users joined the same session name
- Ensure the model code is identical across all instances
QR code not working
QR code not working
- Verify the QR code generation service is accessible
- Check that the URL in the QR code is correct
- Test the URL manually in a browser
Complete Example
Here’s the full working example you can copy and paste:Don’t forget to replace
"your_api_key_here"
with your actual API key from multisynq.io/coder!Summary
Congratulations! You’ve built your first Multisynq application. You learned:- ✅ How to structure a Multisynq app with Models and Views
- ✅ Event-driven communication using publish/subscribe
- ✅ Future messages for time-based events
- ✅ Session management and sharing
- ✅ Real-time synchronization across multiple users