-
-
Save ansarizafar/05893527486b6e52b404a57e09dc4d1c 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