Search code examples
javascriptwebsocketfrontendreal-time

Best way to show others people cursor on the screen without affecting resources too much

I wonder how some apps can display collaborators' cursors on the screen and update their position in real time without affecting too much the resource of the client.

I tried to do that with websocket/onmousemove: when I move my mouse I send info to the server which send it to others clients and update my position with JS/CSS on their screen.

Is there a better solution?

Regards,

Solution

  • What you can do to get better performance would probably be to send / receive fewer packets, and calculate most of the mouse movement.

    I mean, instead of sending every mouse move, you could send them once in a while (like 500ms), and then on the client receiving those moves, animate the cursor to the new position with an animation duration of the same length (500ms in this example).

    In order to do so, in your onmousemove event you can use a global variable, like lastPacketTime, if the current timestamp Date.now() is below lastPacketTime + 500ms, return. Otherwise, send the packet, and update lastPacketTime