@robojs/sync

Real-time state sync across clients the simplest way possible. Perfect for multiplayer games and chat apps. It's like magic, but real! 🎩✨

const [position, setPosition] = useSyncState({ x: 0, y: 0 }, [channelId])

It works exactly like React's useState, but it syncs the state across all clients in real-time using websockets, sharing the same state across all clients with the same dependency array. (In this case, [channelId])

No more manual websocket handling or state synchronization. Just focus on building your app and let @robojs/sync handle the rest. It works out of the box as long as you also have the @robojs/server plugin installed.

➞ 📚 Documentation: Getting started

➞ 🚀 Community: Join our Discord server

Installation

To install this plugin, navigate to your existing Robo project's directory and run the following command:

Terminal

npx robo add @robojs/sync

Note: You will also need to install the @robojs/server.

That's it! You can now start using useSyncState in your project. Just wrap your App component with the SyncContextProvider and you're good to go!

import { SyncContextProvider } from '@robojs/sync'

export function App() {
	return (
		<SyncContextProvider>
			<Activity />
		</SyncContextProvider>
	)
}

Usage

Here's a simple example of how you can use useSyncState in your project to share the mouse position across all clients:

import { useSyncState } from '@robojs/sync'
import { useDiscordSdk } from '../hooks/useDiscordSdk'

export function Player() {
	const { session } = useDiscordSdk()
	const [position, setPosition] = useSyncState({ x: 0, y: 0 }, ['position'])

	const handleMouseMove = (event) => {
		setPosition({ x: event.clientX, y: event.clientY })
	}

	return (
		<div
			onMouseMove={handleMouseMove}
			style={{
				width: '100vw',
				height: '100vh'
			}}
		>
			<div
				style={{
					position: 'absolute',
					left: position.x,
					top: position.y
				}}
			>
				Player
			</div>
		</div>
	)
}

The provider accepts an optional loadingScreen prop, which is a component to display while the websocket connection is being established.

<SyncContextProvider loadingScreen={<LoadingScreen />}>
	<Activity />
</SyncContextProvider>

We also expose a way to manually start and get the websocket connection:

import { SyncServer } from '@robojs/sync/server.js'

// To manually start the websocket server
SyncServer.start()

// To get the underlying websocket server
const wss = SyncServer.getSocketServer()

Need more power?

We highly recommend checking out Colyseus, a powerful multiplayer game server! It's the perfect companion to @robojs/sync for building real-time multiplayer games.

➞ ⚔ Colyseus: Multiplayer Game Server

➞ 📚 Template: Colyseus Discord Activity

Enjoy your enhanced Robo! 🚀

Don't have a Robo project? Create your own!

More on GitHub

🔗 GitHub Repository

Explore source code on GitHub.