https://github.com/robert-96/websockets-cursor-sharing
An interactive web application that shares cursor positions in real-time, created using WebSockets and Node.js.
https://github.com/robert-96/websockets-cursor-sharing
demo javascript nodejs sockjs websocket
Last synced: about 2 months ago
JSON representation
An interactive web application that shares cursor positions in real-time, created using WebSockets and Node.js.
- Host: GitHub
- URL: https://github.com/robert-96/websockets-cursor-sharing
- Owner: Robert-96
- License: mit
- Created: 2023-02-28T22:53:06.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-02T22:13:04.000Z (over 3 years ago)
- Last Synced: 2024-04-15T00:17:23.044Z (about 2 years ago)
- Topics: demo, javascript, nodejs, sockjs, websocket
- Language: JavaScript
- Homepage:
- Size: 25.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# websockets-cursor-sharing
> An interactive web application that shares cursor positions in real-time, created using WebSockets and Node.js.
This demo application is designed to generate a distinct colored cursor icon for each user who is connected to the application. As a user moves their mouse, their cursor icon moves on their own screen and on the screen of every other connected user. The movement of the cursor icon is updated in real-time as the user moves their mouse.
## How it's built?
* `/app` is the frontend application.
* `/server` is a WebSocket server.
* Web app connects to the WebSocket server.
* On connection, each client is assigned an id and a color.
* On mouse move, coordinate updates are sent to the server.
* The server adds the client's id and other metadata.
* The new coordinates are sent to all the clients.
## What's in here?
This repository consists of two variations of a demonstration application that leverages WebSockets to share cursor positions. The primary version uses [ws](https://www.npmjs.com/package/ws) on the `main` branch, whereas the `sockjs` branch utilizes [SockJS](https://www.npmjs.com/package/sockjs).
## Running this Demo
```bash
> npm install
> npm run start
```