Build a collaborative drawing app with JavaScript

// Set your PubNub keys here (step 2 of the tutorial).
const pubnub = new PubNub({
  publishKey: 'YOUR_PUBLISH_KEY',
  subscribeKey: 'YOUR_SUBSCRIBE_KEY',
  userId: 'doodler-' + self.crypto.getRandomValues(new Uint32Array(1))[0], // A new random User ID for every page load.
  presenceTimeout: 20 // Seconds without a heartbeat before PubNub reports a timeout.
})

<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.13.1.2.min.js"></script>
<!-- Only for the hosted demo on pubnub.com; does nothing on your copy. -->
<script src="js/demo-config.js"></script>
<script src="js/config.js"></script>
<script src="js/app.js"></script>

// Subscribe to the channel to get strokes (messages), cursors (signals) and who's online (presence events).
const subscription = pubnub.channel(CHANNEL).subscription({ receivePresenceEvents: true })

subscription.onMessage = event => {
  if (event.publisher === pubnub.getUserId()) return // You already drew it.
  const message = event.message
  if (message && message.clear === true) {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
  } else if (message && Array.isArray(message.data)) {
    drawFromStream(message.data)
  }
}

subscription.subscribe()

function draw (e) {
  if (!drawing) return
  const newCoordinates = pointerPosition(e)
  drawOnCanvas(color, oldCoordinates, newCoordinates)
  plots.push({ color, oldCoordinates, newCoordinates })
  // Publishing in batches keeps the number of requests down; browsers throttle many parallel requests.
  if (plots.length >= BATCH_SIZE) {
    publish({ data: plots })
    plots = []
  }
  oldCoordinates = newCoordinates
}

function endDraw () {
  if (!drawing) return
  drawing = false
  if (plots.length > 0) publish({ data: plots })
  plots = []
  oldCoordinates = {}
  nameInput.focus()
}

async function publish (data) {
  try {
    await pubnub.publish({ channel: CHANNEL, message: data })
  } catch (error) {
    console.log(error)
  }
}

function drawFromStream (segments) {
  segments.forEach(segment => {
    if (!segment || typeof segment.color !== 'string') return
    const { oldCoordinates: start, newCoordinates: end } = segment
    if (isPoint(start) && isPoint(end)) drawOnCanvas(segment.color, start, end)
  })
}

function isPoint (point) {
  return !!point && Number.isFinite(point.x) && Number.isFinite(point.y)
}

// Clear: clears only your canvas.
document.getElementById('clearSelfCanvasButton').addEventListener('click', () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
})

// Clear All: clears your canvas and tells everyone else to clear theirs.
document.getElementById('clearAllCanvasButton').addEventListener('click', () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  publish({ clear: true })
})

subscription.onPresence = event => {
  if (event.action !== 'state-change') setOccupancy(event.occupancy) // state-change events carry no occupancy.

pubnub.addListener({
  status: statusEvent => {
    if (statusEvent.category === 'PNConnectedCategory') {
      sendName() // Your name goes out once you're on the channel.
      loadUsers()
    }
  }
})

async function loadUsers () {
  try {
    const result = await pubnub.hereNow({ channels: [CHANNEL], includeState: true })
    setOccupancy(result.totalOccupancy)
    const occupants = (result.channels[CHANNEL] && result.channels[CHANNEL].occupants) || []
    const present = new Set(occupants.map(occupant => occupant.uuid))
    Object.keys(users).forEach(userId => { // Remove cursors of users who left while you weren't listening.
      if (userId !== pubnub.getUserId() && !present.has(userId)) removeUser(userId)
    })
    occupants.forEach(occupant => {
      if (occupant.uuid === pubnub.getUserId()) return
      const state = occupant.state || {}
      getUser(occupant.uuid).setName(cleanName(state.name) || placeholderName(occupant.uuid))
    })
  } catch (error) {
    console.log(error)
  }
}

// Leave the channel when the tab closes, so your cursor disappears for the others right away.
window.addEventListener('pagehide', () => subscription.unsubscribe())
// Back button: the browser restored this page from its cache, so subscribe again.
window.addEventListener('pageshow', event => {
  if (event.persisted) subscription.subscribe()
})

// Track your cursor: move your own label and send the position to the others.
window.addEventListener('pointermove', event => {
  getUser(pubnub.getUserId()).moveTo(event.clientX, event.clientY)
  sendPosition(event.clientX, event.clientY)
})

// Send your cursor position as a signal: small, fast and not stored.
function sendPosition (x, y) {
  clearTimeout(positionTimer)
  const wait = SIGNAL_INTERVAL - (Date.now() - lastSignal)
  if (wait > 0) { // Too soon: send this position when the interval is over, unless a newer one comes first.
    positionTimer = setTimeout(() => sendPosition(x, y), wait)
    return
  }
  lastSignal = Date.now()
  pubnub.signal({ channel: CHANNEL, message: { x, y } }).catch(error => console.log(error))
}

subscription.onSignal = event => {
  if (event.publisher === pubnub.getUserId()) return
  const position = event.message || {}
  if (Number.isFinite(position.x) && Number.isFinite(position.y)) {
    getUser(event.publisher).moveTo(position.x, position.y)
  }
}

Sprite.prototype.setName = function (name) {
  this.label.textContent = name
}

// Your name: shown on your cursor at once, sent when you stop typing.
nameInput.addEventListener('input', () => {
  username = cleanName(nameInput.value) || placeholder
  getUser(pubnub.getUserId()).setName(username)
  clearTimeout(nameTimer)
  nameTimer = setTimeout(sendName, NAME_DELAY)
})

// Store your name in Presence state. The others get it as a state-change event.
async function sendName () {
  try {
    await pubnub.setState({ channels: [CHANNEL], state: { name: username } })
  } catch (error) {
    console.log(error)
  }
}

// Letters, digits, spaces and _ only. Anyone with the keys can set state, so names from the network go through this too.
function cleanName (name) {
  return String(name ?? '').replace(/[^\p{L}\p{N}_ ]/gu, '').substring(0, MAX_NAME_LENGTH).trim()
}

function placeholderName (userId) {
  return 'ANON_' + String(userId).slice(-4)
}

// Leave the channel after 30 seconds without input. Any input resets the timer.
; ['pointermove', 'pointerdown', 'keydown'].forEach(type => document.addEventListener(type, resetIdleTime))
resetIdleTime()

function resetIdleTime () {
  clearTimeout(idleTimer)
  idleTimer = setTimeout(idleUnsubscribe, IDLE_TIMEOUT)
}

function idleUnsubscribe () {
  subscription.unsubscribe() // The others get a leave event and remove your cursor.
  window.location.replace('./timeout.html')
}