In this blog, we will walk through the process of developing a real-time chat application with multiple additional features such as adding profile pictures, exporting chats, group chat, and so on, using golang, Vue js, go socket io, and gorilla mux, among other technologies.
Features of Real-time Chat Application
- When starting up the chat app, users must create a username [mandatory] and can update their profile picture [optional].
- The user name should be unique.
- 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.
- One room should only have two users.
- Every two users should have their own room. Before beginning the chat, both users should have a username.
- 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.
- When the chat begins, the option to send an email will be enabled. The chat can be exported to the user’s email.
- If a new user joins the room where the previous user left, they can able to export a previous chat to their emails.
- The user will be able to change their profile picture.
- When a new message arrives, the user will be notified with an alarm sound.
- 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:
- 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.
- Using WebSockets makes it difficult to implement and scale proxies and load balancers. while using Socket.IO it can be done with less effort.
- Unlike WebSockets, Socket.IO can fire technology when buyers don’t help it.
- If your connection fails, Socket.IO will handle that for you, while WebSocket will not automatically reconnect.
- 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
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
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
- 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
- Contains the topmost header
Step #7: chatHeader.vue
- Contains the below section
Step #8: ChatContainer.vue
- 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.
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.