Real Time Chat with Node.js Cluster & Websocket (ClusterWS)
Ohh no building real time chat again…. There are lots of articles about doing it, so what it is the point in this one.The thing is that this article is mainly to show how you can build Chat with ClusterWS (the framework which i mention in the last article). I am pretty sure that this is the first article about building chat with ClusterWS 😈.
This article is outdated!!!
The great thing about ClusterWS is that all the dirty logic with Worker division and Pub/Sub system done on the background so you don’t have to worry about it.
So the chat which we gonna build is going to be exactly like that:
Actually it is the chat which we gonna build 😄
Ok, i think it is time to start.
1. Creating the project
The first thing which we need to do is to create Node.js project, go to the folder where you want to do it and just run:
and follow the instructions to create package.json file.
2. Installing dependencies
Now we have package.json and we can install all needed dependencies.
First, we need to install ClusterWS from this repository:
ClusterWS - is a minimal Node JS http & real-time framework which allows to scale WebSocket between Workers in Node JS…github.com
npm install --save clusterws
To handle http / static files and so on we need to use some other framework like Express/ Koa etc. So i am going to use Koa and Koa Static (for static files).
To install run:
npm install --save koa koa-static
The last thing we need to have ClusterWS Client JS library from:
Now create folder public and inside that create another folder assets.
With client library everything is a bit different we actual have 2 ways to install it. First one is to go the the repository and copy ClusterWS.min.js from dist/browser to your public/assets folder.
I will do it another way, will start with installing client library with:
npm install --save clusterws-client-js
And after that navigate to node_modules/clusterws-client-js/browser and copy ClusterWS.min.js to the public/assets folder.
Great we have installed everything and now can start codding. 😃
3. Writing the code 😎
Now start the most interesting part of this whole article.
Will start with creating server.js file in the root of our project with the following code (all description done in comments):
That was pretty simple for the chat server. And yes it is all what we need on the server, all other logic is going to be in the client side.
Now we can build client side, first create index.html file in public folder with the follow code:
Now we need to write main logic for client, to do that create main.js in public/assets folder with:
I hope that code and comments are explaining everything well. 😄
Ok we left only with some styles to make our chat more or less beautiful (unfortunately i was a bit lazy to work with styles so they are not really good), to connect styles just create styles.css in public/assets with:
Now chat should be working fine, you can try by navigating to the root of the project in your terminal and running:
You should be able to see blue color text if it is the case, then open it in the browser localhost:yourport (in my case it is localhost:80).
To test it just open localhost in 2 browser windows and try to send message.
I hope you like it. You can find all code in this repository:
Contribute to ClusterWS-Chat-Example development by creating an account on GitHub.github.com
Thank you for your time, if liked the article please share it and clap.