Building a Realtime Drawing App Using Socket.IO and p5.js
Build a realtime drawing app that enables users to draw together on a project
In this tutorial, we’re going to build a realtime drawing app, that enables users to draw together on a project.
So, without wasting any further time, let’s get started.
Before we can start coding, we first need to set up our project and install all the needed dependencies. For that, you need to open your terminal and run the following commands.
First, we need to create a directory and cd into it.
After that, we can start installing the dependencies and creating the needed files.
Npm will ask you some questions — just answer them and continue on with the guide.
npm install express p5 socket.io --save
Now, you need to create the folder structure and files needed for the project. Here’s an image of my folder structure.
You can also find the structure on my Github.
Realtime drawing app using SocketIO and p5.js. Contribute to TannerGabriel/DrawingApp development by creating an…
Voilà, the initial setup is done, so we can start creating our layout, and implementing the drawing functionality.
Now that we have the project set up, let’s start creating the layout in our
Here, we just create a basic HTML file with two input fields. We’ll use these later on to change the color and width of our stroke.
Let’s also add some basic CSS styling to our application to make the import fields and buttons look better.
After that, we can start implementing our drawing features using the p5.js library.
It provides a full set of drawing functionalities, and even its own dom (Document Object Model). In this tutorial we will use it to create and manage our drawing canvas, as well as adding event listeners, to the two buttons we added above.
First, you need to create a
sketch.js file in your public folder, if you haven’t already. Then we can start by implementing the basic p5
After that, we can start by creating a drawing canvas and positioning it on our page.
Now, we continue implementing the
mouseDragged() function, so we can draw when the user clicks on the canvas.
Here, we set the color and width of our stroke, and then draw a line using the coordinates we get through our p5 library.
Adding button listeners
We just need to get the color and stroke width from our input fields, using the p5.js dom. For that, we need to add an onclick listener to our two buttons, and then get the input from the field.
We start by creating two variables on top of our script to hold the color and stroke width, and assign them a default value.
We get our buttons and inputs, using the
select() function provided by the p5.js dom.
After that, we add a
mousePressed listener to our buttons, which will be executed whenever the button is clicked. Then we validate the current input value, and save it into our variable if it is valid.
Complete Source Code For Sketch.js
This is the complete source code we wrote so far.
Adding the Server Side
Now let’s look at how we can use Express js to run our drawing application in the browser.
First we need to create a basic express server, and listen to it on a port on our PC. We will do so in our
Now we only need to tell our app to use the resources located in the public folder.
After that we can test our app by running the
node server command in our command line.
After running it you should see a black drawing canvas in the middle of your screen when you visit http://localhost:3000/ in your browser, and you should be able to draw on it.
Complete Source Code for the Server.js
Now that we have finished building the drawing functionality and the server, let’s take a look at how to use Socket.IO, to enable realtime communication between the users.
First, let’s look at how we can setup Socket IO in our project, and how we can listen to our own events.
For that, we need to import Socket.IO in our
server.js and pass the server variable to it.
After that, we need to add some listeners to our socket, so we can react to events like sending data.
Note that the mouse event is a custom event that we will create in our
sketch.js file later on.
Socket.broadcast.emit is used to send out the data to all sockets that are currently online, except the socket that is sending it.
Using Socket.IO in sketch.js
Next, we need to create the client side implementation of Socket.IO.
For that, we need to create a socket variable which will hold our Socket.IO client.
We then initialize a socket by calling the
connect() function on our IO object, and passing it the URL our website runs on (in this example localhost:3000).
We can now start sending our data to all the other sockets that are currently online, by getting our drawing data and sending it using the
Emit takes to the parameters ID (of the event it should be sent to. In our case
mouse as we defined in the
server.js file) and the data we want to send.
Now, we only need to call the function whenever we draw in our
After that, we just need to get the data, which is sent by other sockets. We can do so by listening to our
mouse event, which will be called whenever a socket sends out data. Then we just need to draw the lines with the data we receive.
That’s it! Now you just need to test your application by opening it in multiple windows and draw in them.
The whole project can also be found on my Github:
I hope this article helped you understand the basics of SocketIO and how you can use it in your projects.
If you have any questions or feedback, let me know in the comments down below.