Build a chat app with Go

Communication is an important part of the society we live in. Over the years, the forms of communication available have changed and have been refined to be both far-reaching and fast. With communication today, we can talk to people who are on the other side of the globe in an instant.

To power this sort of communication, there are some platforms that allow instant messaging such as Facebook, Twitter, and Slack.

In this application, we will consider how to build a realtime chat application using Go, JavaScript and Pusher Channels.

Here’s a demo of the final application:

Prerequisites

To follow along with this article, you will need the following:

• An IDE of your choice like Visual Studio Code.
• Go (version >= 0.10.x) installed on your computer. Here’s how you can install Go.
• Basic knowledge of the Go programming language.
• Basic knowledge of JavaScript.
• Pusher Channels. Sign up for a free Pusher account.

Once you have all the above requirements, we can proceed.

Skip the next section if you have already signed up with Pusher and created an application.

Step 1: Set up Pusher

The realtime feature of this chat app will depend on Pusher Channels.
1.Sign up for a free account or sign in. .
2. Go to Channels and create an app.

Step 2: Enable client events

Enable the Pusher application to trigger events from the client-side (browser) of the chat app. This is important because it is with this feature that users will be able to send private messages without hitting the backend server. Follow the steps below to activate client events from the Pusher dashboard:

• Select your Channels application.
• From the right-side navigation, click App Setting.
• Turn on the Enable client events toggle.

Step 3: Set up the codebase

Let’s write the terminal commands to create a new folder in the src directory that is located in the $GOPATH, this folder will be the root directory for this project:

bash
1$ cd $GOPATH/src
2    $ mkdir go-pusher-chat-app
3    $ cd go-pusher-chat-app
Copy

In this folder, we will create the main Go file which will be the entry point for the application and call it chat.go. We also need to install the Go Pusher library that we will reference in the chat.go file.

Run the following code in the terminal to pull in the Go Pusher package:

bash
1$ go mod init
2    $ go get github.com/pusher/pusher-http-go/v5
Copy

NOTE: If you use Windows and you encounter the error ‘cc.exe: sorry, unimplemented: 64-bit mode not compiled in ‘, then you need a Windows GCC port, such as https://sourceforge.net/projects/mingw-w64/.

Open the chat.go file in your IDE and paste the following code:

go
1// File: ./chat.go
2    package main
3
4    import (
5        "encoding/json"
6        "fmt"
7        "io/ioutil"
8        "log"
9        "net/http"
10
11        pusher "github.com/pusher/pusher-http-go/v5"
12    )
13
14    var client = pusher.Client{
15        AppID:   "PUSHER_APP_ID",
16        Key:     "PUSHER_APP_KEY",
17        Secret:  "PUSHER_APP_SECRET",
18        Cluster: "PUSHER_APP_CLUSTER",
19        Secure:  true,
20    }
21
22    type user struct {
23        Name  string `json:"name" xml:"name" form:"name" query:"name"`
24        Email string `json:"email" xml:"email" form:"email" query:"email"`
25    }
26
27    func main() {
28        http.Handle("/", http.FileServer(http.Dir("./public")))
29
30        http.HandleFunc("/new/user", registerNewUser)
31        http.HandleFunc("/pusher/auth", pusherAuth)
32
33        log.Fatal(http.ListenAndServe(":8090", nil))
34    }
Copy

IMPORTANT: Replace PUSHER_APP_* keys with the app credentials found on your Pusher dashboard.

In the code above, we first imported a list of packages. Then we registered a new Pusher client with the credentials from the app we created earlier in the Pusher dashboard.

Next, we defined a user struct and included extra definitions to its properties. This is for Go to know how to handle incoming payloads and bind their various structures with a new instance of the user struct.

Lastly, in the main function, we registered three endpoints:

• / — Returns the static files that define the view of the chat app. The static files will be served from a public directory.
• /new/user — Creates a new user.
• /pusher/auth — Authorizes users from the client-side so they can subscribe to private channels and trigger client events.

Each of the last two endpoints has an associated handler function that we will define below. Add the following code to the chat.go file before the main function:

go
1// File: ./chat.go
2
3    // [...]
4
5    func registerNewUser(rw http.ResponseWriter, req *http.Request) {
6        body, err := ioutil.ReadAll(req.Body)
7        if err != nil {
8            panic(err)
9        }
10
11        var newUser user
12
13        err = json.Unmarshal(body, &newUser)
14        if err != nil {
15            panic(err)
16        }
17
18        client.Trigger("update", "new-user", newUser)
19
20        json.NewEncoder(rw).Encode(newUser)
21    }
22    func pusherAuth(res http.ResponseWriter, req *http.Request) {
23        params, _ := ioutil.ReadAll(req.Body)
24        response, err := client.AuthorizePrivateChannel(params)
25        if err != nil {
26            panic(err)
27        }
28
29        fmt.Fprintf(res, string(response))
30    }
31
32    // [...]
Copy

In the registerNewUser function, we trigger a Pusher event, new-user, on the public channel update. The new user’s details are sent to the subscribed clients.

The syntax for triggering a Pusher event over a public channel in Go is:

    client.Trigger(channel, event, data)

Step 4: Building the frontend

Create a public folder in the root directory of our project because this is where all of the static files will live:

    $ mkdir public

Navigate into the public folder and create two sub-folders to hold our CSS and JavaScript files:

bash
1$ cd public
2    $ mkdir css js
Copy

Create an index.html file in the root of the public folder. This is where we will write the markup for our application.

Open the index.html file and update it with the following code:

html
1<!-- File: ./public/index.html -->
2    <!DOCTYPE html>
3    <html lang="en">
4      <head>
5        <meta charset="utf-8">
6        <meta name="viewport" content="width=device-width, initial-scale=1">
7        <title>Chat with friends in realtime</title>
8        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
9        <link rel="stylesheet" href="./css/app.css" >
10      </head>
11      <body>
12        <header>
13            <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
14                <a class="navbar-brand" href="#">Welcome</a>
15            </nav>
16        </header>
17        <div class="container-fluid">
18            <div class="row" id="mainrow">
19                <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
20                    <ul class="nav nav-pills flex-column" id="rooms">
21                    </ul>
22                </nav>
23                <main role="main" class="col-sm-9 ml-sm-auto col-md-10 pt-3" id="registerScreen">
24                    <h3 style="text-align: center">Type in your details to chat</h3>
25                    <hr/>
26                    <div class="chat" style="margin-bottom:150px">
27                        <p>&nbsp;</p>
28                        <form id="loginScreenForm">
29                            <div class="form-group">
30                              <input type="text" class="form-control" id="fullname" placeholder="Name" required>
31                            </div>
32                            <div class="form-group">
33                              <input type="email" class="form-control" id="email" placeholder="Email Address" required>
34                            </div>
35                            <button type="submit" class="btn btn-block btn-primary">Submit</button>
36                          </form>
37                      </div>
38                </main>
39    
40                <main role="main" class="col-sm-9 ml-sm-auto col-md-10 pt-3" style="display: none" id="main">
41                    <h1>Chats</h1>
42                    <p>👈 Select a chat to load the messages</p>
43                    <p>&nbsp;</p>
44                    <div class="chat" style="margin-bottom:150px">
45                        <h5 id="room-title"></h5>
46                        <p>&nbsp;</p>
47                        <div class="response">
48                            <form id="replyMessage">
49                                <div class="form-group">
50                                    <input type="text" placeholder="Enter Message" class="form-control" name="message" />
51                                </div>
52                            </form>
53                        </div>
54                        <div class="table-responsive">
55                          <table class="table table-striped">
56                            <tbody id="chat-msgs">
57                            </tbody>
58                        </table>
59                    </div>
60                </main>
61            </div>
62        </div>
63    
64        <script src="https://js.pusher.com/4.0/pusher.min.js"></script>
65        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
66        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
67        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
68        <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
69        <script type="text/javascript" src="./js/app.js"></script>
70      </body>
71    </html>
Copy

The code snipped above is the HTML for the home page. Let’s add some styling.

• Create a new file app.css in the public/css directory and add the following code:

css
1/* File: ./public/css.app.css */
2    body {
3        padding-top: 3.5rem;
4    }
5    h1 {
6        padding-bottom: 9px;
7        margin-bottom: 20px;
8        border-bottom: 1px solid #eee;
9    }
10    .chat {
11        max-width: 80%;
12        margin: 0 auto;
13    }
14    .sidebar {
15        position: fixed;
16        top: 51px;
17        bottom: 0;
18        left: 0;
19        z-index: 1000;
20        padding: 20px 0;
21        overflow-x: hidden;
22        overflow-y: auto;
23        border-right: 1px solid #eee;
24    }
25    .sidebar .nav {
26        margin-bottom: 20px;
27    }
28    .sidebar .nav-item {
29        width: 100%;
30    }
31    .sidebar .nav-item + .nav-item {
32        margin-left: 0;
33    }
34    .sidebar .nav-link {
35        border-radius: 0;
36    }
37    .placeholders {
38        padding-bottom: 3rem;
39    }
40    .placeholder img {
41        padding-top: 1.5rem;
42        padding-bottom: 1.5rem;
43    }
44    tr .sender {
45        font-size: 12px;
46        font-weight: 600;
47    }
48    tr .sender span {
49        color: #676767;
50    }
51    .response {
52        display: none;
53    }
Copy

• Write some JavaScript for the application. Create a new app.js file in the public/js directory and add the following code:

javascript
1// File: ./public/js/app.js
2    (function () {
3        var pusher = new Pusher('PUSHER_APP_KEY', {
4            authEndpoint: '/pusher/auth',
5            cluster: 'PUSHER_APP_CLUSTER',
6            encrypted: true
7        });
8    
9        let chat = {
10            name: undefined,
11            email: undefined,
12            endUserName: undefined,
13            currentRoom: undefined,
14            currentChannel: undefined,
15            subscribedChannels: [],
16            subscribedUsers: []
17        }
18    
19        var publicChannel = pusher.subscribe('update');
20    
21        const chatBody = $(document)
22        const chatRoomsList = $('#rooms')
23        const chatReplyMessage = $('#replyMessage')
24    
25        const helpers = {
26            clearChatMessages: () => {
27                $('#chat-msgs').html('')
28            },
29            
30            displayChatMessage: (message) => {
31                if (message.email === chat.email) {
32                    $('#chat-msgs').prepend(
33                        `<tr>
34                            <td>
35                                <div class="sender">${message.sender} @ <span class="date">${message.createdAt}</span></div>
36                                <div class="message">${message.text}</div>
37                            </td>
38                        </tr>`
39                    )
40                }
41            },
42    
43            loadChatRoom: evt => {
44                chat.currentRoom = evt.target.dataset.roomId
45                chat.currentChannel = evt.target.dataset.channelId
46                chat.endUserName =  evt.target.dataset.userName
47                if (chat.currentRoom !== undefined) {
48                    $('.response').show()
49                    $('#room-title').text('Write a message to ' + evt.target.dataset.userName+ '.')
50                }
51    
52                evt.preventDefault()
53                helpers.clearChatMessages()
54            },
55    
56            replyMessage: evt => {
57                evt.preventDefault()
58                
59                let createdAt = new Date().toLocaleString()            
60                let message = $('#replyMessage input').val().trim()
61                let event = 'client-' + chat.currentRoom
62                
63                chat.subscribedChannels[chat.currentChannel].trigger(event, {
64                    'sender': chat.name,
65                    'email': chat.currentRoom,
66                    'text': message, 
67                    'createdAt': createdAt 
68                });
69                
70                $('#chat-msgs').prepend(
71                    `<tr>
72                        <td>
73                            <div class="sender">
74                                ${chat.name} @ <span class="date">${createdAt}</span>
75                            </div>
76                            <div class="message">${message}</div>
77                        </td>
78                    </tr>`
79                )
80                
81                $('#replyMessage input').val('')
82            },
83    
84            LogIntoChatSession: function (evt) {
85                const name  = $('#fullname').val().trim()
86                const email = $('#email').val().trim().toLowerCase()
87                
88                chat.name = name;
89                chat.email = email;
90    
91                chatBody.find('#loginScreenForm input, #loginScreenForm button').attr('disabled', true)
92                
93                let validName = (name !== '' && name.length >= 3)
94                let validEmail = (email !== '' && email.length >= 5)
95                
96                if (validName && validEmail) {
97                    axios.post('/new/user', {name, email}).then(res => {
98                        chatBody.find('#registerScreen').css("display", "none");
99                        chatBody.find('#main').css("display", "block");
100                        
101                        chat.myChannel = pusher.subscribe('private-' + res.data.email)
102                        chat.myChannel.bind('client-' + chat.email, data => {
103                            helpers.displayChatMessage(data)
104                        })
105                    })
106                } else {
107                    alert('Enter a valid name and email.')
108                }
109                
110                evt.preventDefault()
111            }
112        }
113    
114    
115        publicChannel.bind('new-user', function(data) {
116            if (data.email != chat.email){
117                chat.subscribedChannels.push(pusher.subscribe('private-' + data.email));
118                chat.subscribedUsers.push(data);
119                
120                $('#rooms').html("");
121        
122                chat.subscribedUsers.forEach((user, index) => {
123                    $('#rooms').append(
124                        `<li class="nav-item"><a data-room-id="${user.email}" data-user-name="${user.name}" data-channel-id="${index}" class="nav-link" href="#">${user.name}</a></li>`
125                    )
126                })
127            }
128        })
129    
130        chatReplyMessage.on('submit', helpers.replyMessage)
131        chatRoomsList.on('click', 'li', helpers.loadChatRoom)
132        chatBody.find('#loginScreenForm').on('submit', helpers.LogIntoChatSession)
133    }());
Copy

In the script above, we instantiated the Pusher object (replace the PUSHER_APP_* keys with the credentials on your Pusher dashboard).

• Define some helper methods that will help us interact with the chat window and with the backend API. Some of the methods defined in the helpers object are:

• clearChatMessages - Clears the chat message window.
• displayChatMessage - Displays a new chat message in the current window.
• loadChatRoom - Shows a users chat messages in the general chat window after a room is selected.
• replyMessage - Sends a chat message to the current room.
• LogIntoChatSession - Creates a new chat session.

After defining the helpers object, we bind to the new-user event on the publicChannel. In the callback, we subscribe to private channels so the communication is secure.

At the bottom of the script, we register all the event listeners and start the chat session.

Step 5: Run the application

To test the chat app, start the Go backend server with this command:

    $ go run chat.go

To see the app in action, visit this address, http://127.0.0.1:8090, on a web browser in multiple windows and test the instant messaging features.

Here’s a demo of the chat app:

Conclusion

In this tutorial, we have learned how to leverage the Pusher SDK in creating a chat application powered by a Go backend server.

The source code for this tutorial is available on GitHub.