실시간 협업을 위한 마우스 트래킹 구현

두 브라우저에서 각각 접속해서 서로 마우스 위치를 공유하는 모습입니다. 인테리어 디자인 소프트웨어에서 사용할 계획입니다.

Socket.io를 이용하여 쉽게 구현할 수 있었습니다. mousemove 이벤트가 발생할 때마다 마우스 x, y 좌표를 서버로 보냅니다. 서버는 받은 좌표를 ID 정보와 함께 다른 클라이언트에게 전파합니다.

mousemove 이벤트는 짧은 시간에 여러번 발생하기 때문에 부하를 주기 쉽습니다. 그래서 rxjs가 제공하는 sampleTime 함수를 이용해 500ms 간격으로 마우스 좌표를 보내도록 구현했습니다.