Real-Time Collaborative WhiteBoard
Whiteboards are incredible for those times when your team requires to gather around a similar space and collaborate, but with everything becoming digital, a traditional whiteboard doesn’t make sense when half your team isn’t even in the same office. The promising online whiteboards allow for a team to start drawing even when they’re video conferencing.
If you want to git clone the code and play with it yourself, here’s the link to my GitHub Repo! Repository Link 🔗
Part 1: Setup npm project
You’ll need to install NodeJS and run:
Part 2: index.html
We need to create an HTML5 Canvas element and set the source as "/canavas" .
Part 3: index.js
Now let's set up our node server
Part 4: package.json — Run our server
Add a start script to your package.json so that we can run our server using the npm start command. There’s additional in your package.json file but I just want you to copy this start script. It uses nodemon to run index.js and picks up where one is left off the server every time you save the index.js file so you don’t need to restart the server yourself!
{
“scripts”: {
“start”: “nodemon index.js”
}
}
Now you should be able to run
npm start
and see our app running on port 8080. Open your browser and go http://localhost:8080 to see if it worked.
Part 5: Script.js
Create a directory add file script .js and index.html. In the script.js file, we are having logic behind creating this whiteboard.
Part 6: index.js (Again)
What is socket.io🧐
➨ Socket.IO is a library that enables real-time, bidirectional, and event-based communication between the browser and the server. It consists of:
- a Node.js server
- a Javascript client library for the browser (which can be also run from Node.js)
Now let's Connect the socket to the index.js file.
Now, you’ve got a working whiteboard server using NodeJS!
If you have any questions about this tutorial, please let me know in the comments section of this blog post. You can also contact me through Linkedin. I’m happy to assist you 😊!
