Build Real-time Chat Application using Golang, Gorilla Mux, Gosocketio, Vue.js

Features of Real-time Chat Application

1. When starting up the chat app, users must create a username [mandatory] and can update their profile picture [optional].
2. The user name should be unique.
3. Each user’s chat window will be treated as a room, they can begin chatting if the room already has a user assigned to it. otherwise, they must wait until another user joins the room.
4. One room should only have two users.
5. Every two users should have their own room. Before beginning the chat, both users should have a username.
6. If a user disconnects, they are removed from the room, and the next new user is added to the room, which only has one user.
7. When the chat begins, the option to send an email will be enabled. The chat can be exported to the user’s email.
8. If a new user joins the room where the previous user left, they can able to export a previous chat to their emails.
9. The user will be able to change their profile picture.
10. When a new message arrives, the user will be notified with an alarm sound.
11. Users can join available groups, begin chatting, and then leave the group if needed

Let’s go through the application video:

Now let’s get into creating the application:

Building a Real-Time Chat Application using Socket.IO

So, what is Socket.IO? Socket.IO is a library that allows a client and a server to communicate in a low-latency, bidirectional, event-based manner.

Benefits of Socket.IO vs Websocket:

1. Socket.IO allows messages to be sent to all connected clients. for example, if you want to notify all relevant customers, you can broadcast all your messages at once. WebSockets, on the other hand, will provide a list of all relevant clients for which you need to send private messages.
2. Using WebSockets makes it difficult to implement and scale proxies and load balancers. while using Socket.IO it can be done with less effort.
3. Unlike WebSockets, Socket.IO can fire technology when buyers don’t help it.
4. If your connection fails, Socket.IO will handle that for you, while WebSocket will not automatically reconnect.
5. the Socket.IO API is easy to build and use.

We used the following in our application: graarh — golang-socketio

Steps to Build a Real-time Chat Application using Golang

Step #1: Initializing Golang server for base project setup

• Create a directory called GoChat
• mkdir GoChat
• cd GoChat
• Initialize go.mod to get started
• go mod init GoChat
• mux for routing and handling HTTP requests
• $go get github.com/gorilla/mux
• graarh for socket.io
• $go get github.com/graarh/golang-socketio
• go-simple-mail for sending email
• $go get github.com/xhit/go-simple-mail/v2

Step #2: Code Setup

• Create a main.go file
• main.go

Step #3: Create a logger function

Step #4: Create a router and initialize routes

Step #5: Send email function

Step #6: Main function explanation

• Create server instance ( serve at 80)
• Set up a socket.IO
• When a new user enters the channel, it checks to see if there are any existing rooms with vacancies. if so, it assigns the user to the existing room, otherwise, a new room is created.
• If the user exits the room, they will be removed from it.
• When a user sets a username, the application checks for uniqueness and sets the username, otherwise, an error message is displayed.

• When the user clicks on join group, the user will be assigned to the group

• Similarly, they will be removed from the group on clicking leave group

• Send message function will broadcast messages to the rooms.

Initializing VueJS Project

Create a VueJS application within the chat application., using this command

• vue create client
• Install bootstrap and bootstrap-vue
• npm i bootstrap-vue

Creating Components:

Step #1: Main.js

• Includes all the 3rd party imports and routing

Step #2: App.vue

Organizes the subcomponents and contains overall dashboard CSS and routing.

Step #3: Create a directory for the router

1. Create index.js

Step #4: Create a folder called components that will contain chat-related components like ChatMessageBox.vue, and ChatNavbar.vue, ChatHeader.vue, and ChatChatBox.vue.

Step #5: Let’s start by coding one file at a time.

Step #6: ChatNavbar.vue

1. Contains the topmost header

Step #7: chatHeader.vue

• Contains the below section

Step #8: ChatContainer.vue

• Username.vue

• Sendemail.vue

• Chatbox.vue

• Chatmessagebox.vue

Socket.IO Implementation

• In App.vue , the socket io is created when the application is hit.

• For each user action, the socket sends a request to the golang server from the specific component (refer to the GitHub link for the complete code) and receives a response from the server.

Conclusion

This was all about building a real-time chat application with Golang, VueJS, and Socket.IO. Talk to our experts at Payoda if you are looking to build a robust app that enthusiasts your users.