How to Create a Real-time Chat Application using Socket.IO, Golang, and VueJS?

How to Create a Real-time Chat Application using Socket.IO, Golang, and VueJS?

www.bacancytechnology.com

In this tutorial, we will learn how to create a real-time chat application using Socket.IO in Golang and VueJS. For keeping it simple, I have divided the guide into different sections.

Table of Contents 1. Tutorial Goal: Build a Real-time Chat Application 2. What is Socket.IO? 3.Steps to Build a Chat App Using SocketIO, Golang, and VueJS Initializing Golang projects Initializing Socket.IO Server Setting Up Socket.IO Initializing VueJS project Creating Components Socket.IO Implementation with Frontend 4. Conclusion

Tutorial Goal: Build a Realtime Chat Application

Before knowing how to create a real-time chat application let’s see what are we making in this tutorial.

Watch Video Now let’s understand what Socket.IO is, its advantages, and how to create a real-time chat application in Golang and VueJS using Socket.IO.

What is Socket.IO?

Socket.IO is the most efficient solution to implement real-time communications.

Socket.IO is mainly a JS library that is built on top of WebSocket & other various technologies.

WebSocket can also be considered for realtime communications, but here are some benefits of Socket.IO: (1) Socket.IO allows broadcasting a message to all the connected clients. For example, if you want to notify all those connected clients, you can choose to broadcast your message in a single shot. While WebSockets will provide a list of all the connected clients to which you have to send messages separately.

(2) It’s challenging to implement and scale proxies and load balancers using WebSockets. While with the help of Socket.IO, it can be done with lesser hustle.

(3) Socket.IO can pull back to technologies, unlike WebSockets, when the client doesn’t support it.

(4) If your connection drops, Socket.IO will handle it for you while WebSocket won’t be reconnected automatically.

(5) It’s easy to build and work with Socket.IO APIs. Here we have two well-known libraries for Socket.IO 1. googollee 2. graarh In our application, we are using graarh.

Steps to Build a Chat Application using Socket.IO, Golang, and VueJS.

Follow these steps for creating a chat application using Socket.IO in Golang.

You can find the entire source code of this realtime chat application in the Github Repository.

Initializing Golang project.

Create a directory Create a directory called GoChat. mkdir GoChat cd GoChat Initializing Golang project.

Initialize it with go.mod, for dependency management, using – go mod init GoChat dy text

Download dependencies Now we will download the required dependencies. mux for routing and handling HTTP requests

$go get github.com/gorilla/mux graarh for socket.io

$go get github.com/graarh/golang-socketio Create a main.go file

//main.go

package main import ( "fmt" "log" "net/http" gosocketio "github.com/graarh/golangsocketio" "github.com/graarh/golangsocketio/transport" "github.com/gorilla/handlers" "github.com/gorilla/mux" ) func main(){ }

Create a Router and initialize routes This code will create a router and initialize routes and add this code to the main.go file. //main.go

var ( router *mux.Router ) func CreateRouter() { router = mux.NewRouter() } func InititalizeRoutes() { router.Methods("OPTIONS").HandlerFun c(func(w http.ResponseWriter, r *http.Request) {

w.Header().Set("Access-Control-AllowOrigin", "") w.Header().Set("Access-ControlAllow-Methods", "POST, GET, OPTIONS, PUT,DELETE") w.Header().Set("Access-ControlAllow-Headers", "Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRFToken, Authorization, Access-ControlRequest-Headers, Access-Control-RequestMethod, Connection, Host, Origin, UserAgent, Referer, Cache-Control, X-header") }) router.Handle("/socket.io/", Server) }

Initializing Socket.IO Server In this code, we will initialize socket.io in the init function to execute it before any function, start our server, and add this code to main.go file. // main.go

var ( Server *gosocketio.Server ) func init() { Server = gosocketio.NewServer(transport.GetDefault WebsocketTransport()) fmt.Println("Socket Initialize...") } func StartServer() { fmt.Println("Server Started at http://localhost:8080")

log.Fatal(http.ListenAndServe(":8080", handlers.CORS(handlers.AllowedHeaders ([]string{"X-Requested-With", "AccessControl-Allow-Origin", "Content-Type", "Authorization"}), handlers.AlThisthodstring{"GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS"}), handlers.AllowedOrigins([]string{"*"})) (router))) }

Setting Up Socket.IO In this code, we will create a LoadSocket function in which three operations will be performed: Socket Connection, Socket Disconnection, and Chat Socket

func LoadSocket() { // socket connection Server.On(gosocketio.OnConnection, func(c *gosocketio.Channel) { fmt.Println("Connected", c.Id()) c.Join("Room") }) // socket disconnection Server.On(gosocketio.OnDisconnection, func(c *gosocketio.Channel) { fmt.Println("Disconnected", c.Id()) // handles when someone closes the tab c.Leave("Room") })

// chat socket Server.On("/chat", func(c *gosocketio.Channel, message Message) string { fmt.Println(message.Text) c.BroadcastTo("Room", "/message", message.Text) return "message sent successfully." }) }

Explanation: Socket connection– We will first log into the server.On() function to check if successful connection is established or not before joining the chat room using c.Join(“Room)

Chat Socket– After checking the connection we will write the logic for what should be done when we receive a message through one of our connected sockets. On receiving such message, c.BroadcastTo(“Room”, “/message”, message.Text) will broadcast the message to every connected clients.

Socket Disconnection- For disconnecting the socket we will simply remove the client from the room using c.Leave(“Room”) So, this was all about the back-end part.

Let’s move towards the front-end section

Initializing VueJS Project Create VueJS application inside the chat application, using this commandvue create client Install bootstrap and bootstrap-vue

npm i bootstrap-vue bootstrap

Creating Components We will build a simple front-end. First of all we will import bootstrap and bootstrap-vue to use its components in the app.

// main.js

import Vue from "vue"; import App from "./App.vue"; import { FormInputPlugin, NavbarPlugin, LayoutPlugin, IconsPlugin, BCard, BInputGroup, BButton, } from "bootstrap-vue"; import "bootstrap/dist/css/bootstrap.css"; import "bootstrap-vue/dist/bootstrapvue.css"; Vue.config.productionTip = false;

Vue.use(FormInputPlugin); Vue.use(NavbarPlugin); Vue.use(LayoutPlugin); Vue.component("b-card", BCard); Vue.component("b-input-group", BInputGroup); Vue.component("b-button", BButton); Vue.use(IconsPlugin); new Vue({ render: (h) => h(App), }).$mount("#app");

// App.js <template> <div id="app"> <chat-navbar></chat-navbar> <br /> <chat-chatbox :socket="socket"></chatchatbox> </div> </template> <script> import io from "socket.io-client"; import ChatNavbar from "./components/ChatNavbar.vue"; import ChatChatbox from "./components/ChatChatbox.vue"; export default { name: "App", components: { ChatNavbar, ChatChatbox, },

data() { return { socket: null, serverUrl: process.env.VUE_APP_SOCKET_URL || "ws://localhost:8080", }; }, created() { this.connectToWebsocket(); }, methods: { connectToWebsocket() { this.socket = io(this.serverUrl, { transports: ["websocket"], }); }, }, };

</script> <style> html, body, #app, .card { height: 100%; } </style>

Create a folder named components in which we will have components related to the chat feature, i.e., ChatMessageBox.vue, ChatNavbar.vue, ChatHeader.vue, ChatChatBox.vue.

Let’s take one file at a time and start coding.

Make a note of the filename so you can copy-paste the code. Kindly note that in this section, I won’t be stating anything about integrating Socket.IO. Instead, we will see about the user interface. In the coming section, we will take a step ahead and implement Socket.IO.t // ChatNavbar.vue <template> <b-navbar toggleable type="dark" variant="dark"> <b-navbar-brand href="#">Chat Application</b-navbar-brand> </b-navbar> </template>

// ChatChatbox.vue <template> <b-container> <b-card> <div class="chatbox"> <b-row class="no-gutters" align-h="start" v-for="(message, inx) in chatHistory" :key="inx" > <b-col class="no-gutters" cols="8"> <div> <p class="received-chat">{{ message }}</p> </div> </b-col> </b-row>

</div> <chat-message-box :socket="socket"> </chat-message-box> </b-card> </b-container> </template>

// ChatMessageBox.vue

<template> <b-input-group class="mb-2 mr-sm-2 mb-sm-0"> <b-form-input placeholder="type here.." v-model.trim="newMsg" @keyup.enter="sendMessage" ></b-form-input> <b-button size="md" variant="primary"

class="mb-2" @click="sendMessage" :disabled="!newMsg" > Send </b-button> </b-input-group> </template> So, this was about user interface. Let’s write the logic of the chat functionality in the script part.

Socket.IO Implementation with Front-end ChatChatBox.vue: Here, our application will load for the first time in the browser because of the mounted() function. In the socket.on() function, all the messages are pushed inside the chatHistory array.

this.socket.on() allows us to listen to the ‘/message’ event from the server through socket. For removing the white spaces I have used the trim() function. // ChatChatBox.vue

<script> import ChatMessageBox from "./ChatMessagebox.vue"; export default { props: ["socket"], components: { ChatMessageBox, }, data() { return { chatHistory: [], }; },

mounted() { if (this.socket) { this.socket.on("/message", (message) => { if (message) { this.chatHistory.push(message.trim()); } }); } }, }; </script>

ChatMessagebox.vue: On clicking the send button, the message typed by the user in Add a little bit of body text the input box goes to the server via this.socket.emit() function. And for that, we will emit the ‘/chat’ event.

// ChatMessagebox.vue props: ["socket"], data() { return { newMsg: "", }; }, methods: { sendMessage() { if (this.newMsg) { this.socket.emit("/chat", { name: "Nikita", message: this.newMsg }); this.newMsg = ""; } }, }, }; </script>

Conclusion

Thank You

www.bacancytechnology.com