My Code

Code is ook te vinden op mijn GitHub!

Server-Side code voor een teken programma!

We beginnen met NPM-packages te require-en waarmee we een HTML server en een socket server kunnen maken.

const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const { v4: uuidV4 } = require('uuid');
        

Daarna beginnen we door wat 'static' files te hosten voor bvb. onze javascript en css.

app.use(express.static('public'));
        

Daarna kijken we voor mensen die op de root URL verbinden en sturen hun door naar een nieuwe 'room'.

app.get('/', (req, res) => {
    res.redirect(uuidV4());
});
        

Als ze een URL meegeven met een 'room' linken we hun socket aan de 'Room id'.

app.get('/:room', (req, res) => {
    res.render('room', { roomId: req.params.room });
});

io.on('connection', socket => {
    socket.on('join', roomId => socket.join(roomId));
});
        

Elke keer in de client side script als iemand tekent wordt het emit met de socket.

socket.emit('draw', {ROOM_ID, mPos: { x: mouseX, y: mouseY }, pmPos: {x: pmouseX, y: pmouseY}}); 
        

De server stuurt het vervolgens door aan iedereen die in hetzelfde room zou mogen zitten.

io.on('connection', socket => {
    socket.on('draw', ({ ROOM_ID, mPos, pmPos }) => {
        socket.broadcast.to(ROOM_ID).emit('draw', { mPos, pmPos });
    });
});