DEV Community: Almatin Siswanto

How to Create a Read-Only User in PostgreSQL

Almatin Siswanto — Wed, 12 Jun 2024 06:10:14 +0000

Sometimes, we will need read-only access to our database, right? So, we can add a read-only access user using the below commands

But, make sure that you can connect to the database as the admin user. After that, execute this query to your database

-- create readaccess role;
CREATE ROLE readaccess;
-- grant connect to the readaccess role;
GRANT CONNECT ON DATABASE postgres TO readaccess;
-- grant usage to public schema to readaccess role;
GRANT USAGE ON SCHEMA public TO readaccess;
-- grant select to all tables in public schema to readccess role;
GRANT SELECT ON ALL TABLES IN SCHEMA public TO readaccess;
-- create new read only user with password;
CREATE USER ro WITH PASSWORD 'r34d0nly';
-- grant newly created user to readaccess role;
GRANT readaccess TO ro;

That’s it. Now we have the read-only user for our database.

Hopefully, you found this post useful. Happy Coding!

How to resolve Docker Compose Warning WARN[0000] Found orphan containers

Almatin Siswanto — Wed, 12 Jun 2024 04:48:20 +0000

Recently I got the docker compose error:

Warning WARN[0000] Found orphan containers ([container-name]) for this project. If you removed or renamed this service in your compose file, you can run this command with the — remove-orphans flag to clean it up.

when I was trying to deploy more than 1 Postgresql container within my local machine for testing purposes. It was not the Postgresql that had the issue, but rather my docker-compose.yaml file that has the issue. It seems that the issue was because I used the same directory name for both of the Postgresql projects.

Before

services:
  my-postgre:
    container_name: my_postgre
    image: postgres:alpine
    restart: always
    environment:
      POSTGRES_DB: mydb
      POSTGRES_USER: me
      POSTGRES_PASSWORD_FILE: /run/secrets/postgres_password
    volumes:
      - pgdata:/var/lib/postgresql/data
      - ./backup:/home/backup
    secrets:
      - postgres_password
    ports:
      - 5424:5432
    networks:
      - my_network

volumes:
  pgdata:

networks:
  my_network:
    driver: bridge

secrets:
  postgres_password:
    file: ./postgres_password.txt

Based on the documentation here. We can solve the above issue using several ways.

1 Running `docker compose` command with `-p` parameter.

sudo docker compose -p my-project-name up -d

2 Adding the project name in the `docker-compose.yaml` file.

I added the project name to distinguish between the two projects and now both of them running as expected.

After

# adding the project name here
name: my-project-name

services:
  my-postgre:
    container_name: my_postgre
    image: postgres:alpine
    restart: always
    environment:
      POSTGRES_DB: mydb
      POSTGRES_USER: me
      POSTGRES_PASSWORD_FILE: /run/secrets/postgres_password
    volumes:
      - pgdata:/var/lib/postgresql/data
      - ./backup:/home/backup
    secrets:
      - postgres_password
    ports:
      - 5424:5432
    networks:
      - my_network

volumes:
  pgdata:

networks:
  my_network:
    driver: bridge

secrets:
  postgres_password:
    file: ./postgres_password.txt

I know this is not much but hopefully, you found this post useful somehow. Happy coding!

How To Add States Functionality Inside Flutter showDialog() Function

Almatin Siswanto — Wed, 05 Jun 2024 06:07:46 +0000

When I add a CheckBox() widget inside the content of the AlertDialog widget inside of the showDialog() function in the TextButton widget onPressed() function, I found that the checkbox did not rebuild when I click on it.

The checkbox did not rebuild because the showDialog() has its own build context. Even when I am using the StatefulWidget, the checkbox did not response and rebuild as expected when I click on it.

So, I wrap the AlertDialog widget using a StatefulBuilder widget and move the Boolean variable for the checkbox value above it and it solved the checkbox issue.

Here are the steps:

Before

import 'package:flutter/material.dart';

import '../../constants/colors.dart';
import '../../constants/styles.dart';

class DialogSendFeedback extends StatefulWidget {
  const DialogSendFeedback({super.key});

  @override
  State<DialogSendFeedback> createState() => _DialogSendFeedbackState();
}

class _DialogSendFeedbackState extends State<DialogSendFeedback> {
  final TextEditingController feedback = TextEditingController();
  final FocusNode feedbackFocus = FocusNode();

  bool agree = false;

  @override
  void dispose() {
    feedback.dispose();
    feedbackFocus.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextButton.icon(
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                title: const Text('Send the project to Engineers'),
                content: SizedBox(
                  width: 600,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      const Row(
                        children: [
                          Expanded(
                              child: Text(
                            'We are sorry that you encountered some issues. To assist us in investigating the matter, kindly provide the details of the project.',
                            maxLines: 3,
                          ))
                        ],
                      ),
                      const SizedBox(
                        height: 16,
                      ),
                      Expanded(
                        child: Row(
                          children: [
                            Expanded(
                                child: TextFormField(
                              controller: feedback,
                              focusNode: feedbackFocus,
                              autofocus: true,
                              keyboardType: TextInputType.multiline,
                              textInputAction: TextInputAction.newline,
                              maxLines: 100,
                              decoration: const InputDecoration(
                                  alignLabelWithHint: true,
                                  contentPadding: EdgeInsets.all(8),
                                  label: Text('Issue detail'),
                                  hintText:
                                      'Describe the issue as detailed as possible.'),
                            ))
                          ],
                        ),
                      ),
                      const SizedBox(
                        height: 16,
                      ),
                      Row(
                        children: [
                          Checkbox(
                              checkColor: whiteColor,
                              fillColor: WidgetStateProperty.resolveWith(
                                  (states) => darkTealColor),
                              value: agree,
                              onChanged: (bool? value) {
                                setState(() {
                                  agree = value!;
                                });
                              }),
                          const SizedBox(
                            width: 8,
                          ),
                          const Expanded(
                            child: Text(
                              'I agree to send these project details to Schletter Engineering for their investigation.',
                              maxLines: 3,
                            ),
                          )
                        ],
                      )
                    ],
                  ),
                ),
                actions: [
                  TextButton(
                      style: defaultPrimaryButtonStyle,
                      onPressed: () {
                        Navigator.of(context).pop(false);
                      },
                      child: const Text(
                        'Do not send',
                        style: buttonTextWhite,
                      )),
                  TextButton(
                      style: defaultSecondaryButtonStyle,
                      onPressed: agree == true
                          ? () {
                              Navigator.of(context).pop(true);
                            }
                          : null,
                      child: Text(
                        'Send',
                        style: defaultSecondaryButtonTextStyle,
                      ))
                ],
              );
            },
          ).then((value) {
            if (value == true) {
              // make a call to backend API to save the feedback
            }
          });
        },
        icon: const Icon(
          Icons.help_outline_rounded,
          color: whiteColor,
        ),
        label: Text(
          'Ask for help',
          style: defaultPrimaryButtonTextStyle,
        ));
  }
}

After

import 'package:flutter/material.dart';

import '../../constants/colors.dart';
import '../../constants/styles.dart';

class DialogSendFeedback extends StatefulWidget {
  const DialogSendFeedback({super.key});

  @override
  State<DialogSendFeedback> createState() => _DialogSendFeedbackState();
}

class _DialogSendFeedbackState extends State<DialogSendFeedback> {
  final TextEditingController feedback = TextEditingController();
  final FocusNode feedbackFocus = FocusNode();

  @override
  void dispose() {
    feedback.dispose();
    feedbackFocus.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextButton.icon(
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              bool agree = false; // <- here
              return StatefulBuilder( // <- here
                builder: (context, setState) => AlertDialog(
                  title: const Text('Send the project to Engineers'),
                  content: SizedBox(
                    width: 600,
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        const Row(
                          children: [
                            Expanded(
                                child: Text(
                              'We are sorry that you encountered some issues. To assist us in investigating the matter, kindly provide the details of the project.',
                              maxLines: 3,
                            ))
                          ],
                        ),
                        const SizedBox(
                          height: 16,
                        ),
                        Expanded(
                          child: Row(
                            children: [
                              Expanded(
                                  child: TextFormField(
                                controller: feedback,
                                focusNode: feedbackFocus,
                                autofocus: true,
                                keyboardType: TextInputType.multiline,
                                textInputAction: TextInputAction.newline,
                                maxLines: 100,
                                decoration: const InputDecoration(
                                    alignLabelWithHint: true,
                                    contentPadding: EdgeInsets.all(8),
                                    label: Text('Issue detail'),
                                    hintText:
                                        'Describe the issue as detailed as possible.'),
                              ))
                            ],
                          ),
                        ),
                        const SizedBox(
                          height: 16,
                        ),
                        Row(
                          children: [
                            Checkbox(
                                checkColor: whiteColor,
                                fillColor: WidgetStateProperty.resolveWith(
                                    (states) => darkTealColor),
                                value: agree,
                                onChanged: (bool? value) {
                                  setState(() {
                                    agree = value!;
                                  });
                                }),
                            const SizedBox(
                              width: 8,
                            ),
                            const Expanded(
                              child: Text(
                                'I agree to send these project details to Schletter Engineering for their investigation.',
                                maxLines: 3,
                              ),
                            )
                          ],
                        )
                      ],
                    ),
                  ),
                  actions: [
                    TextButton(
                        style: defaultPrimaryButtonStyle,
                        onPressed: () {
                          Navigator.of(context).pop(false);
                        },
                        child: const Text(
                          'Do not send',
                          style: buttonTextWhite,
                        )),
                    TextButton(
                        style: defaultSecondaryButtonStyle,
                        onPressed: agree == true
                            ? () {
                                Navigator.of(context).pop(true);
                              }
                            : null,
                        child: Text(
                          'Send',
                          style: defaultSecondaryButtonTextStyle,
                        ))
                  ],
                ),
              );
            },
          ).then((value) {
            if (value == true) {
              // make a call to backend API to save the feedback
            }
          });
        },
        icon: const Icon(
          Icons.help_outline_rounded,
          color: whiteColor,
        ),
        label: Text(
          'Ask for help',
          style: defaultPrimaryButtonTextStyle,
        ));
  }
}

That’s it. Hopefully you found this post useful. Happy coding!

Add Visual Studio Code to your OSX zsh PATH

Almatin Siswanto — Mon, 03 Jun 2024 15:27:10 +0000

After installing Visual Studio Code, it will not automatically be added to your terminal path, so you will need to add it manually. here is how.

Open your terminal and run this command in your terminal

cat << EOF >> ~/.zprofile
# Add Visual Studio Code (code)
export PATH="\$PATH:/Applications/Visual Studio Code.app/Contents/Resources/app/bin"
EOF

Restart your terminal, and you should now be able to open Visual Studio Code directly from your terminal using this command

% code .
This will open the current folder in your Visual Studio Code. That’s it!

Resources:

Visual Studio Code for Mac

Add DS-U02P Webcam to Debian 12

Almatin Siswanto — Mon, 03 Jun 2024 15:24:20 +0000

So, I reinstalled my personal computer recently with Debian 12 and it runs smoothly and as expected. Then, I try to connect my DS-U02P web camera from Hikvision. I tested it using Cheese but it became unstable and I could not get it to work no matter what.

I also tried several ways to test the webcam and still facing the same issues. Then, I try to find out if there is firmware for the web camera out there. After getting the firmware downloaded. I found the wiki page for Debian 12 to install the firmware.

Based on the document, I need the /usr/local/lib/firmware folder and put my downloaded firmware file (the one with .bin extension) there.

Since I did not have the folder yet, then I needed to create it. After that, I copy the firmware file to that folder and run the below command.

$ sudo update-initramfs -c -k all

After the command is completed. I tested the web camera and it works as expected. To make sure, then I restarted my machine and did the test again. the web camera now worked as expected.

Hopefully, you found this post useful. Cheers!

Install NerdFont (or any fonts) using the command line in Debian (or other Linux)

Almatin Siswanto — Mon, 03 Jun 2024 15:22:04 +0000

I need to install the NerdFonts since I have been installing LazyVim recently. After doing some research, I found that the convenient way to install it was using the command line. Here are the steps.

Go to the NerdFonts website in the download section, then choose the font that you want to install.
Right-click on the download button and Copy the link address menu (depends on what browser you are using, the point is to get the font link)
Open your terminal
Copy this command then update the font link with the link that you just copied.

wget -P ~/.local/share/fonts https://github.com/ryanoasis/nerd-fonts/releases/download/v3.0.2/JetBrainsMono.zip \
&& cd ~/.local/share/fonts \
&& unzip JetBrainsMono.zip \
&& rm JetBrainsMono.zip \
&& fc-cache -fv

And that’s it. It will download and install the fonts for you.

Then, you can reload your LazyVim to see the effect.

I hope you found this post useful. Cheers!

Deploy MongoDB Replica Set on K8s

Almatin Siswanto — Mon, 03 Jun 2024 15:18:23 +0000

So, I set a new k8s cluster on DigitalOcean recently, and I want to share the way I deploy my MongoDB Replica Set on the k8s cluster. Let’s start it.

Storage Class

I use Longhorn instead of the default do-block-storage provided by DigitalOcean as the default. I set up the longhorn using the helm chart. Since I use Rancher to manage my cluster, I install Longhorn from the App menu and choose Longhorn with the default value. super simple!

Cluster IP Service

To create a statefulset, we will need to provide the serviceName so, let’s create a ClusterIP service for our MongoDB. The mongodb-clusterip.yaml file looks like this.

apiVersion: v1
kind: Service
metadata:
  annotations:
    field.cattle.io/description: MongoDB Cluster IP
  name: mongodb-clusterip
  namespace: default
spec:
  ports:
    - name: mongo
      port: 27017
      protocol: TCP
      targetPort: 27017
  selector:
    app: mongodb
  type: ClusterIP

Then execute the kubectl apply command
kubectl apply -f mongodb-clusterip.yaml

Secret

We will save the mongodb root user and mongodb root password in the Secret, so we need to create a new Secret for our MongoDB.

The mongodb-secret.yaml file looks like this

apiVersion: v1
data:
  password: base6StringVersionOfpassword
  user: base6StringVersionOfuser
kind: Secret
metadata:
  name: mongodb-secret
  namespace: default

Then execute the kubectl apply command
kubectl apply -f mongodb-secret.yaml

StatefulSet

Now the last thing that we need to execute is the statefulset for our MongoDB. The mongodb-statefulset.yaml file looks like this

apiVersion: apps/v1
kind: StatefulSet
metadata:
  name: mongodb
  namespace: default
spec:
  replicas: 2
  selector:
    matchLabels:
      app: mongodb
  serviceName: mongodb-clusterip
  template:
    metadata:
      namespace: default
      labels:
        app: mongodb
    spec:
      containers:
        - args:
            - '--dbpath'
            - /data/db
          command:
            - mongod
            - '--bind_ip_all'
            - '--replSet'
            - rs0
          env:
            - name: MONGO_INITDB_ROOT_USERNAME
              valueFrom:
                secretKeyRef:
                  key: user
                  name: mongodb-secret
            - name: MONGO_INITDB_ROOT_PASSWORD
              valueFrom:
                secretKeyRef:
                  key: password
                  name: mongodb-secret
          image: mongo:6.0.11
          imagePullPolicy: IfNotPresent
          name: mongodb-c
          volumeMounts:
            - mountPath: /data/db
              name: mongodb-pvc
  volumeClaimTemplates:
    - apiVersion: v1
      kind: PersistentVolumeClaim
      metadata:
        name: mongodb-pvc
      spec:
        accessModes:
          - ReadWriteOnce
        resources:
          requests:
            storage: 8Gi
        storageClassName: longhorn

Then execute the kubectl apply command
kubectl apply -f mongodb-statefulset.yaml

you can change the replica number with your own. I use 2 here.

After a few minutes, you should see the statefulset created. You can see it in your Rancher or using the kubectl get command.

Let’s make sure that the Mongodb is running using kubectl exec command below.

kubectl --namespace=default exec -ti mongodb-0 -- mongosh
Then you should get the mongosh prompt opened. For the second replica, you can do the same by changing the mongodb-0 with mongodb-1 instead.

Configure Replica Set

To configure MongoDB replica set. First we need to open the mongodb-0 (first pod of the MongoDb) using above command.

Then we use the rs.initiate() command as below

rs.initiate(
 {
  _id: "rs0",
  members: [
   { _id: 0, host: "mongodb-0.mongodb-clusterip.default.svc.cluster.local:27017" },
   { _id: 1, host: "mongodb-1.mongodb-clusterip.default.svc.cluster.local:27017" }
  ]
 }
)

if you notice that the pattern is <pod>.<service>.<namespace>.svc.cluster.local:port

Then try to add some data to the test db using the query
db.test.insertOne({ testFromMaster: "true" })

Now, exit from the master replica and open the mongosh in the secondary replica using the same command

kubectl --namespace=default exec -ti mongodb-1 -- mongosh
You will notice that the prompt is displaying the secondary. To start reading the data changes from the primary replica, we need to run the command

db.getMongo().setReadPref("primaryPreferred")

Then we can test to query the test data that we create before using the query

db.test.find({})

Now, you should see the secondary also has the test data.

That’s it. hopefully, you found this useful. Cheers.

Deploy Go Application using Docker Compose Replicas and Nginx

Almatin Siswanto — Mon, 03 Jun 2024 15:12:19 +0000

Deploying the Go application using docker and docker-compose with Nginx load balancer can be achieved using the below strategy. This is not the only one on how to do the task, but hopefully, you can find this useful.

Project Structure

My Go application project structure looks like this:

/go-app
|-- cmd
|-- internal <-- the app source code
|-- nginx
   |-- nginx.conf
|-- config.json <-- my config file for Viper
|-- docker-compose.yaml
|-- Dockerfile
|-- go.mod
|-- go.sum
|-- main.go

Nginx Configuration

user nginx;
# can handle 1000 concurrent connections
events {
    worker_connections   1000;
}
# forwards http requests
http {
        # http server
        server {
              # listens the requests coming on port 8080
              listen 80;
              access_log  off;
              proxy_request_buffering off;
              proxy_buffering off;
              # / means all the requests have to be forwarded to api service
              location / {
                # resolves the IP of api using Docker internal DNS
                proxy_pass http://rest-api:3000;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
              }
        }
}

Dockerfile

FROM golang:1.22-alpine AS builder

# working directory (/build).
WORKDIR /build

# dependency using go mod.
COPY go.mod go.sum ./
RUN go mod download

# Copy the code
COPY . .

# environment variables for docker image
# and build the server.
ENV CGO_ENABLED=0 GOOS=linux GOARCH=amd64
RUN apk add --no-cache dumb-init
RUN go build -ldflags="-s -w" -o apiserver ./main.go

FROM alpine:latest

# working directory (/build).
WORKDIR /

# Copy the Pre-built binary file from the previous stage.
COPY --from=builder ["/usr/bin/dumb-init", "/usr/bin/dumb-init"]
COPY --from=builder ["/build/apiserver", "/"]
COPY --from=builder ["/build/config.json", "/config.json"]

# Export necessary port.
EXPOSE 3000

ENTRYPOINT ["/usr/bin/dumb-init", "--"]
CMD ["/apiserver"]

Docker Compose

services:
  # service name
  rest-api:
    # Dockerfile location
    build: "."
    # Exposes the port 3000 for internal
    ports:
      - "3000"
    # always restart when the service went down
    restart: always
    # number of replicas
    deploy:
      replicas: 2
  # nginx load balancer
  nginx:
    # latest stable alpine nginx image
    image: nginx:stable-alpine
    # nginx configuration
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
    # start nginx after the service up successfully
    depends_on:
      - rest-api
    # map the nginx port 80 to docker port 3000
    ports:
      - "3000:80"

That’s it, now we can test the docker using docker compose build then continue with docker compose up -d .

Hope this can help someone out there. happy coding!

Deloy SocketIO Server Using Docker and Nginx Load Balancer (+SSL)

Almatin Siswanto — Mon, 03 Jun 2024 15:05:00 +0000

In my last project, I needed to have socket servers that could manage connections for more than 10 thousands of mobile applications. I also needed to make the connection using a secure connection if possible. After digging into some scenarios, I finally can manage the socket server deployment using Docker and Nginx in a single Virtual Private Server.

Here are the steps that I did:

Project Structure

This is how I organize the socket server project

/socket-server
|-- src/
    |-- index.js
    |-- loggers/
|-- .env
|-- .env_one
|-- .env_two
|-- .env_three
|-- .env_four
|-- Dockerfile
|-- docker-compose.yaml
|-- nginx.conf
|-- package.json
|-- yarn.lock

The index.js

import express from "express";
import { createServer } from "http";
import { Redis } from "ioredis";
import { Server } from "socket.io";
import { createAdapter } from "@socket.io/redis-adapter";
import logger from "./logger/winston_logger.js";
import bodyParser from "body-parser";

const app = express();
const http = createServer(app);

const port = process.env.PORT;
const serverName = process.env.SERVER_NAME;
const redisHost = process.env.REDIS_HOST;
const redisPort = process.env.REDIS_PORT;
const socketKey = process.env.SECRET_KEY;

let numConnectedSockets = 0;

const pubClient = new Redis({
  host: redisHost,
  port: redisPort,
  keyPrefix: "myapp",
});
const subClient = pubClient.duplicate();

logger.info(
  `Redis client connected to ${redisHost}:${redisPort} with status: pub: ${pubClient.status} sub: ${subClient.status}`
);

// listen to redis connection status
pubClient.on("connect", () => {
  logger.info("Redis pub client connected!");
});

subClient.on("connect", () => {
  logger.info("Redis sub client connected!");
});

// create socket io server with adapter
// add your other services here
const io = new Server(http, {
  cors: {
    origin: ["http://localhost:3000", "http://localhost:8020"],
    methods: ["GET", "POST"],
  },
  adapter: createAdapter(pubClient, subClient),
});

// express listen to port
http.listen(port, () => {
  logger.info(`Server ${serverName} is running on port ${port}`);
});

// socket io connection
io.on("connection", (socket) => {
  logger.info(`User connected: ${socket.id} to socket server ${serverName}`);

  socket.emit("hi", {
    serverName: serverName,
    msg: `Hello from socket server ${serverName}!`,
  });

  // socket io events
  socket.on("disconnect", () => {
    numConnectedSockets--;
    logger.info(`User disconnected: ${socket.id} from ${serverName}!`);
  });

  socket.on("hello", (msg) => {
    logger.info(`Receive a hello from ${socket.id} with ${msg}`);
    logger.info(`server socket key is ${socketKey}`);
    logger.info(`test socket key vs msg is ${socketKey} vs ${msg}`);
    if (msg) {
      if (msg === socketKey) {
        logger.info(`User ${socket.id} sent the correct key. Welcome!`);
        socket.emit("introduce_yourself", {
          serverName: serverName,
          msg: `Please introduce yourself!`,
        });
      } else {
        socket.disconnect();
      }
    } else {
      socket.disconnect();
    }
  });

  socket.on("introduction", (msg) => {
    logger.info(`Receive a introduction from ${socket.id}`);
    if (msg) {
      const { name, token } = msg;
      if (!name || !token) {
        logger.error(
          `User ${socket.id} did not introduce themselves correctly!. Disconnecting...`
        );

        // disconnect user
        socket.disconnect();
        return;
      }

      logger.info(
        `User ${socket.id} introduced as ${name} with token ${token}`
      );

      // validate name and token
      let isAuthorized = false;
      if (name === "admin" && token === "admin") {
        isAuthorized = true;
        logger.info(`User ${socket.id} is an admin!`);
      }

      if (token === socketKey) {
        logger.info(`User ${socket.id} is an authenticated user!`);
        isAuthorized = true;
      }

      if (isAuthorized === false) {
        logger.error(
          `User ${name} with socket id ${socket.id} is not authorized. Disconnecting...`
        );

        // disconnect user
        socket.disconnect();
        return;
      }

      numConnectedSockets++;
    } else {
      logger.error(
        `Can not get the message from ${socket.id} while introduction. Disconnecting...`
      );

      logger.error({
        msg,
      });

      // disconnect user
      socket.disconnect();
    }
  });

  socket.on("log_event", (data) => {
    socket.broadcast.emit("broadcast_log_event", {
      serverName: serverName,
      msg: data,
    });
  });
});

// error handling
io.on("error", (error) => {
  logger.error(`Error: ${error}`);
});

app.use(bodyParser.json());

// express default route
app.get("/heartbeat", (req, res) => {
  res.sendStatus(200);
});

// base url
app.get("/", (_, res) => {
  winstonLogger.info(`base endpoint called`);
  res.status(200).json({
    error: false,
    msg: "Base endpoint works",
  });
});

app.get("/", (req, res) => {
  res.status(200).json({
    message: `Welcome to socket server ${serverName}`,
    socketConnected: numConnectedSockets,
  });
});

As you may noticed here, we are using the Redis adapter to keep the socket servers synced when we have incoming and upcoming events emitted. You can go to the official documentation here for the Redis adapter.

Nginx Configuration

The nginx configuration goes like this

# Reference: https://www.nginx.com/resources/wiki/start/topics/examples/full/

worker_processes 4;

events {
  worker_connections 1024;
}

http {
  server {
    listen 80;

    location / {
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $host;

      proxy_pass http://nodes;

      # enable WebSockets
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
    }
  }

  upstream nodes {
    # enable sticky session with either "hash" (uses the complete IP address)
    hash $remote_addr consistent;
    # or "ip_hash" (uses the first three octets of the client IPv4 address, or the entire IPv6 address)
    # ip_hash;
    # or "sticky" (needs commercial subscription)
    # sticky cookie srv_id expires=1h domain=.example.com path=/;

    server server-one:3000;
    server server-two:3000;
    server server-three:3000;
    server server-four:3000;
  }
}

Dockerfile

# Use the official Node.js 21 image as the base image
FROM node:21-alpine

# Set the working directory inside the container
WORKDIR /app

# Copy package.json and package-lock.json to the working directory
COPY package*.json ./

# Install the app dependencies
RUN yarn install --production=true

# Copy the rest of the app source code to the working directory
COPY . .

# Set the non-root user to run the application
USER node

# Expose the port on which the app will run
EXPOSE 3000

# Start the application
CMD node --env-file=.env src/index.js

Docker Compose

services:
  nginx:
    image: nginx:alpine
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf:ro
    links:
      - server-one
      - server-two
      - server-three
      - server-four
    ports:
      - "3002:80"

  server-one:
    build: .
    expose:
      - "3000"
    env_file:
      - .env_one
    restart: always

  server-two:
    build: .
    expose:
      - "3000"
    env_file:
      - .env_two
    restart: always

  server-three:
    build: .
    expose:
      - "3000"
    env_file:
      - .env_three
    restart: always

  server-four:
    build: .
    expose:
      - "3000"
    env_file:
      - .env_four
    restart: always

Nice, then we can start deploying the server using the command docker compose build and following with the command docker compose up -d .

Host Machine Nginx + Letsencrypt

To be able to use the wss://mydomain for the socket URL when the socket client wants to connect to the server, we can set up the SSL using Letsencrypt in the host machine. I will write about this in a separate post.

After completing the SSL setup, then we can add this block of configuration in the nginx configuration inside the server { block. Usually at /etc/nginx/sites-available/default file.

location /socket.io/ {
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   proxy_set_header Host $host;

   # the port of the nginx in docker compose
   proxy_pass http://localhost:3002;

   # enable WebSockets
   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade;
   proxy_set_header Connection "upgrade";
}

That’s it, then your socket client will able to connect using the wss://mydomain socket server URL.

If you are using Flutter. There is a socket io client plugin that you can use. Check it out here. Below is the code to connect to the socket server using SSL enabled.

import 'package:socket_io_client/socket_io_client.dart' as io;

// create a new socket instance
socket = io.io(socketServer, {
  'transports': ['websocket'],
  'secure': true,
});

ocket.onConnect((_) {
  debugPrint('get connected to the server $socketServer');
});

socket.onError((error) {
  debugPrint('error: $error');
});

socket.onDisconnect((_) => debugPrint('disconnected from $socketServer'));

I hope you found this post useful. Happy coding!

DEV Community: Almatin Siswanto

How to Create a Read-Only User in PostgreSQL

How to resolve Docker Compose Warning WARN[0000] Found orphan containers

1 Running docker compose command with -p parameter.

2 Adding the project name in the docker-compose.yaml file.

How To Add States Functionality Inside Flutter showDialog() Function

After

Add Visual Studio Code to your OSX zsh PATH

Add DS-U02P Webcam to Debian 12

Install NerdFont (or any fonts) using the command line in Debian (or other Linux)

Deploy MongoDB Replica Set on K8s

Storage Class

Cluster IP Service

Secret

StatefulSet

Configure Replica Set

Deploy Go Application using Docker Compose Replicas and Nginx

Project Structure

Nginx Configuration

Dockerfile

Docker Compose

Deloy SocketIO Server Using Docker and Nginx Load Balancer (+SSL)

Project Structure

The index.js

Nginx Configuration

Dockerfile

Docker Compose

Host Machine Nginx + Letsencrypt

1 Running `docker compose` command with `-p` parameter.

2 Adding the project name in the `docker-compose.yaml` file.