DEV Community: Jeroen de Kok

How to add authentication to your Go Chat application (Part 4)

Jeroen de Kok — Mon, 30 Nov 2020 08:22:47 +0000

In the last part of this tutorial, we will allow our users to use the chat application with a user account. To do this we will authenticate the users with the use of JWT (JSON web token). After authenticating, the user will use the chat as an authenticated user.

Posts overview

Basic chat application with Go + Vue.JS
Multi-room & 1 one 1 chats.
Using Redis Pub/Sub for scalability
Adding authentication and allow users to log-in (This page)

Preconditions

To follow along you should have completed part 1, part 2 and part3 or grab the source from here.

Step 1: Storing credentials

First, we will create some utility functions for encoding and comparing passwords. For encoding the password we will use Argon2, get the Go library with:

go get golang.org/x/crypto/argon2

Then create the utility class with the code below.

// auth/encoder.go

package auth

import (
    "crypto/rand"
    "crypto/subtle"
    "encoding/base64"
    "fmt"
    "strings"

    "golang.org/x/crypto/argon2"
)

type PasswordConfig struct {
    time uint32
    memory uint32
    threads uint8
    keyLen uint32
}

// GeneratePassword is used to generate a new password hash for storing and
// comparing at a later date.
func GeneratePassword(password string) (string, error) {

    c := &PasswordConfig{
        time: 1,
        memory: 64 * 1024,
        threads: 4,
        keyLen: 32,
    }
    // Generate a Salt
    salt := make([]byte, 16)
    if _, err := rand.Read(salt); err != nil {
        return "", err
    }

    hash := argon2.IDKey([]byte(password), salt, c.time, c.memory, c.threads, c.keyLen)

    // Base64 encode the salt and hashed password.
    b64Salt := base64.RawStdEncoding.EncodeToString(salt)
    b64Hash := base64.RawStdEncoding.EncodeToString(hash)

    format := "$argon2id$v=%d$m=%d,t=%d,p=%d$%s$%s"
    full := fmt.Sprintf(format, argon2.Version, c.memory, c.time, c.threads, b64Salt, b64Hash)
    return full, nil
}

// ComparePassword is used to compare a user-inputted password to a hash to see
// if the password matches or not.
func ComparePassword(password, hash string) (bool, error) {

    parts := strings.Split(hash, "$")

    c := &PasswordConfig{}
    _, err := fmt.Sscanf(parts[3], "m=%d,t=%d,p=%d", &c.memory, &c.time, &c.threads)
    if err != nil {
        return false, err
    }

    salt, err := base64.RawStdEncoding.DecodeString(parts[4])
    if err != nil {
        return false, err
    }

    decodedHash, err := base64.RawStdEncoding.DecodeString(parts[5])
    if err != nil {
        return false, err
    }
    c.keyLen = uint32(len(decodedHash))

    comparisonHash := argon2.IDKey([]byte(password), salt, c.time, c.memory, c.threads, c.keyLen)

    return (subtle.ConstantTimeCompare(decodedHash, comparisonHash) == 1), nil
}

Database scheme

With the password encoder in place, we can update/create our database schema. Delete the existing User table and create a new one, or rewrite the query below to update the table instead.

// config/database.go

...
sqlStmt = ` 
    CREATE TABLE IF NOT EXISTS user (
        id VARCHAR(255) NOT NULL PRIMARY KEY,
        name VARCHAR(255) NOT NULL,
        username VARCHAR(255) NULL,
        password VARCHARR(255) NULL
    );
    `
_, err = db.Exec(sqlStmt)
if err != nil {
  log.Fatal("%q: %s\n", err, sqlStmt)
}

password, _ := auth.GeneratePassword("password")

sqlStmt = `INSERT into user (id, name, username, password) VALUES
                    ('` + uuid.New().String() + `', 'john', 'john','` + password + `')`

_, err = db.Exec(sqlStmt)
if err != nil {
  log.Fatal("%q: %s\n", err, sqlStmt)
}

return db

The code above also includes an insert query to create a user, you can remove it after executing it once.

Step 2: Authenticating the user

The next step includes an API endpoint to let the user authenticate himself. After authenticating, the user is provided with a JWT. Then this JWT can be used later on to use the Chat application as an authenticated user.

First create a Handler function thats handles the http request and returns a response.

// api.go
package main

import (
    "encoding/json"
    "net/http"

    "github.com/jeroendk/chatApplication/auth"
    "github.com/jeroendk/chatApplication/repository"
)

type LoginUser struct {
    Username string `json:"username"`
    Password string `json:"password"`
}

type API struct {
    UserRepository *repository.UserRepository
}

func (api *API) HandleLogin(w http.ResponseWriter, r *http.Request) {

    var user LoginUser

    // Try to decode the JSON request to a LoginUser
    err := json.NewDecoder(r.Body).Decode(&user)
    if err != nil {
        http.Error(w, err.Error(), http.StatusBadRequest)
        return
    }

    // Find the user in the database by username
    dbUser := api.UserRepository.FindUserByUsername(user.Username)
    if dbUser == nil {
        returnErrorResponse(w)
        return
    }

    // Check if the passwords match
    ok, err := auth.ComparePassword(user.Password, dbUser.Password)

    if !ok || err != nil {
        returnErrorResponse(w)
        return
    }

    // Create a JWT
    token, err := auth.CreateJWTToken(dbUser)

    if err != nil {
        returnErrorResponse(w)
        return
    }

    w.Write([]byte(token))

}

func returnErrorResponse(w http.ResponseWriter) {

    w.Header().Set("Content-Type", "application/json")
    w.Write([]byte("{\"status\": \"error\"}"))
}

If the requested user is found and if the provided password is correct, the function above provides a JWT token that the user can use in further requests.

Now lets implement the functions the code above relies on.

// repository/userRepository.go
...
type User struct {
    Id string `json:"id"`
    Name string `json:"name"`
    Username string `json:"username"`
    Password string `json:"password"`
}

...

func (repo *UserRepository) FindUserByUsername(username string) *User {

    row := repo.Db.QueryRow("SELECT id, name, username, password FROM user where username = ? LIMIT 1", username)

    var user User

    if err := row.Scan(&user.Id, &user.Name, &user.Username, &user.Password); err != nil {
        if err == sql.ErrNoRows {
            return nil
        }
        panic(err)
    }

    return &user
}

Our repository now includes a method to retrieve a user by his Username.

The next file lets us create a JWT and decode the created JWT. To do this we need an external library, install it with:

go get github.com/dgrijalva/jwt-go

Then add this file:

// auth/jwt.go
package auth

import (
    "fmt"
    "time"

    "github.com/jeroendk/chatApplication/models"

    "github.com/dgrijalva/jwt-go"
)

const hmacSecret = "SecretValueReplaceThis"
const defaulExpireTime = 604800 // 1 week

type Claims struct {
    ID string `json:"id"`
    Name string `json:"name"`
    jwt.StandardClaims
}

func (c *Claims) GetId() string {
    return c.ID
}

func (c *Claims) GetName() string {
    return c.Name
}

// CreateJWTToken generates a JWT signed token for for the given user
func CreateJWTToken(user models.User) (string, error) {
    token := jwt.NewWithClaims(jwt.SigningMethodHS256, jwt.MapClaims{
        "Id": user.GetId(),
        "Name": user.GetName(),
        "ExpiresAt": time.Now().Unix() + defaulExpireTime,
    })
    tokenString, err := token.SignedString([]byte(hmacSecret))

    return tokenString, err
}

func ValidateToken(tokenString string) (models.User, error) {
    token, err := jwt.ParseWithClaims(tokenString, &Claims{}, func(token *jwt.Token) (interface{}, error) {
        // Don't forget to validate the alg is what you expect:
        if _, ok := token.Method.(*jwt.SigningMethodHMAC); !ok {
            return nil, fmt.Errorf("Unexpected signing method: %v", token.Header["alg"])
        }

        // hmacSecret is a []byte containing your secret, e.g. []byte("my_secret_key")
        return []byte(hmacSecret), nil
    })

    if claims, ok := token.Claims.(*Claims); ok && token.Valid {
        return claims, nil
    } else {
        return nil, err
    }
}

Now wire up the API endpoint by adding a route for it in the main.go

// main.go

import (
    ...
    "github.com/jeroendk/chatApplication/auth"
    ...
)

...

func main() {
    ...
    // Define the userRepo here, to use it in bothe the wsServer & the API
    userRepository := &repository.UserRepository{Db: db}

    wsServer := NewWebsocketServer(&repository.RoomRepository{Db: db}, userRepository)
    go wsServer.Run()

    api := &API{UserRepository: userRepository}

    http.HandleFunc("/ws", func(w http.ResponseWriter, r *http.Request) {
        ServeWs(wsServer, w, r)
    })

    // Add the login route
    http.HandleFunc("/api/login", api.HandleLogin)

With this in place you should be able to retrieve a JWT with a tool Like Postman or by performing the following cURL request:

curl --location --request GET 'localhost:8080/api/login' \
--header 'Content-Type: application/json' \
--data-raw '{
    "username": "john",
    "Password":"password"
}'

Step 3: Securing the WebSocket connection

Now it’s time to identify the user when the WebSocket connection is established. To make this happen we will create a Middleware function that we can add to the WebSocket HTTP endpoint.

In this example, we will allow known users, identified with a JWT and anonymous users identified by a name. You can easily change this to only allow known users.

// auth/middleware.go

package auth

import (
    "context"
    "net/http"

    "github.com/google/uuid"
)

type contextKey string

const UserContextKey = contextKey("user")

type AnonUser struct {
    Id string `json:"id"`
    Name string `json:"name"`
}

func (user *AnonUser) GetId() string {
    return user.Id
}

func (user *AnonUser) GetName() string {
    return user.Name
}

func AuthMiddleware(f http.HandlerFunc) http.HandlerFunc {
    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
        token, tok := r.URL.Query()["bearer"]
        name, nok := r.URL.Query()["name"]

        if tok && len(token) == 1 {            
            user, err := ValidateToken(token[0])
            if err != nil {
                http.Error(w, "Forbidden", http.StatusForbidden)

            } else {
                ctx := context.WithValue(r.Context(), UserContextKey, user)
                f(w, r.WithContext(ctx))
            }

        } else if nok && len(name) == 1 {
            // Continue with new Anon. user
            user := AnonUser{Id: uuid.New().String(), Name: name[0]}
            ctx := context.WithValue(r.Context(), UserContextKey, &user)
            f(w, r.WithContext(ctx))

        } else {
            w.WriteHeader(http.StatusBadRequest)
            w.Write([]byte("Please login or provide name"))
        }
    })
}

Then add the Middleware to the WebSocket HTTP endpoint

// main.go
...
http.HandleFunc("/ws", auth.AuthMiddleware(func(w http.ResponseWriter, r *http.Request) {
  ServeWs(wsServer, w, r)
}))
...

From now on, when connecting to the websocket server, the User will be set in de context by the middleware function. So let’s make the proper adjustments in the ServeWs function in client.go

//client.go

func newClient(conn *websocket.Conn, wsServer *WsServer, name string, ID string) *Client {
    client := &Client{
        Name: name,
        conn: conn,
        wsServer: wsServer,
        send: make(chan []byte, 256),
        rooms: make(map[*Room]bool),
    }

    // Use existing User ID
    client.ID, _ = uuid.Parse(ID)
    return client
}

func ServeWs(wsServer *WsServer, w http.ResponseWriter, r *http.Request) {

    // Remove these lines
    - name, ok := r.URL.Query()["name"]

    - if !ok || len(name[0]) < 1 {
    -   log.Println("Url Param 'name' is missing")
    -   return
    - }

    // Instead get the User from the context
    userCtxValue := r.Context().Value(auth.UserContextKey)
    if userCtxValue == nil {
        log.Println("Not authenticated")
        return
    }

    user := userCtxValue.(models.User)

    conn, err := upgrader.Upgrade(w, r, nil)
    if err != nil {
        log.Println(err)
        return
    }

    // Now user the context user when creating a new Client.
    client := newClient(conn, wsServer, user.GetName(), user.GetId())

    go client.writePump()
    go client.readPump()

    wsServer.register <- client
}

Because a user can log-in with multiple clients, the ChatServer needs some changes as well. Update the methods listed below:

// chatServer.go
...
func (server *WsServer) registerClient(client *Client) {
    // First check if the user does not exist yet.
    if user := server.findUserByID(client.ID.String()); user == nil {
        // Add user to the repo
        server.userRepository.AddUser(client)
    }

    // Publish user in PubSub
    server.publishClientJoined(client)

    server.listOnlineClients(client)
    server.clients[client] = true
}

...

func (server *WsServer) unregisterClient(client *Client) {
    if _, ok := server.clients[client]; ok {
        delete(server.clients, client)

        // Remove this line, We don't want to delete user accounts.
        - server.userRepository.RemoveUser(client)

        // Publish user left in PubSub
        server.publishClientLeft(client)
    }
}

...

func (server *WsServer) handleUserLeft(message Message) {
    for i, user := range server.users {
        if user.GetId() == message.Sender.GetId() {
            server.users[i] = server.users[len(server.users)-1]
            server.users = server.users[:len(server.users)-1]
            break // added this break to only remove the first occurrence
        }
    }

    server.broadcastToClients(message.encode())
}

func (server *WsServer) handleUserJoinPrivate(message Message) {
    // Find client for given user, if found add the user to the room.
    // Expect multiple clients for one user now.
    targetClients := server.findClientsByID(message.Message)
    for _, targetClient := range targetClients {
        targetClient.joinRoom(message.Target.GetName(), message.Sender)
    }
}

func (server *WsServer) listOnlineClients(client *Client) {
    // Find unique users instead of returning all users.
    var uniqueUsers = make(map[string]bool)
    for _, user := range server.users {
        if ok := uniqueUsers[user.GetId()]; !ok {
            message := &Message{
                Action: UserJoinedAction,
                Sender: user,
            }
            uniqueUsers[user.GetId()] = true
            client.send <- message.encode()
        }
    }
}

...

func (server *WsServer) findClientsByID(ID string) []*Client {
    // Find all clients for given user ID.
    var foundClients []*Client
    for client := range server.clients {
        if client.GetId() == ID {
            foundClients = append(foundClients, client)
        }
    }

    return foundClients
}

Front-end

The last thing we need to do is to add a log-in form and use the JWT to connect to the WebSocket.

Let’s update the HTML first:

...
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
...

<div class="col-12 form" v-if="!ws">
  <h2>Anonymous log-in</h2>
  <div class="input-group">
    <input v-model="user.name" class="form-control name" placeholder="Please fill in your (nick)name"
           @keyup.enter.exact="connect"></input>
    <div class="input-group-append">
      <span class="input-group-text send_btn" @click="connect">
        >
      </span>
    </div>
  </div>
  <h2>Registered users</h2>

  <div class="input-group">
      <input v-model="user.username" class="form-control username" placeholder="username"></input>
      <input v-model="user.password" type="password" class="form-control password" placeholder="password"></input>
      <div class="input-group-append">
          <span class="input-group-text send_btn" @click="login">
          >
          </span>
      </div>
  </div>

  <div class="alert alert-danger" role="alert" v-show="loginError">
    {{loginError}}
  </div>

</div>

Then at last update the Javascript file:

// public/assets/app.js
  ...
  data: {
    ws: null,
    serverUrl: "ws://" + location.host + "/ws",
    roomInput: null,
    rooms: [],
    user: {
      name: "",
      // Add the new user properties
      username: "",
      password: "",
      token: ""
    },
    users: [],
    initialReconnectDelay: 1000,
    currentReconnectDelay: 0,
    maxReconnectDelay: 16000,
    loginError: "" // Login error message string
  },

  ...
  // The login function
  // on success save the token and connect to the WebSocket.
  async login() {
    try {
      const result = await axios.post("http://" + location.host + '/api/login', this.user);
      if (result.data.status !== "undefined" && result.data.status == "error") {
        this.loginError = "Login failed";
      } else {
        this.user.token = result.data;
        this.connectToWebsocket();
      }
    } catch (e) {
      this.loginError = "Login failed";
      console.log(e);
    }
  },
  connectToWebsocket() {
    // Use the token if available, else connect with a name. 
    if (this.user.token != "") {
      this.ws = new WebSocket(this.serverUrl + "?bearer=" + this.user.token);
    } else {
      this.ws = new WebSocket(this.serverUrl + "?name=" + this.user.name);
    }
    this.ws.addEventListener('open', (event) => { this.onWebsocketOpen(event) });
    this.ws.addEventListener('message', (event) => { this.handleNewMessage(event) });
    this.ws.addEventListener('close', (event) => { this.onWebsocketClose(event) });
  },

  ...
  // Make sure only one client of the user counts
  handleUserJoined(msg) {
    if(!this.userExists(msg.sender)) {
      this.users.push(msg.sender);
    }
  },
  userExists(user) {
    for (let i = 0; i < this.users.length; i++) {
      if (this.users[i].id == user.id) {
        return true;
      }
    }
    return false;
  }

Result

You should now be able to log-in with a user account and use the chat as that user on different clients simultaneously.

This should be a good starting point for your application or at least give you some inspiration for the next time you need to implement a chat. From here on you can add functions such as a registration endpoint, saving sent messages, keeping track of online users, and many other things.

Thanks for following along and feel free to leave a comment when you have suggestions or questions!

The final source code of this part van be found here:

https://github.com/jeroendk/go-vuejs-chat/tree/v4.0

The post How to add authentication to your Go Chat application (Part 4) appeared first on Which Dev.

How to use Redis Pub/Sub in Go Chat Application (Part 3)

Jeroen de Kok — Wed, 21 Oct 2020 13:02:00 +0000

In the third part of this tutorial series, we will add Redis Pub/Sub to our existing chat application (build in the previous parts). With the use of Redis Pub/Sub, we can scale our application by running multiple instances at the same time.

Preconditions

To follow along you should have completed part 1 and part 2 or grab the source from here.

What is Redis Pub/Sub?

Reds Pub/Sub is the Redis implementation of the Publish–subscribe pattern. This is a so-called “messaging pattern”, where senders of messages (publishers) don’t send their messages directly to receivers (subscribers) but publish their messages in a “channel”. Subscribers choose to subscribe to specific channels and will receive these published messages.

When we run multiple instances of the same application we can leverage these Pub/Sub channels to not only notify clients connected to the same instance but notify all clients connected to any instance.

Diagram of pub/sub subscriptions.

For our application every chat message is sent through a room, therefore we can use these rooms to publish and subscribe within their own channel. So we for each (running) room there will be a pub/sub channel (illustrated by the Room channels in the diagram above).

We would like to have a list of all the online users on each server as well, to be able to start a private chat for example. For this, we will use a “general” channel, where the WsServer can publish and subscribe. Ok, let’s start coding!

Step 1: Adding a persistence layer

Because Pub/Sub won’t playback missed messages we need some sort of persistence. If we scale our application after the service is running, the new instance needs a way to get all the existing data (rooms and users).

For this we will add a database, in this post we will keep it simple and use an SQLite database. Depending on your use case you ought to use a different database engine. To make this swap easy we will use the Repository Pattern.

Install the needed package with:

go get github.com/mattn/go-sqlite3

// config/database.go
package config

import (
    "database/sql"
    "log"

    _ "github.com/mattn/go-sqlite3"
)

func InitDB() *sql.DB {
    db, err := sql.Open("sqlite3", "./chatdb.db")
    if err != nil {
        log.Fatal(err)
    }

    sqlStmt := `    
    CREATE TABLE IF NOT EXISTS room (
        id VARCHAR(255) NOT NULL PRIMARY KEY,
        name VARCHAR(255) NOT NULL,
        private TINYINT NULL
    );
    `
    _, err = db.Exec(sqlStmt)
    if err != nil {
        log.Fatal("%q: %s\n", err, sqlStmt)
    }

    sqlStmt = ` 
    CREATE TABLE IF NOT EXISTS user (
        id VARCHAR(255) NOT NULL PRIMARY KEY,
        name VARCHAR(255) NOT NULL
    );
    `
    _, err = db.Exec(sqlStmt)
    if err != nil {
        log.Fatal("%q: %s\n", err, sqlStmt)
    }

    return db
}


// main.go
..
import (
    ...
    "github.com/jeroendk/chatApplication/config"
    "github.com/jeroendk/chatApplication/repository"
)

func main() {
    ...
    db := config.InitDB()
    defer db.Close()
}

The code above will initialize the database when starting the Go application.

Room Repository

Next, we will add two repository files, first the roomRepository. To be able to use the room model in all our packages, we will create an interface for it in the models package. We add an interface for our roomRepository as well, this makes swapping out the implementation easier.

// models/room.go
package models

type Room interface {
    GetId() string
    GetName() string
    GetPrivate() bool
}

type RoomRepository interface {
    AddRoom(room Room)
    FindRoomByName(name string) Room
}

// repository/roomRepository.go

package repository

import (
    "database/sql"

    "github.com/jeroendk/chatApplication/models"
)

type Room struct {
    Id string
    Name string
    Private bool
}

func (room *Room) GetId() string {
    return room.Id
}

func (room *Room) GetName() string {
    return room.Name
}

func (room *Room) GetPrivate() bool {
    return room.Private
}

type RoomRepository struct {
    Db *sql.DB
}

func (repo *RoomRepository) AddRoom(room models.Room) {
    stmt, err := repo.Db.Prepare("INSERT INTO room(id, name, private) values(?,?,?)")
    checkErr(err)

    _, err = stmt.Exec(room.GetId(), room.GetName(), room.GetPrivate())
    checkErr(err)
}

func (repo *RoomRepository) FindRoomByName(name string) models.Room {

    row := repo.Db.QueryRow("SELECT id, name, private FROM room where name = ? LIMIT 1", name)

    var room Room

    if err := row.Scan(&room.Id, &room.Name, &room.Private); err != nil {
        if err == sql.ErrNoRows {
            return nil
        }
        panic(err)
    }

    return &room

}

func checkErr(err error) {
    if err != nil {
        panic(err)
    }
}

The repository file has two methods, one for adding a new room and one for finding a room based on the given name.

User Repository

We will do the same thing for the users, add the interfaces and create a repository:

// models/user.go
package models

type User interface {
    GetId() string
    GetName() string
}

type UserRepository interface {
    AddUser(user User)
    RemoveUser(user User)
    FindUserById(ID string) User
    GetAllUsers() []User
}


package repository

import (
    "database/sql"
    "log"

    "github.com/jeroendk/chatApplication/models"
)

type User struct {
    Id string `json:"id"`
    Name string `json:"name"`
}

func (user *User) GetId() string {
    return user.Id
}

func (user *User) GetName() string {
    return user.Name
}

type UserRepository struct {
    Db *sql.DB
}

func (repo *UserRepository) AddUser(user models.User) {
    stmt, err := repo.Db.Prepare("INSERT INTO user(id, name) values(?,?)")
    checkErr(err)

    _, err = stmt.Exec(user.GetId(), user.GetName())
    checkErr(err)
}

func (repo *UserRepository) RemoveUser(user models.User) {
    stmt, err := repo.Db.Prepare("DELETE FROM user WHERE id = ?")
    checkErr(err)

    _, err = stmt.Exec(user.GetId())
    checkErr(err)
}

func (repo *UserRepository) FindUserById(ID string) models.User {

    row := repo.Db.QueryRow("SELECT id, name FROM user where id = ? LIMIT 1", ID)

    var user User

    if err := row.Scan(&user.Id, &user.Name); err != nil {
        if err == sql.ErrNoRows {
            return nil
        }
        panic(err)
    }

    return &user

}

func (repo *UserRepository) GetAllUsers() []models.User {

    rows, err := repo.Db.Query("SELECT id, name FROM user")

    if err != nil {
        log.Fatal(err)
    }
    var users []models.User
    defer rows.Close()
    for rows.Next() {
        var user User
        rows.Scan(&user.Id, &user.Name)
        users = append(users, &user)
    }

    return users
}

The user repository has four methods:

AddUser , to add new users to the database.
RemoveUser , to remove a user from the database.
FindUserById , to find one user by a given ID.
GetAllUsers , to retrieve all users from the database.

Updating existing code to use interfaces

Before we can proceed further, we first need to update some existing code to comply with the new interfaces.

Message

// message.go
import (
    ...
    "github.com/jeroendk/chatApplication/models"
)

... 

type Message struct {
    Action string `json:"action"`
    Message string `json:"message"`
    Target *Room `json:"target"`
    Sender models.User `json:"sender"` // Use model.User interface
}

...

// UnmarshalJSON custom unmarshel to create a Client instance for Sender 
func (message *Message) UnmarshalJSON(data []byte) error {
    type Alias Message
    msg := &struct {
        Sender Client `json:"sender"`
        *Alias
    }{
        Alias: (*Alias)(message),
    }
    if err := json.Unmarshal(data, &msg); err != nil {
        return err
    }
    message.Sender = &msg.Sender
    return nil
}

Client

// client.go
import (
    ...
    "github.com/jeroendk/chatApplication/models"
)

// Change the type sender from Client to the User interface.
func (client *Client) joinRoom(roomName string, sender models.User) {
  ...
}

func (client *Client) notifyRoomJoined(room *Room, sender models.User) {
  ...
}

// Add the GetId method to make Client compatible with model.User interface
func (client *Client) GetId() string {
    return client.ID.String()
}

Room

// room.go

// Add the GetPrivate method to make Room compatible with model.Room interface
func (room *Room) GetPrivate() bool {
    return room.Private
}

Step 2: Using the repositories

Currently, the chatServer is responsible for keeping track of the users and rooms. It does so by putting these entities in a map ( clients & rooms ). We will keep doing this but on top write both entities to the database.

For starters, add the two repositories as property in the struct and set them in the NewWebsocketServer method. We add a new property as well, “ users ” to keep track of all the users. The clients property is dedicated to actual clients, with an active WebSocket connection (this is in preparation for the Pub/Sub logic).

// chatServer.go
import (    
    "github.com/jeroendk/chatApplication/models"
)

type WsServer struct {
    ...
    users []models.User
    roomRepository models.RoomRepository
    userRepository models.UserRepository
}

func NewWebsocketServer(roomRepository models.RoomRepository, userRepository models.UserRepository) *WsServer {
    wsServer := &WsServer{
        clients: make(map[*Client]bool),
        register: make(chan *Client),
        unregister: make(chan *Client),
        rooms: make(map[*Room]bool),
        roomRepository: roomRepository,
        userRepository: userRepository,
    }

    // Add users from database to server
    wsServer.users = userRepository.GetAllUsers()

    return wsServer
}

When creating a new instance of the WsServer, all the users are loaded from the database.

The next step is to change te call to NewWebsocketServer in main.go and include the two repositories

// main.go
...
wsServer := NewWebsocketServer(&repository.RoomRepository{Db: db}, &repository.UserRepository{Db: db})

Using the room repository

Now that we have access to the repository we can use it inside the chatServer methods. First, we will update all existing methods to use the userRepository. Below are the modified methods, within the new code is marked with a comment.

// chatServer.go

func (server *WsServer) registerClient(client *Client) {
    // NEW: Add user to the repo
    server.userRepository.AddUser(client)    

    // Existing actions
    server.notifyClientJoined(client)
    server.listOnlineClients(client)
    server.clients[client] = true

    // NEW: Add user to the user slice
    server.users = append(server.users, message.Sender)
}

func (server *WsServer) unregisterClient(client *Client) {
    if _, ok := server.clients[client]; ok {
        delete(server.clients, client)
        server.notifyClientLeft(client)

        // NEW: Remove user from slice
        for i, user := range server.users {
          if user.GetId() == message.Sender.GetId() {
            server.users[i] = server.users[len(server.users)-1]
            server.users = server.users[:len(server.users)-1]
          }
        }

        // NEW: Remove user from repo
        server.userRepository.RemoveUser(client)
    }
}

func (server *WsServer) listOnlineClients(client *Client) {
    // NEW: Use the users slice instead of the client map
    for _, user := range server.users {
      message := &Message{
        Action: UserJoinedAction,
        Sender: user,
      }
      client.send <- message.encode()
    }
}

After adding the above all the online users should saved in the database. When a user disconnects it is remove from the database.

Using the user repository

Next up are the rooms. We don’t need all the rooms when we start the server. Therefore we only try to look for it in the repository when we can’t find it in the local map.

// chatServer.go

func (server *WsServer) findRoomByName(name string) *Room {
    var foundRoom *Room
    for room := range server.rooms {
        if room.GetName() == name {
            foundRoom = room
            break
        }
    }

    // NEW: if there is no room, try to create it from the repo
    if foundRoom == nil {
        // Try to run the room from the repository, if it is found.
        foundRoom = server.runRoomFromRepository(name)
    }

    return foundRoom
}

// NEW: Try to find a room in the repo, if found Run it.
func (server *WsServer) runRoomFromRepository(name string) *Room {
    var room *Room
    dbRoom := server.roomRepository.FindRoomByName(name)
    if dbRoom != nil {
        room = NewRoom(dbRoom.GetName(), dbRoom.GetPrivate())
        room.ID, _ = uuid.Parse(dbRoom.GetId())

        go room.RunRoom()
        server.rooms[room] = true
    }

    return room
}

func (server *WsServer) createRoom(name string, private bool) *Room {
    room := NewRoom(name, private)
    // NEW: Add room to repo
    server.roomRepository.AddRoom(room)

    go room.RunRoom()
    server.rooms[room] = true

    return room
}

That’s it, in the next step we will finally add the Pub/Sub integration.

Step 3: Redis Pub/Sub

Now, with everything in place, we can start to add the publishing and subscribing to Redis Pub/Sub channels.

First, install the Redis package:

go mod init
go get github.com/go-redis/redis/v8

Then make sure you have a Redis container at your disposal. You can create one with docker & docker-compose for example:

# docker-compose.yml
version: '3.5'

services:
  redis:
    image: "redis:alpine"
    ports:
      - "6364:6379"

Then start it with docker-compose up.

With your Redis container up and running lets create a connection within our application. For this we will create a new file called redis.go and lets put it in the config folder with our database connection.

// config/redis.go

package config

import "github.com/go-redis/redis/v8"

var Redis *redis.Client

func CreateRedisClient() {
    opt, err := redis.ParseURL("redis://localhost:6364/0")
    if err != nil {
        panic(err)
    }

    redis := redis.NewClient(opt)
    Redis = redis
}

Then initialize the connection from your main.go

// main.go

func main() {
    ...
    config.CreateRedisClient()
    ...
}

There are a total of 4 different messages we want to send through the Pub/Sub channels.

Chat messages
User joined notification
User left notification
Private chat invitation

Chat messages

Sending chat messages inside a room is the job of our room.go. It is actually quite easy to integrate the Pub/Sub channels in this logic.

First, we will add two new methods, for publishing in a channel and subscribing to a channel:

// room.go
package main
import (
    "fmt"
    "log"
    "github.com/jeroendk/chatApplication/config"
    "github.com/google/uuid"
    "context"
)

var ctx = context.Background()

...
func (room *Room) publishRoomMessage(message []byte) {
    err := config.Redis.Publish(ctx, room.GetName(), message).Err()

    if err != nil {
        log.Println(err)
    }
}

func (room *Room) subscribeToRoomMessages() {
    pubsub := config.Redis.Subscribe(ctx, room.GetName())

    ch := pubsub.Channel()

    for msg := range ch {
        room.broadcastToClientsInRoom([]byte(msg.Payload))
    }
}

Then we will change the existing calls to broadcastToClientsInRoom , instead, they will use the new publish method. Also, start listing to the Pub/Sub subscription when starting the room.

// room.go 
func (room *Room) RunRoom() {
    // subscribe to pub/sub messages inside a new goroutine
    go room.subscribeToRoomMessages()

    for {
        select {
        ...
        case message := <-room.broadcast:
            room.publishRoomMessage(message.encode())
        }
    }
}

func (room *Room) notifyClientJoined(client *Client) {
    ...
    room.publishRoomMessage(message.encode())
}

User joined & left

Next, lets publish when users join & leave and subscribe to these events inside the chatServer.go

// chatServer.go
package main

import (
    "encoding/json"
    "log"

    "github.com/google/uuid"
    "github.com/jeroendk/chatApplication/config"
    "github.com/jeroendk/chatApplication/models"
)

const PubSubGeneralChannel = "general"

// Publish userJoined message in pub/sub
func (server *WsServer) publishClientJoined(client *Client) {

    message := &Message{
        Action: UserJoinedAction,
        Sender: client,
    }

    if err := config.Redis.Publish(ctx, PubSubGeneralChannel, message.encode()).Err(); err != nil {
        log.Println(err)
    }
}

// Publish userleft message in pub/sub
func (server *WsServer) publishClientLeft(client *Client) {

    message := &Message{
        Action: UserLeftAction,
        Sender: client,
    }

    if err := config.Redis.Publish(ctx, PubSubGeneralChannel, message.encode()).Err(); err != nil {
        log.Println(err)
    }
}

// Listen to pub/sub general channels
func (server *WsServer) listenPubSubChannel() {

    pubsub := config.Redis.Subscribe(ctx, PubSubGeneralChannel)
    ch := pubsub.Channel()
    for msg := range ch {

        var message Message
        if err := json.Unmarshal([]byte(msg.Payload), &message); err != nil {
            log.Printf("Error on unmarshal JSON message %s", err)
            return
        }

        switch message.Action {
        case UserJoinedAction:
            server.handleUserJoined(message)
        case UserLeftAction:
            server.handleUserLeft(message)      
        }
    }
}

func (server *WsServer) handleUserJoined(message Message) {
    // Add the user to the slice
    server.users = append(server.users, message.Sender)
    server.broadcastToClients(message.encode())
}

func (server *WsServer) handleUserLeft(message Message) {
    // Remove the user from the slice
    for i, user := range server.users {
        if user.GetId() == message.Sender.GetId() {
            server.users[i] = server.users[len(server.users)-1]
            server.users = server.users[:len(server.users)-1]
        }
    }
    server.broadcastToClients(message.encode())
}

publishClientJoined & publishClientLeft will replace notifyClientJoined & notifyClientLeft.

Then again start listening to the Channel and make sure the publish methods above are correctly used:

// chatServer.go
func (server *WsServer) Run() {
    go server.listenPubSubChannel()
    ...
}

func (server *WsServer) registerClient(client *Client) {
    // Add user to the repo
    server.userRepository.AddUser(client)

    // Publish user in PubSub
    server.publishClientJoined(client)

    server.listOnlineClients(client)
    server.clients[client] = true
}

func (server *WsServer) unregisterClient(client *Client) {
    if _, ok := server.clients[client]; ok {
        delete(server.clients, client)

        // Remove user from repo
        server.userRepository.RemoveUser(client)

        // Publish user left in PubSub
        server.publishClientLeft(client)
    }
}

Private chat

Almost done, the last piece of the puzzle is to let our users start private chats with each other while they are connected with different servers.

Star by changing the logic of client.go

// client.go

import (    
    ...
    "github.com/jeroendk/chatApplication/config"
    ...
)

func (client *Client) handleJoinRoomPrivateMessage(message Message) {
    // instead of searching for a client, search for User by the given ID.
    target := client.wsServer.findUserByID(message.Message)
    if target == nil {
        return
    }

    // create unique room name combined to the two IDs
    roomName := message.Message + client.ID.String()

    // Join room
    joinedRoom := client.joinRoom(roomName, target)

    // Instead of instantaneously joining the target client. 
    // Let the target client join with a invite request over pub/sub
    if joinedRoom != nil {
        client.inviteTargetUser(target, joinedRoom)
    }
}

// JoinRoom now returns a room or nil
func (client *Client) joinRoom(roomName string, sender models.User) *Room {

    room := client.wsServer.findRoomByName(roomName)
    if room == nil {
        room = client.wsServer.createRoom(roomName, sender != nil)
    }

    // Don't allow to join private rooms through public room message
    if sender == nil && room.Private {
        return nil
    }

    if !client.isInRoom(room) {
        client.rooms[room] = true
        room.register <- client
        client.notifyRoomJoined(room, sender)
    }
    return room
}

// Send out invite message over pub/sub in the general channel.
func (client *Client) inviteTargetUser(target models.User, room *Room) {
    inviteMessage := &Message{
        Action: JoinRoomPrivateAction,
        Message: target.GetId(),
        Target: room,
        Sender: client,
    }

    if err := config.Redis.Publish(ctx, PubSubGeneralChannel, inviteMessage.encode()).Err(); err != nil {
        log.Println(err)
    }
}

So our client is once again able to start a private chat. All we have to do now is to make sure the target client will join as well.

Add the code below to your chatServer.go. The first part adds one extra case in the Switch, to handle private chat invitations.

// chatServer.go
func (server *WsServer) listenPubSubChannel() {
    ...

        switch message.Action {
        ...
        case JoinRoomPrivateAction:
            server.handleUserJoinPrivate(message)
        }
}

func (server *WsServer) handleUserJoinPrivate(message Message) {
    // Find client for given user, if found add the user to the room.
    targetClient := server.findClientByID(message.Message)
    if targetClient != nil {
        targetClient.joinRoom(message.Target.GetName(), message.Sender)
    }
}

// Add the findUserByID method used by client.go
func (server *WsServer) findUserByID(ID string) models.User {
    var foundUser models.User
    for _, client := range server.users {
        if client.GetId() == ID {
            foundUser = client
            break
        }
    }

    return foundUser
}

Result

To test the new set-up, you can start multiple instances of your application on different ports. make sure your Javascript WebSocket actually connects to the correct server. You can change the connection string as follows:

serverUrl: "ws://" + location.host + "/ws",

Then:

go run ./ --addr=:8080
go run ./ --addr=:8090

Done! You finished your Pub/Sub chat application in Go. Stay tuned for the last part in this series. There we will make users log-in before they can participate in chatting.

If you want your users to automatically reconnect after a short outage of some sort, check this out.

Feel free to leave a comment when you have suggestions or questions!

The final source code of this part van be found here:

https://github.com/jeroendk/go-vuejs-chat/tree/v3.0

How to automatically Build and Deploy your Symfony Application.

Jeroen de Kok — Sat, 10 Oct 2020 13:23:00 +0000

When working on any software development project, automation of repeating tasks boosts your productivity and decreases human errors. Running tests, validating coding styles, and deploying to your test server are good examples of tasks that can be automated.

In this post, you will learn how to set-up an automated pipeline in CircleCI that will check each commit on code style , errors , and failing tests. If the builds succeed and you merge your branch in the develop branch, CircleCI will automatically deploy your application to the configured test server with ssh.

What do you need?

To follow along you need the following things:

A (sandbox) Symfony application to build and deploy.
A (Free) CircleCI account, connected to your Git repository.
Deployer, locally to test your deployment script.

The final project can be found on github: https://github.com/jeroendk/symfony-build-and-deploy

What will this post cover?

User PHP-CS-Fixer for code style checking.
Add PHPStan for static code analysis.
Set Up CircleCI for an automated build after each commit.
Configure Deployer for a smooth and automated deployment process.

PHP-CS-Fixer

PHP-CS-fixer is a tool to check and fix coding style issues in your project. To test it locally you can follow the installation instructions here. Then you can specify the preferred coding style rules in a config file named “.php_cs.dist”. For this project our config looks as follows:

<?php
//.php_cs.dist
$finder = PhpCsFixer\Finder::create()
    ->exclude('vendor')
    ->exclude('var')
    ->exclude('config')
    ->exclude('build')
    ->notPath('src/Kernel.php')
    ->notPath('public/index.php')
    ->in(__DIR__)
    ->name('*.php')   
    ->ignoreDotFiles(true);

return PhpCsFixer\Config::create()
    ->setRules([
        '@PSR2' => true,
        '@PhpCsFixer' => true,
        '@Symfony' => true,
        '@PHP70Migration:risky' => true,
        '@PHP71Migration:risky' => true,
        '@DoctrineAnnotation' => true,
        '@PhpCsFixer:risky' => true
    ])
    ->setFinder($finder);

With this config you will apply some risky rules, you can modify it to your needs with the docs as a reference.

If you installed in your development environment or in your docker container, you can execute the following command in the appropriate terminal:

php-cs-fixer --diff --dry-run -v --allow-risky=yes fix

To actually fix any errors remove the dry-run parameter.

PHPStan

PHPStan is a Static Analysis tool for PHP. It will scan your codebase for possible bugs without running your application. Static Analysis is a handy tool in your CI/CD workflow.

Start by installing it as a dev dependency:

composer require --dev phpstan/phpstan

Then create a config file phpstan.neon.dist in the root of your project.

parameters:
    excludes_analyse:
        - %rootDir%/../../../src/DataFixtures/*

One of the things you can do with the config file is to specify which folders you want to exclude, like the DataFixture folder in the example above. Take a look at the documentation for all the other things you can configure.

Execute PHPStan with the following command in your PHP environment:

vendor/bin/phpstan analyse src --level max

CircleCI

Now that we have our checks in place, it is time to tell CircleCI what we want to run each build. For this we have to create a config file called “config.yml” put this file in the folder “.circle”.

Our initial config looks as follows:

version: 2

jobs:
  build:
    docker:
      - image: circleci/php:7.4-node-browsers
        environment:
          MYSQL_HOST: 127.0.0.1
          MYSQL_DB: symfony
          MYSQL_USER: root
          MYSQL_ALLOW_EMPTY_PASSWORD: true
          MYSQL_PASSWORD:
      - image: mysql:5.7
        command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_bin --innodb-large-prefix=true --innodb-file-format=Barracuda
        environment:
          MYSQL_USER: root
          MYSQL_ALLOW_EMPTY_PASSWORD: true
    working_directory: ~/symfony # directory where steps will run
    steps: # a set of executable commands
      - checkout # special step to check out source code to working directory
      - run: sudo apt update
      - run: sudo apt install -y libsqlite3-dev zlib1g-dev mariadb-client zlib1g-dev
      - run: sudo docker-php-ext-install zip pdo_mysql
      - run: sudo docker-php-ext-enable zip pdo_mysql
      - run: sudo composer self-update
      - restore_cache: # special step to restore the dependency cache if `composer.lock` does not change
          keys:
            - composer-v1-{{ checksum "composer.lock" }}
            # fallback to using the latest cache if no exact match is found (See https://circleci.com/docs/2.0/caching/)
            - composer-v1-
      - run: composer install -n --prefer-dist --no-scripts
      - save_cache: # special step to save the dependency cache with the `composer.lock` cache key template
          key: composer-v1-{{ checksum "composer.lock" }}
          paths:
            - vendor
      - restore_cache: # special step to restore the dependency cache if `package.json` does not change
          keys:
            - node-v1-{{ checksum "package.json" }}
            # fallback to using the latest cache if no exact match is found (See https://circleci.com/docs/2.0/caching/)
            - node-v1-
      - run: cp .env .env.local
      - run: yarn install
      - save_cache: # special step to save the dependency cache with the `package.json` cache key template
          key: node-v1-{{ checksum "package.json" }}
          paths:
            - node_modules
      - run: yarn run encore production
      - run: php bin/console security:check
      - run: curl -L https://cs.symfony.com/download/php-cs-fixer-v2.phar -o php-cs-fixer
      - run: chmod a+x php-cs-fixer
      - run: ./php-cs-fixer --diff --dry-run -v --allow-risky=yes fix
      - run: php -d memory_limit=-1 vendor/bin/phpstan analyse src --level max
      - run: php -d memory_limit=-1 vendor/bin/simple-phpunit

workflows:
  version: 2
  notify_deploy:
    jobs:
      - build

The config

A big part of the config is taken from the CircleCI sample config for a PHP project found here. Let’s go through it step by step:

In the docker step, you can specify which containers you need for your build. For this example, we need a PHP + MySQL container. If you need, for example, a Redis container you can specify it here.
After the docker step, we will pull in a few packages and enable some PHP extension that we need, if you need more modules, this is where you add them.
The next step is composer, this will recover the composer cache and optionally install composer packages and write it to the cache
After Composer, recover the npm cache and optionally install and write it to the cache. This config assumes you use Yarn & Webpack encore, you can adjust this to your needs and change it to npm or remove it altogether.

The next few steps make up our “test pipeline”, this is where we perform our tests and determine if our build succeeds. Try to run your scripts from fastest to slowest to avoid wasting minutes of failing builds.

First, we will check for known vulnerabilities with sensiolabs/security-checker (installed with Composer as dev dependency). This command checks for known vulnerabilities in your dependencies.
Second, we will download PHP-CS-Fixer and run it to detect code style issues.
Third, run PHPStan for static code analysis.
And at last, run your test suite using PHPUnit. Make sure to include the symfony/phpunit-bridge as a dev dependency.

If one of the steps fail, the build in CircleCI will fail and we will be notified.

Project Set Up

Make sure you pushed your project to your git repository and head over to the CircleCI website to set-up your project. You should already have an account linked to your git host. Go to “Projects” and press “Set Up Project”. Then choose “Use Existing Config” and acknowledge with “Start Building”.

Your first build should be running wait until it succeeds or fails. If it failed fix your errors and try again!

Great, you now have an automated build pipeline! Makes reviewing those PRs a lot easier. Next, we will add the deployment script using Deployer.

Deployment with Deployer

For deployment to our (test) server, we will use Deployer, this is an easy to use tool to automate your deployment process. Install it with one of the methods specified in the documentation.

Then add the following deploy script to the root of your project. This config is based on the standard Symfony4 recipe (at the time of writing the Symfony 5 recipe is not yet available).

<?php
// deploy.php
declare(strict_types=1);

namespace Deployer;

set('default_stage', 'test');

require 'recipe/symfony4.php';

// Project name
set('application', 'Sample app');

// Project repository
set('repository', 'git@github.com:jeroendk/symfony-build-and-deploy.git');

// Set composer options
set('composer_options', '{{composer_action}} --verbose --prefer-dist --no-progress --no-interaction --optimize-autoloader --no-scripts');

// shared files & folders
add('shared_files', ['.env.local']);
add('shared_dirs', ['public/upload']);

// Hosts
host('test')
    ->hostname('localhost')
    ->user('jeroen')
    ->port(22)
    ->stage('test')
    ->set('branch', 'develop')
    ->set('deploy_path', '~/deploy-folder')
;

// Tasks
task('pwd', function (): void {
    $result = run('pwd');
    writeln("Current dir: {$result}");
});

// [Optional]  Migrate database before symlink new release.
// before('deploy:symlink', 'database:migrate');

// Build yarn locally
task('deploy:build:assets', function (): void {
    run('yarn install');
    run('yarn encore production');
})->local()->desc('Install front-end assets');

before('deploy:symlink', 'deploy:build:assets');

// Upload assets
task('upload:assets', function (): void {
    upload(__DIR__.'/public/build/', '{{release_path}}/public/build');
});

after('deploy:build:assets', 'upload:assets');

// [Optional] if deploy fails automatically unlock.
after('deploy:failed', 'deploy:unlock');

With the above, we defined one host to deploy to, the test environment in this case my Localhost. You can test your connection with the pwd task, run dep pwd and it should output the server directory.

Start deploying with dep deploy. If you configured ssh keys for you remote server these will be used. If not you will be prompted for the password. After which the result should look as follows:

When you know your deployment script works, we can leverage it in CircleCI to automatically deploy to your test server.

Continues Deployment to your (test) server

To make this happen you should be able to sign in using ssh keys, you can’t fill in your password in the CircleCI builds. Make sure you are able to login to your server with ssh keys and then upload your private key to CircleCI. Check these docs for more information on adding an ssh key to CircleCI.

The next step is to add another entry under the “jobs” key in the deploy config. And also add this deploy step to the workflow at the bottom of the file.

# .circleci/config.yml

...
deploy:
    docker:
      - image: circleci/php:7.4-browsers
    working_directory: ~/symfony
    steps:
      - checkout
      - add_ssh_keys:
          fingerprints:
            - "f1:xx:xx" # SSH Key Fingerprint found in CircleCI
      - run:
          name: Install Deployer
          command: |
            curl -LO https://deployer.org/deployer.phar
            sudo mv deployer.phar /usr/local/bin/dep
            sudo chmod +x /usr/local/bin/dep
      - run:
          name: Deploy
          command: | # Add our test server as "known host"
            echo '|1|eqoArfioX6VlupKTFQ6vdavJgZk=|0iGC0C/E1U5oPZGuO1Xd0Gux8oU= ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAq2A7hRGmdnm9tUDbO9IDSwBK6TbQa+PXYPCPy6rbTrTtw7PHkccKrpp0yVhp5HdEIcKr6pLlVDBfOLX9QUsyCOV0wzfjIJNlGEYsdlLJizHhbn2mUjvSAHQqZETYP81eFzLQNnPHt4EVVUh7VfDESU84KezmD5QlWpXLmvU31/yMf+Se8xhHTvKSCZIFImWwoG6mbUoWf9nzpIoaSjB+weqqUUmpaaasXVal72J+UX2B+2RPW3RcT0eOzQgqlJL3RKrTJvdsjE3JEAvGq3lGHSZXy28G3skua2SmVi/w4yCE6gbODqnTWlg7+wC604ydGXA8VJiS5ap43JXiUFFAaQ==' >> ~/.ssh/known_hosts
            dep deploy

workflows:
  version: 2
  notify_deploy:
    jobs:
      - build
      - deploy:
          requires:
            - build
          filters:
            branches:
              only: develop # Only deploy builds on th develop branch

Few things to notice here:

Make sure to add your SSH Key fingerprint, you can grab this from CircleCI in your project settings.
Add your target deployment server as a known host, you can run the command ssh-keyscan -H yourserver.com locally and use the output in your deployment script. If the output contains multiple records, you can add more inserts above.
We will only deploy changes on our develop branch and only after the build job succeeds.

Conclusion

With the configuration above each of your commits will automatically get checked which lets you focus on the right stuff. All of your commits and merges in the develop branch will be automatically deployed to your test server ready to be reviewed by your product owner or your QA team.

A full example can be found here: https://github.com/jeroendk/symfony-build-and-deploy

The post How to automatically Build and Deploy your Symfony Application. appeared first on Which Dev.

How to implement a random exponential backoff algorithm in Javascript ★

Jeroen de Kok — Sat, 10 Oct 2020 07:56:07 +0000

Using an exponential backoff algorithm with randomization when reconnecting to services can prevent sudden spikes on your server after a crash.

Imagine for example you have a WebSocket server with 10.000 clients connected. Your server crashes but comes back up rather quickly. That’s great because you implemented a reconnection script something along the following:

function connect() {
  ws = new WebSocket("ws://localhost:8080");
  ws.addEventListener('close', connect);
}

All your clients will reconnect automatically and no one even knows the server went down right? Right, but there are some problems with this straightforward approach.

Making it backoff exponential

The client will start performing reconnect attempts as soon as the socket closes and will do so for as long as the server is down. This will create a lot of unnecessary requests and can cause network congestion. This can simply be solved with a timer in between the reconnect attempts.

This timeout will limit the reconnect attempts per client per period of time. However, just after disconnecting you want to reconnect the client as soon as possible, the reasons for disconnecting might be some local network error, short outage, or a quick reload of the server. But when initial attempts fail it becomes more likely that the connection errors are related to something that will take longer than a few seconds to restore. Therefore you don’t want to keep hitting the server at the same rate with reconnect attempts.

This is where the exponential backoff algorithm comes in. By increasing the delay exponentially after each attempt we can gradually set the interval to some higher maximum while trying to reconnect as fast as possible at the start.

var initialReconnectDelay = 1000;
var currentReconnectDelay = initialReconnectDelay;
var maxReconnectDelay = 16000;

function connect() {
    ws = new WebSocket("ws://localhost:8080");
    ws.addEventListener('open', onWebsocketOpen);
    ws.addEventListener('close',  onWebsocketClose);
}

function onWebsocketOpen() {
    currentReconnectDelay = initialReconnectDelay;
}

function onWebsocketClose() {
    ws = null;
    setTimeout(() => {
        reconnectToWebsocket();
    }, currentReconnectDelay);
}

function reconnectToWebsocket() {
    if(currentReconnectDelay < maxReconnectDelay) {
        currentReconnectDelay*=2;
    }
    connect();
}

Making it random

So now our clients are throttled on their reconnect attempts that’s good but what happens when the server goes down an instantly goes back up while 10.000 clients are connected? That’s right, all of those clients will try to reconnect at the exact same second. This can cause a spike on the server and in the worse case bring it back down.

To prevent this spike we can make the backoff algorithm random. So not all of our clients reconnect at the same moment. This will gracefully let all of our clients reconnect without spiking the server.

function onWebsocketClose() {
    ws = null;
    // Add anything between 0 and 3000 ms to the delay.  
    setTimeout(() => {
        reconnectToWebsocket();
    }, currentReconnectDelay + Math.floor(Math.random() * 3000)));
}

Of course, you can tweak the numbers to your specific use case based on your server capacity and concurrent clients.

That’s it, if you took or know another approach worth sharing please do so!

The post How to implement a random exponential backoff algorithm in Javascript appeared first on Which Dev.

Multi-room Chat Application With WebSockets In Go And Vue.js (Part 2)

Jeroen de Kok — Thu, 01 Oct 2020 17:22:41 +0000

In this tutorial series, we will build a fully working chat application, the server part will be built with WebSockets in Go, on the front-end we will leverage Vue.js to create a simple interface.

This is the second part of this series, in part 1 we completed the basic chat application with one chat room. In this part, we will introduce multi-room support and allow users to chat privately in a one on one room.

Posts overview

Basic chat application with Go + Vue.JS
Multi-room & 1 one 1 chats. (This page)
Using Redis Pub/Sub for scalability (Coming soon!)
Adding authentication and allow users to log-in (Coming soon!)

Preconditions

To follow along you should have completed part 1 or grab the source from here.

Step 1: Introducing rooms

The first thing we will do is to create a new struct for our new Room type. The room struct looks a lot like how the ChatServer is currently structured. Because each room should be able to register clients, unregister clients, and broadcast to clients, we will add the same maps and channels as in the ChatServer.

//room.go
package main

import "fmt"

type Room struct {
    name       string
    clients    map[*Client]bool
    register   chan *Client
    unregister chan *Client
    broadcast  chan *Message
}

// NewRoom creates a new Room
func NewRoom(name string) *Room {
    return &Room{
        name:       name,
        clients:    make(map[*Client]bool),
        register:   make(chan *Client),
        unregister: make(chan *Client),
        broadcast:  make(chan *Message),
    }
}

// RunRoom runs our room, accepting various requests
func (room *Room) RunRoom() {
    for {
        select {

        case client := <-room.register:
            room.registerClientInRoom(client)

        case client := <-room.unregister:
            room.unregisterClientInRoom(client)

        case message := <-room.broadcast:
            room.broadcastToClientsInRoom(message)
        }
    }
}

func (room *Room) registerClientInRoom(client *Client) {
    room.notifyClientJoined(client)
    room.clients[client] = true
}

func (room *Room) unregisterClientInRoom(client *Client) {
    if _, ok := room.clients[client]; ok {
        delete(room.clients, client)
    }
}

func (room *Room) broadcastToClientsInRoom(message []byte) {
    for client := range room.clients {
        client.send <- message
    }
}

The only new thing here is the Name property, this is to identify each room later on.

Keeping track of the rooms

Because our ChatServer acts like a hub for connecting the parts of our chat application, we will use it to keep track of all the rooms that will be created.

First add a new map to hold the rooms:

//chatServer.go
type WsServer struct {
    ...
    rooms      map[*Room]bool
}

// NewWebsocketServer creates a new WsServer type
func NewWebsocketServer() *WsServer {
    return &WsServer{
        ...
        rooms:      make(map[*Room]bool),
    }
}

We will keep the existing maps and channels for now, me might need them when we want to know who is online.

Next add a method to find a existing room and to create a new one:

//chatServer.go
func (server *WsServer) findRoomByName(name string) *Room {
    var foundRoom *Room
    for room := range server.rooms {
        if room.GetName() == name {
            foundRoom = room
            break
        }
    }

    return foundRoom
}

func (server *WsServer) createRoom(name string) *Room {
    room := NewRoom(name)
    go room.RunRoom()
    server.rooms[room] = true

    return room
}

Step 2: Changing the Client to accept various requests

In this next step, we will update our client, so it is able to handle a wider variety of requests than just passing along a text message to the ChatServer.

Message types

To handle different kinds of messages, like joining a room or sending a chat message, we will introduce a Message type. This type will consist of:

Action: What action is the message requesting (send-message, join-room or leave-room)?
Message: The actual message, could be a room name when joining a room for example.
Target: A target for the message, a room for example.
Sender: Who is sending the message?

//message.go
package main

import (
    "encoding/json"
    "log"
)

const SendMessageAction = "send-message"
const JoinRoomAction = "join-room"
const LeaveRoomAction = "leave-room"

type Message struct {
    Action  string  `json:"action"`
    Message string  `json:"message"`
    Target  string  `json:"target"`
    Sender  *Client `json:"sender"`
}

func (message *Message) encode() []byte {
    json, err := json.Marshal(message)
    if err != nil {
        log.Println(err)
    }

    return json
}

The JSON tags are needed for encoding and decoding, see the documentation for more info.

We will include an encode method that can be called to create a json []byte object that is ready to be send back to clients.

Interacting with the rooms

Now it’s time to modify our Client so it can join, leave, and broadcast to rooms. First, we will add a map to our client this is for keeping track of the rooms this client joins, in case he or she wants to leave one.

We will also modify the disconnect method so a client will be unregistered from each room next to unregistering from the ChatServer.

//client.go
type Client struct {
    ...
    rooms    map[*Room]bool
}

func newClient(conn *websocket.Conn, wsServer *WsServer) *Client {
    return &Client{
        ...
        rooms:    make(map[*Room]bool),
    }
}

func (client *Client) disconnect() {
    client.wsServer.unregister <- client
    for room := range client.rooms {
        room.unregister <- client
    }
    ...
}

Handling messages

Now we are able to actually join a room. As mentioned earlier we created a Message type with different actions. Lets now use those actions to handle the different kinds of messages.

First, modify the client and add a new method that decodes the JSON message and then handles it directly or passes it to a dedicated handler:

// client.go
import (
    "encoding/json"
    ...
)

func (client *Client) handleNewMessage(jsonMessage []byte) {

    var message Message
    if err := json.Unmarshal(jsonMessage, &message); err != nil {
        log.Printf("Error on unmarshal JSON message %s", err)
    }

    // Attach the client object as the sender of the messsage.
    message.Sender = client

    switch message.Action {
    case SendMessageAction:
        // The send-message action, this will send messages to a specific room now.
        // Which room wil depend on the message Target
        roomName := message.Target
        // Use the ChatServer method to find the room, and if found, broadcast!
        if room := client.wsServer.findRoomByName(roomName); room != nil {
            room.broadcast <- &message
        }
    // We delegate the join and leave actions. 
    case JoinRoomAction:
        client.handleJoinRoomMessage(message)

    case LeaveRoomAction:
        client.handleLeaveRoomMessage(message)
    }
}

So with the new method above, we will send messages directly to a room now! Since we are sending Message objects now instead of []byte objects, we will need to make a minor adjustment to our room.go.

// room.go
func (room *Room) RunRoom() {
    for {
        select {
        ...
        case message := <-room.broadcast:
            room.broadcastToClientsInRoom(message.encode())
        }

    }
}

The methods for joining and leaving a room are fairly simple. When the room does not exist yet we will create one:

// client.go
func (client *Client) handleJoinRoomMessage(message Message) {
    roomName := message.Message

    room := client.wsServer.findRoomByName(roomName)
    if room == nil {
        room = client.wsServer.createRoom(roomName)
    }

    client.rooms[room] = true

    room.register <- client
}

func (client *Client) handleLeaveRoomMessage(message Message) {
    room := client.wsServer.findRoomByName(message.Message)
    if _, ok := client.rooms[room]; ok {
        delete(client.rooms, room)
    }

    room.unregister <- client
}

upon leaving a room we both remove it from the client and unregister the client from the room.

The last step here is to use our new methods when a new message is received so switch out the first rule for the second in client.go :

- client.wsServer.broadcast <- jsonMessage
+ client.handleNewMessage(jsonMessage)

Naming our client

It would be nice to see whom you are chatting with, so let’s give our so-far anonymous client a name.

// client.go
type Client struct {
    ... 
    Name     string `json:"name"`   
}

func newClient(conn *websocket.Conn, wsServer *WsServer, name string) *Client {
    return &Client{
        Name:     name,
        ...
    }
}

func (client *Client) GetName() string {
    return client.Name
}

Notice the json tags again, the client is used as sender in the message type. Now it wil be encoded with the name of the sender.

To get the name form the user, we will allow the use of a parameter on the connection string. For this we have to modify the existing ServeWs method

// client.go
func ServeWs(wsServer *WsServer, w http.ResponseWriter, r *http.Request) {

    name, ok := r.URL.Query()["name"]

    if !ok || len(name[0]) < 1 {
        log.Println("Url Param 'name' is missing")
        return
    }

    ...

    client := newClient(conn, wsServer, name[0])

    ...
}

Welcome message

The last thing we will do is send out a message when a user joins a room, so other users see him or her joining!

For this we will add one new method in room.go

// room.go
const welcomeMessage = "%s joined the room"

func (room *Room) notifyClientJoined(client *Client) {
    message := &Message{
        Action:  SendMessageAction,
        Target:  room.name,
        Message: fmt.Sprintf(welcomeMessage, client.GetName()),
    }

    room.broadcastToClientsInRoom(message.encode())
}

Then call this method in when a user registers:

// room.go
func (room *Room) registerClientInRoom(client *Client) {
    // by sending the message first the new user won't see his own message.
    room.notifyClientJoined(client)
    room.clients[client] = true
}

That’s all the server code for our public chat rooms. Now let’s update our front-end code!

Step 3: Room interface

Let’s start out with the JavaScript. To keep track of our new components (rooms & the name of a user) we will drop a few data properties and add some other. The final result should look like:

// public/assets/app.js
var app = new Vue({
  el: '#app',
  data: {
    ws: null,
    serverUrl: "ws://localhost:8080/ws",
    roomInput: null,
    rooms: [],
    user: {
      name: ""
    }
  },
  ... 
})

roomInput is used for joining new rooms.
rooms wil keep track of the joined rooms.
user is for user data, like the name.

The modified methods look as followed:

// public/assets/app.js
methods: {
    connect() {
        this.connectToWebsocket();
    },
    connectToWebsocket() {
        // Pass the name paramter when connecting.
        this.ws = new WebSocket(this.serverUrl + "?name=" + this.user.name);
        this.ws.addEventListener('open', (event) => { this.onWebsocketOpen(event) });
        this.ws.addEventListener('message', (event) => { this.handleNewMessage(event) });
    },
    onWebsocketOpen() {
        console.log("connected to WS!");
    },

    handleNewMessage(event) {
        let data = event.data;
        data = data.split(/\r?\n/);

        for (let i = 0; i < data.length; i++) {
        let msg = JSON.parse(data[i]);
        // display the message in the correct room.
        const room = this.findRoom(msg.target);
        if (typeof room !== "undefined") {
            room.messages.push(msg);
        }
        }
    },
    sendMessage(room) {
        // send message to correct room.
        if (room.newMessage !== "") {
        this.ws.send(JSON.stringify({
            action: 'send-message',
            message: room.newMessage,
            target: room.name
        }));
        room.newMessage = "";
        }
    },
    findRoom(roomName) {
        for (let i = 0; i < this.rooms.length; i++) {
          if (this.rooms[i].name === roomName) {
              return this.rooms[i];
          }
        }
    },
    joinRoom() {
        this.ws.send(JSON.stringify({ action: 'join-room', message: this.roomInput }));
        this.messages = [];
        this.rooms.push({ "name": this.roomInput, "messages": [] });
        this.roomInput = "";
    },
    leaveRoom(room) {
        this.ws.send(JSON.stringify({ action: 'leave-room', message: room.name }));

        for (let i = 0; i < this.rooms.length; i++) {
          if (this.rooms[i].name === room.name) {
              this.rooms.splice(i, 1);
              break;
          }
        }
    }
}

we’ve introduced three new methods for finding a room, joining a room and leaving a room.

The existing receive and send methods are modified to work with the rooms.

The HTML is modified to include an input for choosing a name and for joining a room. After filling out a name it will connect to the WebSocket server.

<!-- public/index.html-->
...
  <body>
    <div id="app">
      <div class="container h-100">
        <div class="row justify-content-center h-100">
          <div class="col-12 form" v-if="!ws">
              <div class="input-group">
                <input
                  v-model="user.name"
                  class="form-control name"
                  placeholder="Please fill in your (nick)name"
                  @keyup.enter.exact="connect"
                />
                <div class="input-group-append">
                  <span class="input-group-text send_btn" @click="connect">
                  >
                  </span>
                </div>
            </div>
          </div>

          <div class="col-12 room" v-if="ws != null">
            <div class="input-group">
              <input
                v-model="roomInput"
                class="form-control name"
                placeholder="Type the room you want to join"
                @keyup.enter.exact="joinRoom"
              />
              <div class="input-group-append">
                <span class="input-group-text send_btn" @click="joinRoom">
                >
                </span>
              </div>
            </div>
          </div>

          <div class="chat" v-for="(room, key) in rooms" :key="key">
            <div class="card">
              <div class="card-header msg_head">
                <div class="d-flex bd-highlight justify-content-center">
                  {{room.name}}
                  <span class="card-close" @click="leaveRoom(room)">leave</span>
                </div>
              </div>
              <div class="card-body msg_card_body">
                <div
                  v-for="(message, key) in room.messages"
                  :key="key"
                  class="d-flex justify-content-start mb-4"
                >
                  <div class="msg_cotainer">
                    {{message.message}}
                    <span class="msg_name" v-if="message.sender">{{message.sender.name}}</span>
                  </div>
                </div>
              </div>
              <div class="card-footer">
                <div class="input-group">
                  <textarea
                    v-model="room.newMessage"
                    name=""
                    class="form-control type_msg"
                    placeholder="Type your message..."
                    @keyup.enter.exact="sendMessage(room)"
                  ></textarea>
                  <div class="input-group-append">
                    <span class="input-group-text send_btn" @click="sendMessage(room)"
                      >></span
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

The modified style can be found here: https://github.com/jeroendk/go-vuejs-chat/blob/master/public/assets/style.css

That is it for public rooms! We should now be able to run our code… Start your server with:

go run ./

And visit: http://localhost:8080

You should be able to join multiple rooms and start chatting.

Step 4: Listing online users

Not that we can join chat rooms on the fly it is time to add one on one chats. We will make use of the existing room architecture to start private chats.

To be able to start a private chat, the user should be able to see who is online. So the first thing we will do is notify users when a user joins or leaves.

Let’s open our Message file and add two more actions:

// message.go
const UserJoinedAction = "user-join"
const UserLeftAction = "user-left"

Identify users

To keep users apart let’s add a unique ID to our user struct. For this we will use the UUID bundle, install it as follows:

go get github.com/google/uuid

After installing modify the Client struct to include a field for the ID and generate a new ID on creation:

// client.go
import (
    ...
    "github.com/google/uuid"
)
type Client struct {
    ...
    ID       uuid.UUID `json:"id"`
    ...
}

func newClient(conn *websocket.Conn, wsServer *WsServer, name string) *Client {
    return &Client{
        ID:       uuid.New(),
        ...
    }
}

Sending notifications

Next, we will implement the methods for notifying the users, this will be done in the chatServer because that is were users are joining and leaving.

We will add three methods:

notifyClientJoined, to notify existing users when a new one joins.
notifyClientLeft, to notify existing users when one leaves.
listOnlineClients, to list all the existing users to the joining user.

// chatServer.go
func (server *WsServer) notifyClientJoined(client *Client) {
    message := &Message{
        Action: UserJoinedAction,
        Sender: client,
    }

    server.broadcastToClients(message.encode())
}

func (server *WsServer) notifyClientLeft(client *Client) {
    message := &Message{
        Action: UserLeftAction,
        Sender: client,
    }

    server.broadcastToClients(message.encode())
}

func (server *WsServer) listOnlineClients(client *Client) {
    for existingClient := range server.clients {
        message := &Message{
            Action: UserJoinedAction,
            Sender: existingClient,
        }
        client.send <- message.encode()
    }
}

At last we have to call these methods at the appropriate times.

The existing register and unregister methods will now look like this:

// chatServer.go
func (server *WsServer) registerClient(client *Client) {
    server.notifyClientJoined(client)
    server.listOnlineClients(client)
    server.clients[client] = true
}

func (server *WsServer) unregisterClient(client *Client) {
    if _, ok := server.clients[client]; ok {
        delete(server.clients, client)
        server.notifyClientLeft(client)
    }
}

Notify all the clients of the new client and list all the clients to the new one before we add the new client to the map. This way the client won’t see his own profile.

Handling the notifications

Now we should be able to listen to the notifications in the JavaScript. First, we will add a data property and the methods for handling these notifications:

// public/assets/app.js
data: {
    ...
    users: []
},

handleUserJoined(msg) {
    this.users.push(msg.sender);
},
handleUserLeft(msg) {
    for (let i = 0; i < this.users.length; i++) {
        if (this.users[i].id == msg.sender.id) {
            this.users.splice(i, 1);
        }
    }
},

Next refactor the handleNewMessage method so it can act upon multiple types of messages.

// public/assets/app.js
handleNewMessage(event) {
    let data = event.data;
    data = data.split(/\r?\n/);

    for (let i = 0; i < data.length; i++) {
        let msg = JSON.parse(data[i]);
        switch (msg.action) {
        case "send-message":
            this.handleChatMessage(msg);
            break;
        case "user-join":
            this.handleUserJoined(msg);
            break;
        case "user-left":
            this.handleUserLeft(msg);
            break;
        default:
            break;
        }
    }
},

handleChatMessage(msg) {
  const room = this.findRoom(msg.target);
  if (typeof room !== "undefined") {
    room.messages.push(msg);
  }
},

Listing the users

Alright, it is time to display our online users, open the HTML file, and add the following just above:

<!-- public/index.html-->
<div class="col-12 ">
    <div class="row">
        <div class="col-2 card profile" v-for="user in users" :key="user.id">
        <div class="card-header">{{user.name}}</div>
        <div class="card-body">
            <button class="btn btn-primary">Send Message</button>
        </div>
        </div>
    </div>
</div>

You can add the above code just before the room input field:

<div class="col-12 room" v-if="ws != null">

The modified style can be found here: https://github.com/jeroendk/go-vuejs-chat/blob/master/public/assets/style.css

Now join the server with multiple tabs and the result should look like this:

Step 5: Starting a private chat

We are now able to see who is online, so the next step is to create a private chat room when you want to message someone.

First open up the message file again, we will add two more actions:

JoinRoomPrivateAction, to join or create a private room.
RoomJoinedAction, to send back to the user after joining a room. Soon will identify rooms by ID instead of the name so we have to let our users know what this ID is.

// message.go
const JoinRoomPrivateAction = "join-room-private"
const RoomJoinedAction = "room-joined"


type Message struct {
-   Target  string  `json:"target"` 
+   Target  *Room   `json:"target"`
}

We changed the target in a message to the Room type instead of a string, this way we can include the ID and the name.

Identify Rooms

Now let’s give our rooms an ID like with the users we will use the UUID library. We will expose the Name field in JSON as well by making it public (capitalize) and adding the JSON tags. At last, we add a boolean field that indicates if the room is private or public.

// room.go
import (
    ...
    "github.com/google/uuid"
)

type Room struct {
    ID         uuid.UUID `json:"id"`
    Name       string    `json:"name"`  
    Private    bool `json:"private"`
    ...
}

func NewRoom(name string, private bool) *Room {
    return &Room{
        ID:         uuid.New(),
        Name:       name,       
        Private:    private,
        ...
    }
}

func (room *Room) GetId() string {
    return room.ID.String()
}

func (room *Room) GetName() string {
    return room.Name
}

To comply with the changed message struct we make one more adjustment to the room file. In the notifyClientJoined method change the Target to room instead of room.name.

// room.go
message := &Message{
  Action:  SendMessageAction,
  Target:  room,
  Message: fmt.Sprintf(welcomeMessage, client.GetName()),
}

If you want to suppress the welcome message when another user joins the private room, change the registerClientInRoom method like this:

// room.go
func (room *Room) registerClientInRoom(client *Client) {
    if !room.Private {
        room.notifyClientJoined(client)
    }
    room.clients[client] = true
}

Joining a private room

To join a private room we can reuse a lot of existing code in the client file, therefor we refactor it to use it both for private and public rooms. The end result looks like below. See the inline comments for some more explanation.

// client.go

// Refactored method
// Use the ID of the target room instead of the name to find it.
// Added case for joining private room
func (client *Client) handleNewMessage(jsonMessage []byte) {

    var message Message
    if err := json.Unmarshal(jsonMessage, &message); err != nil {
        log.Printf("Error on unmarshal JSON message %s", err)
        return
    }

    message.Sender = client

    switch message.Action {
    case SendMessageAction:
        roomID := message.Target.GetId()
        if room := client.wsServer.findRoomByID(roomID); room != nil {
            room.broadcast <- &message
        }

    case JoinRoomAction:
        client.handleJoinRoomMessage(message)

    case LeaveRoomAction:
        client.handleLeaveRoomMessage(message)

    case JoinRoomPrivateAction:
        client.handleJoinRoomPrivateMessage(message)
    }

}

// Refactored method
// Use new joinRoom method
func (client *Client) handleJoinRoomMessage(message Message) {
    roomName := message.Message

    client.joinRoom(roomName, nil)
}

// Refactored method
// Added nil check
func (client *Client) handleLeaveRoomMessage(message Message) {
    room := client.wsServer.findRoomByID(message.Message)
    if room == nil {
        return
    }
    if _, ok := client.rooms[room]; ok {
        delete(client.rooms, room)
    }

    room.unregister <- client
}

// New method
// When joining a private room we will combine the IDs of the users
// Then we will bothe join the client and the target.
func (client *Client) handleJoinRoomPrivateMessage(message Message) {

    target := client.wsServer.findClientByID(message.Message)
    if target == nil {
        return
    }

    // create unique room name combined to the two IDs
    roomName := message.Message + client.ID.String()

    client.joinRoom(roomName, target)
    target.joinRoom(roomName, client)

}

// New method
// Joining a room both for public and private roooms
// When joiing a private room a sender is passed as the opposing party
func (client *Client) joinRoom(roomName string, sender *Client) {

    room := client.wsServer.findRoomByName(roomName)
    if room == nil {
        room = client.wsServer.createRoom(roomName, sender != nil)
    }

    // Don't allow to join private rooms through public room message
    if sender == nil && room.Private {
        return
    }

    if !client.isInRoom(room) {
        client.rooms[room] = true
        room.register <- client
        client.notifyRoomJoined(room, sender)
    }

}

// New method
// Check if the client is not yet in the room
func (client *Client) isInRoom(room *Room) bool {
    if _, ok := client.rooms[room]; ok {
        return true
    }
    return false
}

// New method
// Notify the client of the new room he/she joined
func (client *Client) notifyRoomJoined(room *Room, sender *Client) {
    message := Message{
        Action: RoomJoinedAction,
        Target: room,
        Sender: sender,
    }

    client.send <- message.encode()
}

After applying the above, we need to update our chatServer and add two new methods used by the client:

// chatServer.go
func (server *WsServer) findRoomByID(ID string) *Room {
    var foundRoom *Room
    for room := range server.rooms {
        if room.GetId() == ID {
            foundRoom = room
            break
        }
    }

    return foundRoom
}

func (server *WsServer) findClientByID(ID string) *Client {
    var foundClient *Client
    for client := range server.clients {
        if client.ID.String() == ID {
            foundClient = client
            break
        }
    }

    return foundClient
}

And at last change the joinRoom method to pass the private boolean:

// chatServer.go
func (server *WsServer) createRoom(name string, private bool) *Room {
    room := NewRoom(name, private)
    ...
}

Putting it al together

Alright, it is time to let it all fall in place by finishing our client-side code.

Since we now send over a room object instead of just a name we have to adjust a few existing methods:

// public/assets/app.js
handleChatMessage(msg) {
  const room = this.findRoom(msg.target.id);
  if (typeof room !== "undefined") {
    room.messages.push(msg);
  }
},

sendMessage(room) {
    if (room.newMessage !== "") {
        this.ws.send(JSON.stringify({
        action: 'send-message',
        message: room.newMessage,
        target: {
            id: room.id,
            name: room.name
        }
        }));
        room.newMessage = "";
    }
},

findRoom(roomId) {
    for (let i = 0; i < this.rooms.length; i++) {
        if (this.rooms[i].id === roomId) {
        return this.rooms[i];
        }
    }
},

And at last, add the methods for joining a private room and responding to room-joined action from the server:

// public/assets/app.js

handleNewMessage(event) {
  ....
  case "room-joined":
    this.handleRoomJoined(msg);
    break;
}

handleRoomJoined(msg) {
  room = msg.target;
  room.name = room.private ? msg.sender.name : room.name;
  room["messages"] = [];
  this.rooms.push(room);
},

// we removed a line in the function below
// since we only save new rooms when the server tells so
joinRoom() {
  this.ws.send(JSON.stringify({ action: 'join-room', message: this.roomInput }));
  this.roomInput = "";
},

joinPrivateRoom(room) {
  this.ws.send(JSON.stringify({ action: 'join-room-private', message: room.id }));
}

Ok that’s it! Let’s see our chat server application in action!

What’s next?

In the next part will leverage Redis Pub/Sub for scalability (or for fun?), so stay tuned!

Feel free to leave a comment when you have suggestions or questions!

The final source code of this part van be found here:

https://github.com/jeroendk/go-vuejs-chat/tree/v2.0

The post Multi-room Chat Application With WebSockets In Go And Vue.js (Part 2) appeared first on Which Dev.

Building a simple Chat application with WebSockets in Go and Vue.js

Jeroen de Kok — Sun, 27 Sep 2020 17:10:52 +0000

In this tutorial we will build a fully working chat application, the server part will be built with WebSockets in Go, on the front-end we will leverage Vue.js to create a simple interface.

We start out simple and have some fun building a fully working chat application. I'm planning to add some follow up posts soon where I'll explain how to add more features.

Preconditions

Make sure your Go environment is set-up. If not follow the official documentation here. Some basic knowledge of the Go Syntax and Javascript/Vue.js is assumed.

Step 1: Setting up the WebSocket server

In the first step, we will step up the WebSocket server. For the WebSocket implementation, we will be using the gorilla/WebSocket package. To install this package paste the following in your console while in you are in your project folder:

go get github.com/gorilla/websocket

Client

Alright, now let’s add client.go, this file will represent the WebSocket client on the server-side.

We start with the bare minimum, define a Client type to hold the connection. Then expose a ServeWs() function to allow the creation of Websocket connections and use newClient() to create Client structs.

//client.go
package main

import (
    "fmt"
    "log"
    "net/http"

    "github.com/gorilla/websocket"
)

var upgrader = websocket.Upgrader{
    ReadBufferSize:  4096,
    WriteBufferSize: 4096,
}

// Client represents the websocket client at the server
type Client struct {
    // The actual websocket connection.
    conn *websocket.Conn
}

func newClient(conn *websocket.Conn) *Client {
    return &Client{
        conn: conn,
    }
}

// ServeWs handles websocket requests from clients requests.
func ServeWs(w http.ResponseWriter, r *http.Request) {

    conn, err := upgrader.Upgrade(w, r, nil)
    if err != nil {
        log.Println(err)
        return
    }

    client := newClient(conn)

    fmt.Println("New Client joined the hub!")
    fmt.Println(client)
}

The upgrader is used to upgrade the HTTP server connection to the WebSocket protocol. the return value of this function is a WebSocket connection.

Main
Alright, so now we need a simple HTTP server to handle requests from clients and pass them to the ServeWs function.

At first create an HTTP server that listens on the port specified as a flag or on :8080 as default. Requests to the endpoint “/ws” will be handled by our ServeWs function.

//main.go
package main

import (
    "flag"
    "log"
    "net/http"
)

var addr = flag.String("addr", ":8080", "http server address")

func main() {
    flag.Parse()

    http.HandleFunc("/ws", func(w http.ResponseWriter, r *http.Request) {
        ServeWs(w, r)
    })

    log.Fatal(http.ListenAndServe(*addr, nil))
}

That’s it for the server part, for now at least… next, we will try to connect to the WebSocket server with a client.

Step 2: Creating the front-end

The front-end will be kept simple, first, we will add an index.html with some external dependencies.

<!-- public/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Chat</title>
    <!-- Load required Bootstrap and BootstrapVue CSS -->
    <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

    <!-- Load polyfills to support older browsers -->
    <script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>

    <!-- Load Vue followed by BootstrapVue -->
    <script src="https://unpkg.com/vue"></script>
    <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

    <!-- Load the following for BootstrapVueIcons support -->
    <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script> 
  </head>

  <body>
    <div id="app">
    </div>
  </body>

  <script src="assets/app.js"></script>
</html>

Then create an app.js in the /public/assets folder. In this file we will do three things for now:

Create a Vue.js app with new Vue()
Create a WebSocket connection to our server
Listen to the WebSocket open event which indicates that we have a connection.

// public/assets/app.js
var app = new Vue({
    el: '#app',
    data: {
      ws: null,
      serverUrl: "ws://localhost:8080/ws"
    },
    mounted: function() {
      this.connectToWebsocket()
    },
    methods: {
      connectToWebsocket() {
        this.ws = new WebSocket( this.serverUrl );
        this.ws.addEventListener('open', (event) => { this.onWebsocketOpen(event) });
      },
      onWebsocketOpen() {
        console.log("connected to WS!");
      }
    }
  })

Alright now let’s make sure Go serves our static files, open the main.go file and add the following lines before the listenAndServe call:

...

fs := http.FileServer(http.Dir("./public"))
http.Handle("/", fs)

log.Fatal(http.ListenAndServe(*addr, nil))

Testing the connection
Now you should be able to establish a WebSocket connection from your browser with your Go server. Startup your server from your terminal with:

go run ./

Open up your browser and go to http://localhost:8080. If everything’s working you should see a console.log message that tells you you are connected to the WebSocket! You can also check the network tab of your console and see the pending WebSocket connection:

Meanwhile, in the terminal where you started the Go program, you should see a log with the message “New Client joined the hub!”.

Step 3: Sending and receiving messages

OK, connection established… let’s make sure we can send and receive messages with our connected client. In order to keep track of the connected clients at the server, we add a new file called chatServer.go.

This file contains a WsServer type that has one map for the Clients registered in the server. It also has two channels, one for register requests and one for unregister requests.

package main

type WsServer struct {
    clients    map[*Client]bool
    register   chan *Client
    unregister chan *Client
}

// NewWebsocketServer creates a new WsServer type
func NewWebsocketServer() *WsServer {
    return &WsServer{
        clients:    make(map[*Client]bool),
        register:   make(chan *Client),
        unregister: make(chan *Client),
    }
}

// Run our websocket server, accepting various requests
func (server *WsServer) Run() {
    for {
        select {

        case client := <-server.register:
            server.registerClient(client)

        case client := <-server.unregister:
            server.unregisterClient(client)
        }
    }
}

func (server *WsServer) registerClient(client *Client) {
    server.clients[client] = true
}

func (server *WsServer) unregisterClient(client *Client) {
    if _, ok := server.clients[client]; ok {
        delete(server.clients, client)
    }
}

The Run() function will run infinitely and listens to the channels. One’s new requests present themself, they will be handled through dedicated functions. For now, this is simply adding clients to the map or removing them.

Main
After this we have to update the main.go file and:

Create a new WsServer
Run in in a Go routine
Pass the server to the ServeWs function

wsServer := NewWebsocketServer()
go wsServer.Run()

http.HandleFunc("/ws", func(w http.ResponseWriter, r *http.Request) {
  ServeWs(wsServer, w, r)
})

Client.go
The next step involves the client file. First, we modify the type struct, we want to keep a reference to the WsServer for each Client. We may as well register the client within the server by pushing the newly created client in the register channel. Just before registering in the server we are starting two goroutines that we will define below.

// Client represents the websocket client at the server
type Client struct {
    // The actual websocket connection.
    conn     *websocket.Conn
    wsServer *WsServer
}

func newClient(conn *websocket.Conn, wsServer *WsServer) *Client {
    return &Client{
        conn:     conn,
        wsServer: wsServer,
    }
}

// ServeWs handles websocket requests from clients requests.
func ServeWs(wsServer *WsServer, w http.ResponseWriter, r *http.Request) {

    conn, err := upgrader.Upgrade(w, r, nil)
    if err != nil {
        log.Println(err)
        return
    }

    client := newClient(conn, wsServer)

    go client.writePump()
    go client.readPump()

    wsServer.register <- client
}

revised type declaration, newClient() and ServeWs() functions.

readPump
In the readPump Goroutine, the client will read new messages send over the WebSocket connection. It will do so in an endless loop until the client is disconnected. When the connection is closed, the client will call its own disconnect method to clean up.

//import statements

const (
    // Max wait time when writing message to peer
    writeWait = 10 * time.Second

    // Max time till next pong from peer
    pongWait = 60 * time.Second

    // Send ping interval, must be less then pong wait time
    pingPeriod = (pongWait * 9) / 10

    // Maximum message size allowed from peer.
    maxMessageSize = 10000
)

....

func (client *Client) readPump() {
    defer func() {
        client.disconnect()
    }()

    client.conn.SetReadLimit(maxMessageSize)
    client.conn.SetReadDeadline(time.Now().Add(pongWait))
    client.conn.SetPongHandler(func(string) error { client.conn.SetReadDeadline(time.Now().Add(pongWait)); return nil })

    // Start endless read loop, waiting for messages from client
    for {
        _, jsonMessage, err := client.conn.ReadMessage()
        if err != nil {
            if websocket.IsUnexpectedCloseError(err, websocket.CloseGoingAway, websocket.CloseAbnormalClosure) {
                log.Printf("unexpected close error: %v", err)
            }
            break
        }

        client.wsServer.broadcast <- jsonMessage
    }
}

Upon receiving new messages the client will push them in the WsServer broadcast channel. We will create this channel below, first, we finish our client by adding the WritePump method

WritePump
The writePump goroutine handles sending the messages to the connected client. It runs in an endless loop waiting for new messages in the client.send channel. When receiving new messages it writes them to the client, if there are multiple messages available they will be combined in one write.

...
var (
    newline = []byte{'\n'}
    space   = []byte{' '}
)

...
func (client *Client) writePump() {
    ticker := time.NewTicker(pingPeriod)
    defer func() {
        ticker.Stop()
        client.conn.Close()
    }()
    for {
        select {
        case message, ok := <-client.send:
            client.conn.SetWriteDeadline(time.Now().Add(writeWait))
            if !ok {
                // The WsServer closed the channel.
                client.conn.WriteMessage(websocket.CloseMessage, []byte{})
                return
            }

            w, err := client.conn.NextWriter(websocket.TextMessage)
            if err != nil {
                return
            }
            w.Write(message)

            // Attach queued chat messages to the current websocket message.
            n := len(client.send)
            for i := 0; i < n; i++ {
                w.Write(newline)
                w.Write(<-client.send)
            }

            if err := w.Close(); err != nil {
                return
            }
        case <-ticker.C:
            client.conn.SetWriteDeadline(time.Now().Add(writeWait))
            if err := client.conn.WriteMessage(websocket.PingMessage, nil); err != nil {
                return
            }
        }
    }
}

The writePump is also responsible for keeping the connection alive by sending ping messages to the client with the interval given in pingPeriod. If the client does not respond with a pong, the connection is closed.

Wiring up the WsServer
The last thing we need to do in our Go application is the creation of the broadcast channel in the WsServer.

type WsServer struct {
    ...
    broadcast  chan []byte
}

func NewWebsocketServer() *WsServer {
    return &WsServer{
        ...
        broadcast:  make(chan []byte),
    }
}

func (server *WsServer) Run() {
    for {
        select {        
        ...
        case message := <-server.broadcast:
            server.broadcastToClients(message)
        }

    }
}

func (server *WsServer) broadcastToClients(message []byte) {
    for client := range server.clients {
        client.send <- message
    }
}

The broadcast channel listens for messages, sent by the client readPump. It in turn pushes this messages in the send channel of all the clients registered.

Step 4: Creating the chat window

In this last step we will create the chat window to send & display the messages!

First update your index.html, add the following between <div id=”app”></div>. This displays each message and provides a textarea to submit new messages.

<div class="container-fluid h-100">
   <div class="row justify-content-center h-100">
     <div class="col-md-8 col-xl-6 chat">
       <div class="card">
         <div class="card-header msg_head">
           <div class="d-flex bd-highlight justify-content-center">
             Chat
           </div>
         </div>
         <div class="card-body msg_card_body">
           <div
                v-for="(message, key) in messages"
                :key="key"
                class="d-flex justify-content-start mb-4"
                >
             <div class="msg_cotainer">
               {{message.message}}
               <span class="msg_time"></span>
             </div>
           </div>
         </div>
         <div class="card-footer">
           <div class="input-group">
             <textarea
                       v-model="newMessage"
                       name=""
                       class="form-control type_msg"
                       placeholder="Type your message..."
                       @keyup.enter.exact="sendMessage"
                       ></textarea>
             <div class="input-group-append">
               <span class="input-group-text send_btn" @click="sendMessage"
                     >></span
                 >
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
</div>

To get some basic styling you can add a style.css in public/assets/. For this example, the following stylesheet is used: https://github.com/jeroendk/....

App.js
Now we make sure the chat window works by finishing the VueJs component. First, add two new data properties (messages & newMessage).

Then add an event listener to the message event on the WebSocket connection. At last add two functions, one for handling the new messages received through the connect (remember there can be multiple messages at once) and the other for sending a message from the textarea.

data: {
      ...
      messages: [],
      newMessage: ""
},

connectToWebsocket() {
  ...
  this.ws.addEventListener('message', (event) => { this.handleNewMessage(event) });
},  

handleNewMessage(event) {
  let data = event.data;
  data = data.split(/\r?\n/);
  for (let i = 0; i < data.length; i++) {
    let msg = JSON.parse(data[i]);
    this.messages.push(msg);
  }   
}

sendMessage() {
  if(this.newMessage !== "") {
    this.ws.send(JSON.stringify({message: this.newMessage}));
    this.newMessage = "";
  }
}

That’s it! You should now be able to send and receive chat messages when you visit your browser a http://localhost:8080.

Working chatbox!

Whats next?
You could ask the user his name before posting then you can display his or her name in the message. You can add any info you like to the message object, passed to the WebSocket.

Also, stay tuned for the follow-up posts planned:

Multi-room & 1 one 1 chats.
Using Redis Pub/Sub for scalability.
Adding authentication and allow users to log-in.

The final source code for this part can be found here:
https://github.com/jeroendk/go-vuejs-chat/tree/v1.0