Quick Start

Multiplayer infrastructure in one line. Your architecture.

Step 1: Install the SDK

npm install @watchtower-sdk/core

Step 2: Connect to a Room

import { connect } from '@watchtower-sdk/core'

// Connect to a room (creates it if it doesn't exist)
const room = await connect('my-room')

console.log('Room code:', room.code)  // Share this!
console.log('Players:', room.players)
console.log('Am I host?', room.isHost)

That's it. You're connected.

Step 3: Send Messages

// Send to everyone in the room
room.broadcast({ x: 100, y: 200, action: 'move' })

// Send to a specific player
room.send('player123', { type: 'private', text: 'Hey!' })

Step 4: Receive Messages

room.on('message', (from, data, meta) => {
  console.log(`Player ${from} sent:`, data)
  console.log('Server time:', meta.serverTime)
  console.log('Tick:', meta.tick)
})

Step 5: Track Players

// When someone joins
room.on('join', (player) => {
  console.log(`${player.name || player.id} joined!`)
})

// When someone leaves
room.on('leave', (player) => {
  console.log(`${player.id} left`)
})

Full Example: Cursor Party

import { connect } from '@watchtower-sdk/core'

const room = await connect('cursors')
const cursors = {}

// Send my position on mouse move
document.onmousemove = (e) => {
  room.broadcast({ x: e.clientX, y: e.clientY })
}

// Receive others' positions
room.on('message', (from, data) => {
  cursors[from] = data
})

// Remove cursor when player leaves
room.on('leave', (player) => {
  delete cursors[player.id]
})

// Draw loop
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  
  for (const [id, pos] of Object.entries(cursors)) {
    ctx.fillStyle = id === room.playerId ? '#00ff00' : '#ff0000'
    ctx.fillRect(pos.x - 5, pos.y - 5, 10, 10)
  }
  
  requestAnimationFrame(draw)
}
draw()

What You Get

What You Build

Next Steps

• Game Patterns — Cursor party, turn-based, action games
• SDK Reference — Complete API documentation