Real-time Updating Chat Room using Angular + Spring Boot + Web Sockets

Photo by Volodymyr Hryshchenko on Unsplash

What is really the specialty when it comes to web sockets? Lets find out.. We know that we can simply make a chat app by using a database and few code lines where we store and retrieve data when required. But with web sockets is how this process happens real time. There will be no need to refresh the page to get new messages, yet it will be automatically updated.. 

So let us now see how we could implement this.

Lets us first create the angular project.

ng new project_name

Now we will create a basic html page to send messages and to display the received messages. So move to the app.component.html file.

Now its time to implement the web socket in the front-end. For that we need to move to the app.component.ts file. Here we will also be implementing a method to establish the connection with the back-end, to send messages and also to receive messages.

Do not forget to include the below command in your polyfills.ts file.

(window as any).global = window;

It is important to make sure that all the imports which are mentioned at the beginning of the component.ts files are present in the project node modules folder. If not they must be installed as below.

npm install imported_file_name

Now we need to create our Spring Boot project. Click here to create and download your Spring Boot project just by few clicks.

We need to add the below dependencies to our pom.xml file to import them to our project in order to use them.

Now we need to create the configurations of our web socket. For that we will be creating a separate class for our convenience.

As it is done now we move on to the final section which is the controller. Here is where we get the data from the front-end and send data back to front-end with the use of the configured web socket.

With that we have come to the end of our implementation.. Definitely you must be eagerly waiting now to check whether this works.. So check it out now..

The project source code can be viewed and downloaded from GitHub.. You can simply add it to your project when ever required.

Hope you got an idea about how to implement web sockets in your project.. You can even add a database to this app to save the messages sent and to load them each time you open the message list.. 

Try it out.. Trust me.. Only a few lines more to be added..

Cheers!! Have a pleasant day!! 

Leave a Reply

Your email address will not be published. Required fields are marked *