Installation

Install the Watchtower SDK via npm or CDN.

npm / yarn / pnpm

npm install @watchtower-sdk/core
yarn add @watchtower-sdk/core
pnpm add @watchtower-sdk/core

CDN

For quick prototyping or vanilla JS projects:

<script type="module">
  import { connect } from 'https://unpkg.com/@watchtower-sdk/core'
  
  const room = await connect('my-room')
</script>

Usage

ES Modules (recommended)

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

const room = await connect('my-room')
room.broadcast({ hello: 'world' })

CommonJS

const { connect } = require('@watchtower-sdk/core')

async function main() {
  const room = await connect('my-room')
  room.broadcast({ hello: 'world' })
}
main()

TypeScript

TypeScript types are included. No additional packages needed.

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

const room: Room = await connect('my-room')

interface GameMessage {
  type: 'move' | 'chat'
  x?: number
  y?: number
  text?: string
}

room.broadcast({ type: 'move', x: 100, y: 200 } satisfies GameMessage)

Framework Integration

React

import { useEffect, useState } from 'react'
import { connect, Room } from '@watchtower-sdk/core'

function useRoom(roomId: string) {
  const [room, setRoom] = useState<Room | null>(null)
  
  useEffect(() => {
    connect(roomId).then(setRoom)
    return () => room?.leave()
  }, [roomId])
  
  return room
}

Vue

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { connect } from '@watchtower-sdk/core'

const room = ref(null)

onMounted(async () => {
  room.value = await connect('my-room')
})

onUnmounted(() => {
  room.value?.leave()
})
</script>

Requirements

  • Modern browser with WebSocket support (all current browsers)
  • Node.js 18+ (for SSR/testing)

Next Steps