├── Socket.IO ├── server.js └── client.html ├── README.md └── uWebSockets.js ├── server.js └── client.html /Socket.IO/server.js: -------------------------------------------------------------------------------- 1 | const io = require('socket.io')(3000); 2 | 3 | /* Define the server */ 4 | io.on('connection', function(socket) { 5 | 6 | /* For now we only have one canvas */ 7 | socket.join("drawing/canvas1"); 8 | 9 | socket.on('message', (message) => { 10 | /* In this simplified example we only have drawing commands */ 11 | io.in('drawing/canvas1').send(message); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Real-time collaborative drawing built with uWebSockets.js pub/sub 2 | This repo implements a very basic, but fully functional collaborative drawing web app where anyone can join and draw. There are five sheets of paper to swap between using the 1, 2, 3, 4 and 5 keys. 3 | 4 | The papers are of course implemented using separate pub/sub topics (or so called "rooms"), and whatever you draw is published to everyone looking at that paper. 5 | 6 | For comparison there is also a Socket.IO implementation, however this is not meant as a benchmark (for benchmarking against Socket.IO, look at [the stock market example](https://github.com/uNetworking/pubsub-benchmark) instead). 7 | -------------------------------------------------------------------------------- /uWebSockets.js/server.js: -------------------------------------------------------------------------------- 1 | // npm install uNetworking/uWebSockets.js#v16.2.0 2 | const uWS = require('uWebSockets.js'); 3 | 4 | // an "app" is much like Express.js apps with URL routes, 5 | // here we handle WebSocket traffic on the wildcard "/*" route 6 | const app = uWS.App().ws('/*', { // handle messages from client 7 | 8 | open: (socket, req) => { 9 | /* For now we only have one canvas */ 10 | socket.subscribe("drawing/canvas1"); 11 | }, 12 | message: (socket, message, isBinary) => { 13 | /* In this simplified example we only have drawing commands */ 14 | app.publish("drawing/canvas1", message, true); 15 | } 16 | }); 17 | 18 | // finally listen using the app on port 9001 19 | app.listen(9001, (listenSocket) => { 20 | if (listenSocket) { 21 | console.log('Listening to port 9001'); 22 | } 23 | }); 24 | -------------------------------------------------------------------------------- /uWebSockets.js/client.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 73 | 74 | 75 |

76 | 77 | 78 | -------------------------------------------------------------------------------- /Socket.IO/client.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 73 | 74 | 75 |

76 | 77 | 78 | --------------------------------------------------------------------------------