DEV Community: Anastasiia Kim

Build a Real-Time Chat App with WebSockets

Anastasiia Kim — Mon, 14 Jul 2025 15:51:54 +0000

In this article, I’d like to introduce you to an interesting and practical project that’s great for beginners: building a real-time chat application using WebSockets. This project is a good way to learn how the frontend, backend, and database work together in a web application.

WebSocket is a communications protocol that enables two-way interactive communication between a user's browser and a server. Unlike the traditional HTTP request-response model (where the client must make a request for the server to respond), WebSocket keeps the connection open. This makes it ideal for real-time applications like chat systems, multiplayer games, or live notifications.

Project Overview
Our WebSocket chat project will be divided into three main parts:

Frontend – the interface users interact with
Backend – the server-side logic and WebSocket management
Database – storage for messages and user data

Technologies used
Frontend: Svelte + Vue (you can use your preferred framework)
Backend: Node.js with Express and WebSocket
Database: PostgreSQL (running via Docker Compose)

Our project will have a directory like this:

your_project/
├── src/
│   ├── assets/
│   ├── components/
│   │   └── ChatWidget.vue
│   ├── backend/
│   │   ├── server.js
│   │   └── db.js
│   └── App.vue

Dependecy setup

Before you begin, make sure you have Node.js with Express, Websocket and PostgreSQL. If not, install them using:

npm install express cors ws postgres psql

You can check them in the file package.json.

"dependencies": {
    "psql": "^0.0.1",
    "vue": "^3.5.13",
    "ws": "^8.18.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.3",
    "@vue/tsconfig": "^0.7.0",
    "cors": "^2.8.5",
    "express": "^4.21.2",
    "postgres": "^3.4.5",
    "typescript": "~5.8.3",
    "vite": "^6.3.5",
    "vue-tsc": "^2.2.8"
  }

The npm run dev command only starts the frontend. You’ll also need to run the backend and database separately.

In the file package.json add the next following in the scripts:

  "scripts": {
    "dev": "vite",
    "dev:server": "node src/backend/server.js", // add this line
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },

So now, you can run 3 part of the project in 3 different terminals:

npm run dev
npm run dev:server
docker compose up

Frontend

App.vue is the main component that handles data fetching and websocket connection.

Minimal implemented functionality:

Loads recent messages from the backend on page load
Opens a WebSocket connection to receive and send messages in real time
Scrolls to the bottom when new messages arrive
Displays messages with user avatars and timestamps
Supports multiple usernames

Let’s take a closer look at the script section of App.vue.

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import ChatWidget from './components/ChatWidget.vue'

type Message = {
  id: number
  username: string
  datetime: string
  msgtext: string
}

const socket = ref<WebSocket | null>(null)
const messages = ref<Message[]>([])
const textMessage = ref('')
const username = ref('')
const chatContainer = ref<HTMLElement | null>(null)

// Scroll to the last message
function scrollToBottom() {
  if (chatContainer.value) {
    chatContainer.value.scrollTop = chatContainer.value.scrollHeight
  }
}

// Fetches previous messages from the backend and opens 
// connection to Websocket, handles incoming and outgoing 
// messages
onMounted(async() => {

  try {
    const res = await fetch('http://192.168.1.203:8080/messages')
    const lastMessages = await res.json()

    messages.value = lastMessages.map((m: any) => ({
      id: m.id,
      username: m.username,
      msgtext: m.msgtext,
      datetime: m.datetime
    }))

    nextTick(() => scrollToBottom())
  } catch (err) {
    console.error('failed to fetch messages: ', err)
  };

  socket.value = new WebSocket('wss://192.168.1.203:8080')

  socket.value.addEventListener('open', () => {
    console.log('WebSocket connection established')
  })

  socket.value.addEventListener('message', (event) => {
    try {
      const msg: Message = JSON.parse(event.data)
      messages.value.push(msg)

      nextTick(() => scrollToBottom())
    } catch (err) {
      console.error('Failed to parse message:', err)
    }
  })

  socket.value.addEventListener('close', () => {
    console.log('WebSocket disconnected')
  })
})

// optional selection of users
function selectUser(user: 'Mouse' | 'Bear' | 'unknown') {
  username.value = user
}

function sendMessage() {
  if (!socket.value || socket.value.readyState !== WebSocket.OPEN) return
  if (textMessage.value.trim() === '') return

  const newMessage: Message = {
    username: username.value,
    datetime: new Date().toISOString(),
    msgtext: textMessage.value.trim()
  }

  socket.value.send(JSON.stringify(newMessage))
  textMessage.value = ''
}

</script>

You can design your page however you want, but the main thing is to pass data to the elements attached to it in the template:

<template>
  <div class="headline"><a>Mouse gossip</a></div>
  <div class="phrases"><a>Spill the tea</a></div>

  <div class="chatbox" ref="chatContainer">
    <div class="widgets">
      <ChatWidget 
        v-for="(msg) in messages"
        :key="msg.id" 
        :username="msg.username"
        :msgtext="msg.msgtext" 
        :datetime="msg.datetime" 
      />
    </div>
  </div>

  <div class="textbox">
    <button class="button-bear" @click="selectUser('Bear')">
        <img src="./assets/gossip-bear.png" alt="bear-img"/>
      </button>
      <button class="button-mouse" @click="selectUser('Mouse')">
        <img src="./assets/gossip-mouse.png" alt="mouse-img"/>
      </button>
    <textarea class="usernameInput" v-model="username" />
    <textarea class="textInput" v-model="textMessage" @keyup.enter="sendMessage" maxlength="200"/>
    <button @click="sendMessage">Send</button>
  </div>
</template>

ChatWidget.vue is a component which is responsible for rendering a widget with message, profile image, username and timestamp.

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
      username: string
      msgtext: string
      datetime: string
}>()

const { username, msgtext, datetime } = props

const formattedDatetime = computed(() => {
  return new Date(datetime).toLocaleString() 
})

const getAvatar = (name: string) => {
  if (name === 'Bear') return '/src/assets/gossip-bear.png'
  if (name === 'Mouse') return '/src/assets/gossip-mouse.png'
  return '/src/assets/gossip-hippo.png'
}

</script>

You can style elements to your liking. Change optional names for users or change profile pictures.

Backend

The backend is responsible for:

receiving and storing messages
broadcasting messages to all connected clients
serving past messages in the chat
handling websocket connections

The following code will be in a file in the directory your_project/src/backend/server.js

In this file we will add the backend logic and connection to database.

import express from 'express';
import cors from 'cors';
import sql from './db.js';
import { performance } from 'perf_hooks'
import { WebSocketServer } from 'ws'
import http from 'http'

const app = express();
const router = express.Router();
const clients = new Set();
const server = http.createServer(app)
const wss = new WebSocketServer({ server })

app.use(cors());
app.use(express.json());

// connecting to the database
sql`SELECT 1`.then(() => {
  console.log('Connected to Postgres');
}).catch((err) => {
  console.error('Connection to Postgres failed:', err);
});

// middleware for request timing
router.use( async (req, res, next) => {
    const start = performance.now();
    console.log('Time start: ', start);
    next();
    const end = performance.now();
    console.log('Time end: ', end);
});

// check the server is working
router.get('/', async (req, res) => {
    res.json({message: 'Server is working'});
  });

// get recent messages 
router.get('/messages', async (req, res) => {
  try {
    const msg = await getLastMessages();
    res.json(msg);

  } catch (err) {
    console.error('failed to fetch messages:', err);
  }
});

// starting the server
app.use('/', router)

server.listen(8080, () => {
  console.log('Server running on http://192.168.1.203:8080/');
});

// websocket server
wss.on('connection', function connection(ws) {
  clients.add(ws);
  console.log('Client is connected');

  ws.on('message', async function incoming(data) {
    try {
      const msg = JSON.parse(data);
      console.log('received: %o', msg);

      await insertMessage({
        username: msg.username,
        msgtext: msg.msgtext,
        datetime: msg.datetime
      });

      for (const client of clients) {
        if (client.readyState === WebSocket.OPEN) {
          client.send(JSON.stringify(msg));
        }
      }
    } catch (err) {
      console.error('Error handling message:', err);
    }
  });

  ws.on('close', function () {
    clients.delete(ws);
    console.log('Client is disconnected');
  })
});

// adding messages into the database
async function insertMessage({username, msgtext, datetime}) {
  const msg = await sql`
    insert into messages 
      (username, msgtext, datetime)
    values
      (${username}, ${msgtext}, ${datetime})
    returning id, username, msgtext, datetime`
  return msg;
};

// fetch the last 30 messages
async function getLastMessages() {
  const msg = await sql`
  select id, username, msgtext, datetime
  from messages 
  order by datetime desc
  limit 30`

  return msg.reverse();
};

Database

The database is where we store chat messages so they don't disappear when users refresh the page. For this project, we use PostgreSQL.

Instead of installing PostgreSQL manually, we’ll run it in a Docker container. This method is fast, isolated, and easy to configure, especially for beginners.

It’s a good practice to separate concerns during development. That’s why we’ll create a dedicated file for the database connection. In your_project/src/server/db.js, add the following:

import postgres from 'postgres'

const sql = postgres({
    host : '127.0.0.1',
    port : 5432,
    database: 'yourprojectdb',
    username: 'admin',
    password: 'strong',
});

export default sql

Next, in the root your project, create a docker-compose.yml file:

version: '3.8'
services:
  postgres:
    image: postgres:latest
    restart: unless-stopped
    environment:
      - POSTGRES_USER=admin
      - POSTGRES_PASSWORD=strong
      - POSTGRES_DB=yourprojectdb
    ports:
      - "5432:5432"
    volumes:
      - ./pgdata:/var/lib/postgresql/data

Make sure the postgres configurations in db.js file match those in the docker-compose.yml.
This setup will:

Start a PostgreSQL server using the latest official image
Expose it on port 5432
Set up a database called yourprojectdb with user and password
Persist the data to the local folder ./pgdata so data is not lost when the container stops

With Docker installed and running, launch the container from your project root:

docker compose up

After starting the docker container and backend part, you need to check which containers are launched:

docker ps

You’ll see a list of running containers. Look for the one named like this:

NAMES
your_project-postgres-1

Then you need to enter the container in another terminal

docker exec -ti your_project-postgres-1 bash

After running the previous command you will enter the container with postgres and you will see the next in the terminal:

root@<container-id>:/#

Connect to the database using:

root@<container-id>:/# psql -U admin

You should now see:

admin=#

Now we can create a database for the project:

CREATE DATABASE yourprojectdb

To exit the container just type Ctrl+D

There is another way to enter the container and run database queries. In the file your_project/src/backend/queries.sql write a query:

CREATE TABLE messages (
    id SERIAL PRIMARY KEY, -- id for every message
    username TEXT NOT NULL, -- who sent a message
    datetime TIMESTAMP NOT NULL DEFAULT now(), -- when the message was sent
    msgtext TEXT NOT NULL -- text of the message
);

By this query we create a table in the database.

In the terminal run the next line:

psql --user {username} --password -h localhost -p 5432 -f your_project/src/backend/queries.sql

Also, it's easier way to use VSCode Extension like Database Client to run queries and manipulate the database.

If everything it's fine you can send the link to another PC in the local net and chat with another user.

Links and Resources

First Kubernetes Deployment with Minikube

Anastasiia Kim — Tue, 10 Jun 2025 19:13:34 +0000

In the previous article we discussed how to assemble a docker container and run it. In this article, we will go further and talk about such a thing as Kubernetes.

Kubernetes
Kubernetes is a tool for orchestrating(managing) docker containers. With this tool you can deploy, scale and manage your containerized apps. Kubernetes commonly used in developing and production.

Imagine you have a web application made up of multiple components: a frontend, a backend, and a database. Deploying and managing these parts manually, especially when they need to scale or recover from crashes, can become time-consuming and error-prone. Kubernetes automates this process, ensuring your application stays healthy and performs well.

Manifest
A manifest is a YAML file that describes the desired state of a Kubernetes object—like a Pod, Deployment, or Service. By this way, you give instructions to Kubernetes what to do.

With manifests, you can define:

What containers to run and where
How many replicas of a service to keep
Network policies
Storage needs
and more

In this article, we’ll use Minikube and kubectl (the Kubernetes CLI) to run our first manifest.
Minikube is a tool which lets you run Kubernetes locally.

Preparation
Let's say you've finished your app and want to deploy it using Kubernetes. And before deploying we need to do some steps.

install Minikube (guide)
install kubectl (guide)
write a manifest

First, you need to install Minikube and kubectl. kubectl - the kubernetes command-line(CLI) which allows you to run commands and apply manifests.

When you install Minikube, you need to start it. The command to start Minikube server in terminal:

minikube start

To stop Minikube:

minikube stop

When you successfully start Minikube, you can check all pods across all namespaces:

kubectl get pods -A

To see your current context and namespace you can use this command:

kubectl config get-contexts

If you’re new to Minikube, your default namespace will likely be default.
You also can change Minikube configs in config file. This command allows you to see what configurations are set at current moment:

minikube config view

Create an yaml file in the directory of your project:

apiVersion: apps/v1
kind: Deployment 
metadata:
 namespace: my-namespace
 name: my-app
 labels:
   app.kubernetes.io/name: my-app
spec:
 replicas: 1
 selector:
   matchLabels:
     app.kubernetes.io/name: my-app
 template:
   metadata:
     labels:
       app.kubernetes.io/name: my-app
   spec:
     containers:
       - name: frontend
         image: my-app-image
         ports:
           - name: http
             containerPort: 5173

Breakdown of the manifest:

apiVersion: apps/v1 – Version of the Kubernetes API to use.
kind: Deployment – Specifies that Kubernetes should manage a set of identical Pods.
metadata:
- namespace: my-namespace – Deploys the app to my-namespace. Make sure the namespace exists or create it.
- name: my-app – Name of the deployment.
- labels: – Metadata tags used to group and select resources. These should match selector.matchLabels and template.metadata.labels.
  - app.kubernetes.io/name: my-app – A common label format that makes it easier to manage and discover resources.
spec:
- replicas: 1 – Specifies that one Pod should be running.
- selector: – Tells Kubernetes which Pods are managed by this Deployment.
  - matchLabels:
    - app.kubernetes.io/name: my-app
- template: – The template used to create Pods.
  - metadata:
    - labels:
      - app.kubernetes.io/name: my-app
  - spec:
    - containers: – Defines the container(s) that will run in each Pod.
      - - name: frontend
      - image: my-app-image – Your Docker image. This image should be already built and available locally.
      - ports: – Declares that the container listens on port 5173.
      - - name: http
      - containerPort: 5173 – The internal container port to expose.

Applying
Use kubectl to apply your manifest

kubectl apply -f my-app-manifest.yaml

Kubernetes reads the manifest and creates the necessary objects. You can check if your deployment is running:

kubectl get deployments
kubectl get pods

To access my-app in your browser, you need to expose port:

kubectl expose deployment my-app --type=NodePort --port=5173

Then open it using Minikube:

minikube service my-app

When you done with your working pod in Minikube, you can stop it with the next command:

kubectl scale --replicas=0 deployment/my-app

Essential Dev Environments with Docker Compose

Anastasiia Kim — Fri, 09 May 2025 00:37:04 +0000

At the beginning of my learning path of backend development I ran into problems trying to run a database or external service. The setting up a required environment on a local machine made me frustrated, because of configurations, missing dependencies or mismatched versions.

This is where Docker comes in. Docker is a convenient and fast tool for developing and deployment. It lets you configure and run services in isolated containers. Even if you need to run multiple services at once, Docker Compose makes it easier.

For example:
You’re building an API that uses PostgreSQL, Kafka and Redis. Docker Compose helps you run it fast and smoothly.

You could also use Dockerfile to build and run services. In Dockerfile you add commands and multiple containers. However, using Docker Compose is easier to configure and more human-readable than Dockerfile. Especially In the case of running multiple services, like a backend, database and message broker.

Before running any Docker commands, ensure Docker and Docker Compose are installed on your machine.

PostgreSQL image

Let’s start with a PostgreSQL image.
First, create a docker-compose.yml file in the root folder of your project. There is a basic setup to run the Postgres container.

version: ‘3.8’

services:
 database:     
   image: postgres:latest   
   restart: unless-stopped  
   environment:  
     - POSTGRES_USER=user   
     - POSTGRES_PASSWORD=12345
   ports:   
     - "5432:5432" 
   volumes: 
     - ./pgdata:/var/lib/postgresql/data

In this basic setup we have:

services - A section that declares all containers you want to run.
database - the name of the service. You can put any name you like.
image: postgres:latest - Specifies the Docker image to use (in this case, the latest official PostgreSQL).
restart: unless-stopped - Ensure the container restarts automatically until you stop it manually.
environment - Set environment variables inside the container. Set POSTGRES_USER=user and POSTGRES_PASSWORD=12345. You can add more variables. To avoid hardcoding secrets it’s better to use .env.
ports - container ports. We mapped the ports of the container to host. Before the colon : is the host machine port and the after : is the port of the container. Default port 5432
volumes - Persists data by mapping local directory to the container’s data directory.

This setup gives you a fully functional local PostgreSQL server with persistent storage.

Redis image

Redis container with basic setup:

services:
 redis:
   image: redis:latest
   restart: unless-stopped
   ports:
     - "6379:6379"
   volumes:
     - ./redis-data:/data

Redis can be configured by providing a Redis configuration file redis.conf, but this basic setup is able to start too.

Kafka image

Kafka container with basic setup:

services:
 kafka:
   image: apache/kafka:latest
   ports:
     - "9092:9092"
   environment:
     KAFKA_NODE_ID: 1
     KAFKA_PROCESS_ROLES: broker,controller
     KAFKA_LISTENERS: PLAINTEXT://localhost:9092,CONTROLLER://localhost:9093
     KAFKA_ADVERTISED_LISTENERS: PLAINTEXT://localhost:9092
     KAFKA_CONTROLLER_LISTENER_NAMES: CONTROLLER
     KAFKA_LISTENER_SECURITY_PROTOCOL_MAP: CONTROLLER:PLAINTEXT,PLAINTEXT:PLAINTEXT
     KAFKA_CONTROLLER_QUORUM_VOTERS: 1@localhost:9093
     KAFKA_OFFSETS_TOPIC_REPLICATION_FACTOR: 1
     KAFKA_TRANSACTION_STATE_LOG_REPLICATION_FACTOR: 1
     KAFKA_TRANSACTION_STATE_LOG_MIN_ISR: 1
     KAFKA_GROUP_INITIAL_REBALANCE_DELAY_MS: 0
     KAFKA_NUM_PARTITIONS: 3

Let's take a closer look at the environment variables. In this case we use KRaft mode and single node cluster:

KAFKA_NODE_ID: 1 - ID of this Kafka node
KAFKA_PROCESS_ROLES: broker,controller - Node acts as both message broker and cluster controller
KAFKA_LISTENERS: PLAINTEXT://localhost:9092,CONTROLLER://localhost:9093 - Listener ports for clients and controller
KAFKA_ADVERTISED_LISTENERS: PLAINTEXT://localhost:9092 - How Kafka advertises itself to clients
KAFKA_CONTROLLER_LISTENER_NAMES: CONTROLLER - Designates which listener is used for controller traffic
KAFKA_LISTENER_SECURITY_PROTOCOL_MAP: CONTROLLER:PLAINTEXT,PLAINTEXT:PLAINTEXT - Listener protocols
KAFKA_CONTROLLER_QUORUM_VOTERS: 1@localhost:9093 - Controller quorum (just this node)
KAFKA_OFFSETS_TOPIC_REPLICATION_FACTOR: 1 - Internal topic for consumer offsets
KAFKA_TRANSACTION_STATE_LOG_REPLICATION_FACTOR: 1 - Transaction log replication (single-node safe)
KAFKA_TRANSACTION_STATE_LOG_MIN_ISR: 1 - Minimum in-sync replicas for transactions
KAFKA_GROUP_INITIAL_REBALANCE_DELAY_MS: 0 - Faster consumer group rebalancing
KAFKA_NUM_PARTITIONS: 3 - Default number of partitions for new topics

Running and Managing Services

After saving the docker compose file, open the terminal in the root folder of your project and run the next command to build a docker container.

docker compose build

Then start the container:

docker compose up

You will see logs in the terminal if Docker is built and run successfully.

If you prefer to run a docker container in the background, add flag -d (detached mode) in the command

docker compose up -d

Docker will run in the background and the terminal will not be blocked by logs. To stop the container on the background, use this command:

docker compose down

If you want to see all docker containers which running in the background, use the following command:

docker ps

If you want to make changes to your containers (change port or set more environment variables) you need to:

stop Docker (Ctrl+c),
edit the docker-compose file,
save then restart the containers with:

docker compose up –build

The flag --build applies changes you’ve made.

Logs and Debugging

Even if your docker compose file is perfect, things may go wrong (fail to connect, service crash), the first step is check logs.
When you run docker compose up the terminal shows all logs. But you can check logs of specific service if you run command:

docker compose logs redis

To follow the logs live:

docker compose logs -f redis

If logs are not enough, you can exec into a container and look around manually:

docker exec -it redis sh

And also to see all running and exited containers, run next command:

docker ps -a

If you want to add more environment variables or other settings to your services, usually you can find documentation in Docker Hub. Just input a name of service in the search field and check the documentation section.

Combining Multiple Services

You can define all services in a single docker compose file. Postgres + Kafka + Redis:

 services:
    kafka:
        …
     postgres:  
        … 
    redis:
        …

Final Tips

You always can find more configuration options and examples on Docker Hub
Check each image’s documentation for available environment variables
For complex projects, it’s better practice to use .env for secrets

Links and Resources