Building a Realtime Drawing App Using Socket.
IO and p5.
jsBuild a realtime drawing app that enables users to draw together on a projectGabriel TannerBlockedUnblockFollowFollowingJun 18Photo by Kelli Tungay on UnsplashIn this tutorial, we’re going to build a realtime drawing app, that enables users to draw together on a project.
The application is built using an Express js server and p5.
js for the drawing features.
Client-side communication is handled through WebSockets — namely Socket.
IO.
So, without wasting any further time, let’s get started.
SetupBefore 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.
mkdir drawingappcd drawingappAfter that, we can start installing the dependencies and creating the needed files.
npm initNpm will ask you some questions — just answer them and continue on with the guide.
npm install express p5 socket.
io –saveNow, 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.
TannerGabriel/DrawingAppRealtime drawing app using SocketIO and p5.
js.
Contribute to TannerGabriel/DrawingApp development by creating an…github.
comVoilà, the initial setup is done, so we can start creating our layout, and implementing the drawing functionality.
Application LayoutNow that we have the project set up, let’s start creating the layout in our index.
html file.
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.
Drawing FunctionalityP5.
js is a JavaScript processing library, with the goal to make coding accessible to artists and designers.
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.
Adding canvasFirst, 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 setup() function.
After that, we can start by creating a drawing canvas and positioning it on our page.
Implementing drawingNow, 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 listenersWe 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.
jsThis is the complete source code we wrote so far.
Adding the Server SideNow 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 server.
js file.
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.
jsSocket.
IONow 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.
Socket.
IO setup: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.
jsNext, 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() function.
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 mousDragged() function.
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.
Complete CodeSketch.
js:Server.
js:The whole project can also be found on my Github:TannerGabriel/DrawingAppRealtime drawing app using SocketIO and p5.
js.
Contribute to TannerGabriel/DrawingApp development by creating an…github.
comConclusionI 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.
.. More details