3.Screen Sharing - Mouse Event

1. 설명

저번 글까지 화면 공유 기능을 완료했다.

이번 글에서는 현재 탭을 공유하는 기능과 시청자의 마우스 이벤트를 공유자의 화면에서 발생시킬 수 있도록 개발하겠다.

참고로 mouseMove 이벤트의 경우 많은 트래픽을 발생시키고, click 이벤트의 경우 좌표 조정이 필요하지만.

아직 테스트 단계라 두 가지 이슈가 있다는 정도만 파악하고 기능 구현을 먼저 했다.

 

현재 시청자의 화면 속도가 느리고 이런 저런 이슈들이 있을 것이다.

그 문제는 다음 글에서 해결할 것이니 너무 걱정하지 말자.

1, 2, 3번 글은 단순히 `이런 기능이 이렇게 구현이 가능하다` 를 설명하는 글일 뿐이다.

 

2. 공유자는 화면을 공유하고 마우스 이벤트를 받을 준비

remoteCusor라는 div를 만들어서 시청자의 마우스 커서를 표현해줄 것이다.

차후에는 시청자들이 입장할 때마다 저 remoteCursor라는 div들이 동적으로 계속 생성되어야 할 것이다.

또한 현재는 그냥 좌표를 대충 받아오기 때문에, 해상도에 따라 좌표를 맞춰주는 작업도 추가적으로 필요하다.

지금은 기능 구현을 먼저 해보는 것이라, 차후에 고도화를 진행하도록 하겠다.

click : function click(){

    ...

    //시청자의 마우스 커서를 표현한 div
    const remoteCursor = document.getElementById("remoteCursor");
    remoteCursor.style="position: absolute; width: 10px; height: 10px; background: red; z-index : 50; pointer-events: none;";
    socket.on("mouseMove", data => {
        remoteCursor.style.left = data.x + "px";
        remoteCursor.style.top = data.y + "px";
    });

    socket.on("mouseClick", data => {
        const targetElement = document.elementFromPoint(data.x, data.y);

        if(targetElement){
            const event = new MouseEvent("click", {
                clientX : data.x,
                clientY : data.y,
                bubbles : true,
                cancelable : true
            });

            targetElement.dispatchEvent(event);
        }
    });
}

 

 

3. 시청자는 마우스 이벤트를 전달

이렇게 개발하게 되면, mouseMove와 click 이벤트가 매우 많이 서버로 전송된다.

다음 글에서 이 문제에 대한 해결 방법을 포스팅 해놓겠다.

여기서 해결 방법을 작성해도 되지만, 여기서는 이벤트가 어떻게 전송되고 받는지 설명하는 것이

중요하다고 생각하여 다음으로 미루겠다.

const socket = io("http://localhost:3080", {transports : ["websocket"]});

socket.on('connect', () => {

    ...

    socket.on("screenData", data => {
    
        ...

        videoElement.addEventListener("mousemove", (event) => {
            socket.emit("mouseMove", {
                x: event.clientX,
                y: event.clientY
            });
        });

        videoElement.addEventListener("click", (event) => {
            socket.emit("mouseClick", {
                x: event.clientX,
                y: event.clientY
            });
        });                
    });
});

 

4.서버는 데이터 전달

역시나 서버에서는 별다른 로직이 없다.

import { MessageBody, OnGatewayConnection, OnGatewayDisconnect, OnGatewayInit, SubscribeMessage, WebSocketGateway, WebSocketServer } from "@nestjs/websockets"
import { Server, Socket } from "socket.io"

@WebSocketGateway()
export class SharingGateway implements OnGatewayConnection, OnGatewayInit, OnGatewayDisconnect{
   
   ...

    @SubscribeMessage("mouseMove")
    handleMouseMove(client : Socket, payload : any){        
        client.broadcast.emit("mouseMove", payload);
    }

    @SubscribeMessage("mouseClick")
    handleMouseClick(client : Socket, payload : any){        
        client.broadcast.emit("mouseClick", payload);
    }
}

 

 

사용자의 마우스 이벤트까지 잘 받았다.

사용자의 이벤트를 받는 것은 매우 간단하게 끝났다.

 

다음 글 부터는 이제 개발한 것들을 가지고 고도화를 진행하는 글이 될 것이다.

어떤 부분을 어떻게 고도화 진행했는지에 대해 주기적으로 포스팅을 수정하겠다.