Created
January 27, 2024 15:41
-
-
Save heapwolf/e9de87b23b8a2dd0d852b42c5d60090a to your computer and use it in GitHub Desktop.
socket runtime realtime demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) { | |
} | |
}) | |
}) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment