Websocket js - create simple white-board

Hello.

We will create a simple white-board with a web-socket.

The white-board is just an empty screen to draw lines.
This board can be used by different users at the same time.
Every moment you draw a line, another user can see it.

We need an SVG to draw lines and a web-socket to keep shearing the image.

Lets get it started.

First we need to create the client side.
Lets create a site.
Lets add an SVG with a path element.
To make it simple use the same values for the viewbox and dimensions of the SVG.

To use a web-socket we need to create a WebSocket object.
In the constructor parameter we set the URL of the web-socket server.
We will create this server a little bit later.

To get data from the server we need to subscribe to the message events.

To send data use the send method.

To draw a line we press the left mouse button at the start of a line and release at the end.
So we need a mousedown event to remember the start of the line.
And the mouseup event to get the end of line.

In the mouse up event handler we create a string from a template.
In this string letter M stands for move and letter L stands for line.
This string will draw a line from M to L.
We send this short string to the server with the websocket send method.
And the server will transmit this string to all the clients.

Now we need the server.
We will use the ws - a node JS websocket library.
In a separate folder install ws library and create index.js file.

Create a new WebSocketObject.
Subscribe to connection and message events.
Each time a new client is connected we remember the connection and send the user the big picture.
As the user sends a new line we add this line to the big picture and transmit the picture to all the connections.

To start the server open the folder and type node index.js.

Lets check it out.
Open the site in two browsers. Draw a line in a browser. Then a line in another. The white-board image is sheared.

Thank you for watching to the end.
Subscribe to our channel and you will find more JS-videos.

script.js

const socket = new WebSocket('ws://localhost:8080');const svg = document.getElementById('svg');const path = document.getElementById('path');let e0;socket.addEventListener('message', e => {   path.setAttributeNS(null, 'd', `${e.data}`);});svg.addEventListener('mousedown', e => e0 = e);svg.addEventListener('mouseup', e => {   socket.send(`M ${e0.offsetX} ${e0.offsetY} L ${e.offsetX} ${e.offsetY}`);});

index.js

import {WebSocketServer} from 'ws';const wss = new WebSocketServer({port: 8080});const connections = [];let d = '';wss.on('connection', ws => {    connections.push(ws);    ws.on('message', onMessage);    ws.send(d, {binary: false});});const onMessage = data => {    d += data;    connections.forEach(ws => ws.send(d, {binary: false}));};

Source code:
https://github.com/101samovar/js-web-socket.git

Our channel:
https://youtu.be/vMohjUWrR10

I hope you found this article useful, if you need any help please let me know in the comment section.

See you next time. Have a nice day!