@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:

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 SyncProvider and you're good to go!

import { SyncProvider } from '@robojs/sync'

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

Usage 🎨

Here's a simple example of how you can use useSyncState in your project:

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

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

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

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

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

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

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!