Skip to main content

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

More on GitHub

Robo.js Logo

MIT © 2024 Robo.js By WavePlay