So as we discussed in my previous blog about Golang, WebSocket and Angular 2, how to build a Chat-Server with the help of Golang to implement a Chat application. Chat Server that broadcast messages to the all connected clients, and to achieve this task server uses different Channels like manager.register, manager.unregister, manager.broadcast, Conn.send, manager.send.
In order to build a successful real-time chat application, we all need a chat client also, through which we can send and receive messages over a Go chat server.
So, Let’s move forward and start to implement Chat-Client…..
Building an Angular 2 Chat Client
We are going to create a client facing application where we can send and receive the messages. For this, you need to install the Angular 2 CLI and after installation.
Installation Steps of Angular 2 CLI
Step 1: Install Angular- CLI
Firstly we need to install Node-js and NPM then move to the Angular-CLI.
This is a step that we only have to do once. Once installed globally with “-g”, we can skip this step when creating new Angular 2 projects.
Open command line prompt and execute the following command:
It will take some time. So, wait while processing.
Step 2: Start your angular project
Now, in the command line, navigate our project’s folder and type:
The “ng new” command will retrieve all of the files, as well as run the “npm install” command. Then simply cd into the directory, and to run it in the browser (similar to “npm start“) run the “ng serve” command.
So, the installation of angular-CLI completed. Let’s move forward with our work(Implementation of chat client ), now we need to execute the following to create a fresh project:
It will be a single page application and what we hope to achieve can be seen in the animated image found below.
The above command will create src/app/socket.service.ts and src/app/socket.service.spec.ts within your project. The spec file is for unit testing, something we won’t explore in this particular example. Open the src/app/socket.service.ts file and include the following TypeScript code:
The provider emits data, based on certain events and It will be injectable. In the constructor, a WebSocket connection to the Golang application is established and three event listeners are created. One event listener for each socket creation and destruction as well as a listener for when messages come in.
The method send will allow us to send messages to the Golang application and the close method will allow us to tell the Golang application that we are no longer connected.
The provider is created, but it cannot yet be used within each page of the application. To do this we need to add it to the project’s @NgModule block found in the project’s src/app/app.module.ts file. Open it and include the following:
Here, we have imported the provider and added it to the provider’s array of the @NgModule block.
So, now we can focus on the page logic for the application. Open the project’s src/app/app.component.ts file and include the following TypeScript code:
In the constructor of the above class AppComponent, we inject our provider and initialize the public variables that bound to the UI (User Interface). But it is not a good approach to load events within the constructor method so instead of this approach, we use the method ngOnInit.
In the above method, we are subscribing to the event listener which we had created in the provider class. In it, we check, to see what kind of event we found. If the event is a message then we check, if there was a sender and prepend it to the message.
So, in the above example, you will notice that some messages are starting with a slash. It used to represent system messages later will be bold.
The close event is sent to the server if the chatbox is sent, the message is sent to the server.
A chat application would not be complete without a pretty UI. We will create a simple, clean interface using HTML5. we can also take advantage of some libraries like Materialize CSS and EmojiOne for some styling and emoji goodness.
We used CSS (Cascading Style Sheets ) to make our Chat Application more realistic and attractive.It makes our chat application more legitimate.So for this open the project’s src/styles.css file and include the following Code:
Now let’s have a look at the HTML (Hypertext Markup Language) markup which provides a way of interaction. Open the project’s src/app/app.component.html file and include the following:
To display the messages on the screen, we simply loop through the messages array. Any message that starts with a slash (/) will be bolded. The form is bound to be a public variable when the send button is pressed and it will be sent to the Golang server.
So, In this way, we achieved a successful Chat application through which we can chat over a Golang chat server.
Running the Application
To run the application, open a console window and make sure that you are in the “src” directory of your application then run the following command.
$ go run main.go
This is just a basic chat application, but there are many more improvements you can make it.In this way, you saw how to create a WebSocket real-time chat application using Golang and Angular 2. In this chat application example, we are not storing any history of the chats. The logic can be implemented to much more complicated projects that include gaming, IoT (Internet of things), and plenty of other use cases. This Implementation takes care about how one chat client can communicate with other using a Golang chat server and how a chat server broadcast that messages.
So, This is all about how we can implement a real-time Chat Application using a powerful programming language i.e Golang with the combination of WebSocket and Angular 2.
“GO WILL BE THE SERVER LANGUAGE OF THE FUTURE.” — TOBIAS LÜTKE, SHOPIFY
I hope you found this blog helpful and must be now inspired to start creating your own real-time web applications using WebSockets and Go.