socket runtime realtime demo

realtime.js

import { network, Encryption } from 'socket:network'
import process from 'socket:process'
import Buffer from 'socket:buffer'
import fs from 'socket:fs'

window.onload = async () => {
  const peerId = await Encryption.createId()
  const signingKeys = await Encryption.createKeyPair()

  const clusterId = await Encryption.createClusterId('asdfasdfasdfasdfas') // change this!
  const sharedKey = await Encryption.createSharedKey('asdfasdfasdfasdfas') // change this!

  const socket = window.socket = await network({ peerId, clusterId, signingKeys })

  socket.on('#ready', async () => {
    const drawing = await socket.subcluster({ sharedKey })

    const canvas = document.getElementById('canvas')
    const context = canvas.getContext('2d')

    const setSize = () => {
      canvas.width = document.body.offsetWidth
      canvas.height = document.body.offsetHeight
    }

    setSize()
    window.addEventListener('resize', setSize)

    let isDrawing = false
    let x = 0
    let y = 0

    function drawLine(context, color, x1, y1, x2, y2) {
      context.beginPath()
      context.strokeStyle = color
      context.lineWidth = 1
      context.moveTo(x1, y1)
      context.lineTo(x2, y2)
      context.stroke()
      context.closePath()
    }

    const getOffset = e => {
      if (e.offsetX) return { offsetX: e.offsetX, offsetY: e.offsetY }
      if (!e.targetTouches[0]) return { offsetX: 0, offsetY: 0 }

      const rect = e.target.getBoundingClientRect()

      return {
        offsetX: e.changedTouches[0]?.pageX - rect.left,
        offsetY: e.changedTouches[0]?.pageY - rect.top
      }
    }

    const penDown = e => {
      isDrawing = true
      const o = getOffset(e)
      x = o.offsetX
      y = o.offsetY
    }

    const penUp = e => {
      if (!isDrawing) return
      const o = getOffset(e)
      if (o.offsetX <= 0) return
      if (o.offsetY <= 0) return

      drawLine(context, 'black', x, y, o.offsetX, o.offsetY)
      x = o.offsetX
      y = o.offsetY
      isDrawing = false
    }

    const penMove = e => {
      if (!isDrawing) return
      const o = getOffset(e)
      drawLine(context, 'black', x, y, o.offsetX, o.offsetY)
      const value = { x1: x, y1: y, x2: o.offsetX, y2: o.offsetY, ctime: Date.now() }
      const data = new Buffer.from(JSON.stringify(value))

      if (o.offsetX > 0) x = o.offsetX
      if (o.offsetY > 0) y = o.offsetY

      for (const peer of drawing.peers.values()) {
        peer.emit('draw', data)
      }
    }

    canvas.addEventListener('touchstart', penDown)
    canvas.addEventListener('mousedown', penDown)

    canvas.addEventListener('touchend', penUp)
    canvas.addEventListener('mouseup', penUp)

    canvas.addEventListener('touchmove', penMove)
    canvas.addEventListener('mousemove', penMove)

    drawing.on('draw', value => {
      try {
        const { x1, y1, x2, y2 } = JSON.parse(value)
        drawLine(context, 'black', x1, y1, x2, y2)
      } catch (err) {
      }
    })
  })
}