Develop Collaborative White Board : Web socket, Node JS & React JS

[@CodeboardClub]

Working Code @ github:
github.com/kousik19/collaborative-whiteboard
*If you face cors error, the easiest workaround as below.*
Please make two changes:
1. In package.json inside UI folder, add following line
"proxy": "localhost:5000"
after; "name": "whiteboard-collab"
2. In board.jsx change:
socket = io.connect("localhost:5000");
to
socket = io.connect("localhost:3000");

[@explosionimplosion4679]

Another super simple solution is adding this to your app:
app.use(require("cors")())

[@VenkateshMogili]

none of them are working :-( If I clone your git repo then it's working but if I use the same code for other project, it's giving cors error. Can you please upload package.json file in backend server folder, it's missing there. If I use these two proxy things then error is not showing in console, but socket is not working.
I have tried it to build Collaborative Coding Application, but If modify in your git repo then it's working, but If I create a new one it's not working. I have attached my code, can you please check if there is any error. [e-mail] this is my email address. Thank you.
backend:
var app = require("express")();
var http = require("http").createServer(app);
var io = require("socket.io")(http);
io.on("connection", (socket) => {
console.log("User Online");
socket.on("editor-data", (data) => {
socket.broadcast.emit("editor-data", data);
});
});
var server_port = process.env.YOUR_PORT || process.env.PORT || 8080;
http.listen(server_port, () => {
console.log("Started on : " + server_port);
});
frontend: (all the 3 files are in components folder without separate folders for each component)
VMEditor: (alias Board)
import React, { Component } from "react";
import Editor from "react-simple-code-editor";
import io from "socket.io-client";
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
const socket = io.connect("localhost:3000");
export class VMEditor extends Component {
constructor(props) {
super(props);
this.state = {
code: "//write your code here...
",
};
}
componentDidMount() {
this.writeOnEditor();
socket.on("editor-data", (data) => {
let interval = setInterval(() => {
this.setState({ code: data });
clearInterval(interval);
}, 1000);
});
}
writeOnEditor = () => {
if (this.timeout !== undefined) clearTimeout(this.timeout);
let root = this;
root.timeout = setTimeout(() => {
socket.emit("editor-data", root.state.code);
}, 1000);
};
render() {
return (

{
this.setState({ code });
this.writeOnEditor();
}}
highlight={(code) => highlight(code, languages.js)}
padding={10}
style={{
fontSize: 30,
height: "600px",
}}
/>

);
}
}
export default VMEditor;
Container:
import React, { Component } from "react";
import VMEditor from "./VMEditor";
import "./style.css";
export class Container extends Component {
render() {
return (

VM Editor




);
}
}
export default Container;
style.css:
.container {
position: fixed;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #1b2738, #463d41);
}
.title {
text-align: center;
color: white;
}
.editor-container {
width: 90%;
height: 80%;
margin: auto;
margin-top: 10px;
background: white;
border-radius: 10px;
}

[@explosionimplosion4679]

@@VenkateshMogili Sorry about that! Are you sure you're getting the cors error? Make sure to require the npm package "cors" in the package.json and also add this line to every backend file:
const cors = require("cors")
app.use(cors());

[@VenkateshMogili]

@@explosionimplosion4679 Yeah, I'm getting cors error. But now it's resolved, I downgraded the socket.io version in backend to ^2.2.0, it worked but again it stopped working, I installed the latest version which is matching with the client side socket.io version. Thank you for the help guys 👍 Finally, after 2 days of trying it got fixed 😊😊😊

[@rahulkumar-sb3rf]

Bro can you make video calling app

[@zenimus]

Congrats on passing the Turing test! Amazing work. 🤖😁

[@smiiks2691]

Wow very enjoyable. Thanks for the video!

[@rahulkumar-sb3rf]

Bro you create awasome project please keep going on.

[@CodeboardClub]

Thanks

[@nikitasingh7388]

@@CodeboardClub I copied the same code but it is not collaborative like the changes on one screen are not appearing on another screen. Please help me quickly I need to submit this as project !!!!!!!!!!! ............and also there are no errors on console .Please help!!!!!!!!!!!!!!!!!

[@cloverd3742]

I'm having the same issue as some mentioned in the comments - the image is not sent from one user to another even after following the two steps in the pinned comment. :(

[@adrihm8165]

one the best coding video I've ever seen

[@CodeboardClub]

Thanks

[@sushant_]

NICE

[@dubey_ji]

Your presentation is quite impressive thanks for the video man !

[@sandipmandal.2423]

Nice one 👍 👌

[@DrProfessorOwl]

Thanks for the tutorial! However, I came across one problem (for me at least). So everytime you create a stroke, a whole base64 image gets emitted, this caused my server to not always get the message, since it's too big. I fixed this by emitting the coordinates of every single stroke. That way you don't have to keep rerendering the whole image, but instead render one stroke. This makes it faster.

[@Mutahar009]

this channel must have 100K subs

[@CodeboardClub]

That means a lot to me. Thank you 😊

[@whaaPenthalaHarshiniReddy]

can u add extra features like shapes eraser and all

[@himthakur619]

Hi sir, can we save as video these canvas drawing in node.js? Any other technique to save it for future replay?

[@movocode]

Make a video on how draw on canvas work

[@ahsanhabib7544]

Very Helpful

[@CodeboardClub]

Thank you 😊

[@mounikamutyala6748]

Can you explain how can we use together JS in this code?

[@CodeboardClub]

May be I will make a separate video. Thanks for suggestion.

[@thebusinesscentre]

Wow this is 😅 AMAZING ❤️🤣

[@670ramy]

Thanks for the nice job.. Any idea how one can add a button that would clear the board?

[@itsarishastic4655]

My screen do not sync
Sketch drawn on one window does not show on other window
There were cors errors i have resolved them using ur pinned comment.
But now the console does not show any error.
Plz tell wat should i do

[@samikhan1657]

I am getting this error:
node:internal/modules/cjs/loader:927
throw err;
^
Error: Cannot find module 'socket.io'

[@CodeboardClub]

You have to install socket.io
npm install socket.io

[@samikhan1657]

After the successful execution of npm install socket-io ....when i write command of node sever.js to execut .....it give the erroor module not found

[@CodeboardClub]

It's socket.io not socket-io

[@samikhan1657]

Thanks dude...😁

[@samikhan1657]

@@CodeboardClub bro now :
Warning: Invalid DOM property `class`. Did you mean `className`?
at div
at div
at Container (localhost:3000/static/js/main.chunk.js:629:5)
at App
console. @ index.js:1
can u have any suggestion or solution

[@snehasingh7334]

Changes on one screen are not visible on the other screen, even after adding the proxy and changing that line in board.jsx
Can you please help?

[@CodeboardClub]

What's the error in the console?

[@snehasingh7334]

@@CodeboardClub I have resolved that error but it's not working in my phone, it's only working on laptop/PC.
Is there any way we can resolve that?

[@hammadrao6508]

@@snehasingh7334 Hey Sneha ,how did you resolve that issue ?

[@satishsidda1859]

Can you explain with the code that how to add rectangle ,circle,line, text etc
Thank you very much.

[@mr.unknown4192]

Sir idk whats the problem but also mine image of draw is not share

[@movocode]

Subscribed immediately 👌👍👍

[@CodeboardClub]

Thank you ☺️

[@abhijitkumarsinha]

Are both the users can write or the one who is presenting?

[@ShubhamKumar-um2rs]

Sir, I am trying to run the code directly of github. But I am unable to do that can you please please guide me how to run on my pc. What tools I have to install. Since, its my first project

[@awaisabbasi1281]

Can you explain with the code that how to erase canvas data like drawings. Thank you very much.

[@WowSpot23]

Hi. Probably is late, but I do have a simple question. Did you get monetized in the end? You have such a great content!

[@deepaktv8280]

Where is 2nd part with more functionality?

[@CodeboardClub]

First of all sorry for the delay. I am creating the video. Will be published this or next weekend. Thanks for your patience.

[@deepaktv8280]

@@CodeboardClub I got an error
TypeError: canvas.toDataUrl is not a function why pls reply fast

[@CodeboardClub]

Send me your code please at my email. You must are doing something wrong. Thanks.

[@deepaktv8280]

@@CodeboardClub I couldn't find your email in the channel so I am pasting Board.js code here please reply fast because this is my first assignment to get further round in campus
import React, { Component } from 'react'
import './Board.css';
import io from 'socket.io-client';
class Board extends Component {
timeOut;
socket = io.connect("localhost:5000");
constructor(props){
super(props);
this.socket.on("canvas-data", function(data){
var image = new Image();
var canvas = document.querySelector("#board");
var ctx = canvas.getContext("2d");
image.onload =function(){
ctx.drawImage(image, 0,0);
};
image.src = data;
})
}
componentDidMount(){
this.drawOnCanvas();
}
drawOnCanvas(){
var canvas = document.querySelector('#board');
var ctx = canvas.getContext('2d');

var sketch = document.querySelector('#sketch');
var sketch_style = getComputedStyle(sketch);
canvas.width = parseInt(sketch_style.getPropertyValue('width'));
canvas.height = parseInt(sketch_style.getPropertyValue('height'));

var mouse = {x: 0, y: 0};
var last_mouse = {x: 0, y: 0};

/* Mouse Capturing Work */
canvas.addEventListener('mousemove', function(e) {
last_mouse.x = mouse.x;
last_mouse.y = mouse.y;

mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
}, false);

/* Drawing on Paint App */
ctx.lineWidth = 5;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = 'blue';

canvas.addEventListener('mousedown', function(e) {
canvas.addEventListener('mousemove', onPaint, false);
}, false);

canvas.addEventListener('mouseup', function() {
canvas.removeEventListener('mousemove', onPaint, false);
}, false);

var root = this;
var onPaint = function() {
ctx.beginPath();
ctx.moveTo(last_mouse.x, last_mouse.y);
ctx.lineTo(mouse.x, mouse.y);
ctx.closePath();
ctx.stroke();
if(root.timoeOut !== undefined) clearTimeout(root.timeOut);
root.timeOut = setTimeout(function(){
var base64ImageData = canvas.toDataUrl("image/png");
root.socket.emit("canvas-data", base64ImageData);
}, 1000);
};

}
render() {
return (






)
}
}
export default Board;

[@deepaktv8280]

​@@CodeboardClub Please Reply fast

[@kushalnaidu9772]

i tried this code but I am not able to draw simultaneously on two browsers, changes in one are not reflecting in the other.

[@CodeboardClub]

Please share me your code.
[e-mail]

[@CodeboardClub]

Fixed and replied you back via mail.

[@Khalmadrog]

@@CodeboardClub Hi, I've got tha same problem, drawings aren't reflected

[@CodeboardClub]

@@Khalmadrog please check my pinned comment. It's probably cors issue.

[@lornamuchangi1223]

Same here

[@amandwivedi4595]

ERROR in ./src/components/board/Board.jsx 5:0-34
Module not found: Error: Can't resolve 'socket.io-client' in 'D:\Programming\PROJECTS\WHITEBOARD COLLAB\ui\whiteboard-collab\src\components\board'
this is an error

[@charminarchaupal]

make sure you navigate to the right directory in your terminal and install the package correctly

[@edwardchandra9813]

Hi Codeboard Club, it was great video anyway, but i got error :TypeError: canvas.toDataUrl is not a function. How to fix it?

[@aishwaryaa8646]

Hi, you might have already fixed it if not, try toDataURL

[@HenchTechGuy]

How do we change the code so that it shows what is already on the board when a user joins

[@CodeboardClub]

Good question. During connection established, you can populate connected user's canvas with latest canvas image data.

[@HenchTechGuy]

@@CodeboardClub thank you for replying, can you show me how please?

[@juliogomezguevara]

@@HenchTechGuy you just have a variable "data" on the server and when you receive the on "canvas-data" update that value... if you then receive an on connection, you can trigger the emit method so the new connection gets the data updated.

[@divyagahlot6527]

What's the purpose of var root = this? How can we replace this for functional component?

[@rajdeepchandra9807]

this here refers to the context that is properties of class Board.

[@vinaychakri9604]

I am cros error like "has been blocked by CORS policy" in browser console

[@CodeboardClub]

Please check my pinned comment.

[@az_az_]

cors problem is solved but when you draw in one window nothing is seen on the another.

[@camylialatif6436]

same here

[@husammaher8633]

hey my friend nice job , can you build a rish text editor real time

[@CodeboardClub]

Thanks for the suggestion. I will one video on that as well.

[@nikitasingh7388]

@@CodeboardClub I am facing a problem changes on one side are not reflected on other side what to do ?? I need this project urgently Please help!!!!!!!!!!!!!!!!!!!!!!!!

[@divyjain490]

src and public files are not getting installed and npm start showing error

[@CodeboardClub]

What error?

[@divyjain490]

Src and other folders are not getting installed and npm start is also not working showing error

[@CodeboardClub]

@@divyjain490 What error are you getting? Copy / paste the error please.

[@khushraho-4-ever]

Facing this Issue can you please help me:
npx create-react-app whiteboard
npx : The term 'npx' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or
if a path was included, verify that the path is correct and try again.
At line:1 char:1
+ npx create-react-app whiteboard
+ ~~~
+ CategoryInfo : ObjectNotFound: (npx:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException

[@CodeboardClub]

You need to install node / npm first.

[@khushraho-4-ever]

@@CodeboardClub Already done here is the result showing on cmd prompt
Microsoft Windows [Version 10.0.19042.928]
(c) Microsoft Corporation. All rights reserved.
C:\Users\MUHAMMAD NADEEM>npm --version
6.14.12
C:\Users\MUHAMMAD NADEEM> node --version
v14.16.1
C:\Users\MUHAMMAD NADEEM>

[@khushraho-4-ever]

@@CodeboardClub Environment variable is also set

[@CodeboardClub]

Could you please try to install npx:
npm i npx

[@khushraho-4-ever]

@@CodeboardClub Thank you for your help I have just installed library create-react-app globally.. Now it's done.

[@maxsuper7156]

Failed to load resource: net::ERR_CONNECTION_REFUSED
polling-xhr.js:268 GET localhost:5000/socket.io/?EIO=3&transport=polling&t=NQF9vAx net::ERR_CONNECTION_REFUSED
I met the problem above, could you plz help me out?

[@CodeboardClub]

It's clear that your server is not running in 5000 port.

[@biptudas4841]

I tried this code but it doesn't work at all, client doesn't connected can you please help me

[@CodeboardClub]

What's the error in console?

[@biptudas4841]

@@CodeboardClub there is no error but changes in one browser doesn't reflect to the other browser

[@CodeboardClub]

There has to be some errors in browser console.. please check

[@biptudas4841]

@@CodeboardClub there are some cors error

[@biptudas4841]

@@CodeboardClub ok I fixed it by following your pinned comment thank you for all your support

[@xiaoshen194]

are bhai video to acha h but why robotic voice?

[@sinni800]

When two people draw at once, they will keep overwriting each other's drawings like this because you always send the whole canvas on an edit.

[@CodeboardClub]

Agreed, I am creating a second part, to add few more functionalities with it - like simultaneous drawing. Also few other interesting functionalities.. Thanks.
Also please share with your friends who may find this helpful. :)

[@abdullahal-ibrahem7750]

@@CodeboardClub we are waiting bro

[@CodeboardClub]

I am creating the video already. You will get to see that very soon. :)

[@CodeboardClub]

2nd part: ua-cam.com/video/bQy6WpIXW18/v-deo.html

[@xyz_only_10x]

Plzz mentor me

[@CodeboardClub]

What help do you need? Is it working for you?

[@xyz_only_10x]

@@CodeboardClub kaushik mandal bhaiya...i think u r bengali...i m too😀😀

[@CodeboardClub]

Yes, I am. :) ..

[@maxicarlos08]

Use refs instead of divs !!!, an empty constructor only calling super is also stupid.