Level: Beginner to Intermediate.
Part 5 - Connecting the Chatroom with WebSockets
Part 5 – Connecting the Chatroom with WebSockets
Welcome to Part 5 of Node.js Tutorial Series: A chatroom for all! In this part, I will show you how to connect your front-end chatroom to the node chatroom backend which we have built in Part 2, Part 3 and Part 4.
Adding jQuery, SocketIO and index.js
What I want to do is replace the single link to bootstrap.min.js with a link to all the other files we need.
Now I will add one more line at the end to create a new block.
I am doing this so that any Jade file that extends layout.jade can also add script tags right before the end of the body tag.
Now we want to use that new block to add a link to our index.js file which we will create in the public/js folder, make sure to create the file.
Make sure that the block starts with zero indentation to follow Jade coding conventions. If you run the node server and navigate to the main page in your browser, you will notice in your F12 tools that the files are being served correctly.
Quick Changes to app.js
Now there’s a few things I want to change in app.js. First, I want to reverse the sorting direction so that the oldest messages are sent first and second, I want to emit the previously received chat messages on the same channel as I plan on receiving the new messages. The changes will go to line 49 and 50 in app.js. This is the result:
Don’t forget to set the CUSTOMCONNSTR_MONGOLAB_URI environment variable before rerunning the app.js file as otherwise the node backend will crash when it can’t connect to your MongoDB.
Powering Up the Send Button
It is time to power up that send button to send messages in the message box using WebSockets to the backend server on the chat channel.
We want to create a socket and we can do that by calling the io() function which is in the socket.io-client.js file.
Followed by that, we want to execute a function on the click of the send message button using the jQuery’s $ function and the click event handler.
We will get the string value in the message box using jQuery’s $ function.
This is where the interesting thing happens, we use the emit function on the socket variable we created in line 1 to send a message on the ‘chat’ channel containing the message box’s value.
At this point, we will append the message in the message box to the #messages div so that the user can see the message was sent. We will assign the value of the message box to an empty string to clear it up.
Now we want to make sure to append the message received on the chat channel from other users to the #messages div. The node backend will not resend the message that the client wrote back to itself but that’s alright because we added the message right away in the click function handler.
Voila, this article shows you how to connect your backend and your frontend using WebSockets. If you want to identify the people in the chatroom or add an avatar for each user, it is up to you but you can use this chatroom onward. In next week’s part, I will show you how to deploy this anonymous chatroom to Azure and show you how you can debug it.
Stay tuned for Part 6! You can stay up to date by following my twitter account @ramisayar.