ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add socket send for mouse events (#50)

Browse Source 
Add socket send
This commit is contained in:
Adam Sunderland
2023-03-08 14:07:40 -05:00
committed by GitHub
parent 3180702e7d
commit d729ae3990
1 changed files with 4 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Stream.tsx
View File

@ -77,17 +77,15 @@ export const Stream = () => {
} }
}) })
// TODO instead of logging, send use `socket` to send to server, maybe something like?: const debounceSocketSend = throttle((message) => {
// const debounceLog = throttle((xy) => { socket.send(JSON.stringify(message))
// socket.send(JSON.stringify({ type: 'mouse', xy })) }, 100)
// }, 100)
const debounceLog = throttle(console.log, 100)
const handleMouseMove = ({ clientX, clientY }: MouseEvent) => { const handleMouseMove = ({ clientX, clientY }: MouseEvent) => {
if (!videoRef.current) return if (!videoRef.current) return
const { left, top } = videoRef.current.getBoundingClientRect() const { left, top } = videoRef.current.getBoundingClientRect()
const x = clientX - left const x = clientX - left
const y = clientY - top const y = clientY - top
debounceLog([x, y]) debounceSocketSend({ type: 'MouseMove', x: x, y: y })
} }
if (videoRef.current) { if (videoRef.current) {
videoRef.current.addEventListener('mousemove', handleMouseMove) videoRef.current.addEventListener('mousemove', handleMouseMove)