Vue with WebSockets

This is a simple project that demonstrates how to use WebSockets with a Vue.js frontend and a Node.js backend.

Runnin application

The application can be run using Docker and Docker Compose.

Prerequisites

• Docker
• Docker Compose

Running the application

To run the application, you can use the following command:

docker-compose -f development.yml up --build -d

This will build and start the frontend, backend, and caddy services in detached mode.

To stop the application, you can use the following command:

docker-compose -f development.yml down

Task completions

Every task was completed successfully

• Node.js server that hosts web socket server
  • Every 10 seconds, generates random number
  • That is in 0 - 100 range, and doesn't go beyond ±30% range of previous number
  • Each entry has timestamp
  • Saves history of numbers in a json file (max 15 entries)
  • Publishes each new entry to web socket clients
  • Creates history file if it doesn't exist
  • Restores history from history file if it exists
  • Has helper class, that simplifies process of saving and restoring history data
  • Sends complete history to newly connected clients
• Vue.js frontend application, that connects to web socket, and displays data in real time with line chart
  • Connects to web socket server
  • Retrieves data, and displays it in line graph
  • In line graph, x axis is timestamp, and y axis is the received number
  • Each time when new data is received, it is added to the graph
  • In graph, there cannot be more that 15 data points
  • When history data is loaded, it is added to the graph upon web socket connection
  • Last update timestamp is displayed above the graph
  • Current connection status (connected/disconnected) is displayed above the graph
  • Automatic reconnection every 5 seconds, when websocket is disconnected

Project Structure

.
├── backend             # Contains backend server project
├── caddy               # Contains caddy configuration for docker
├── development.yml     # Development docker-compose file
├── Dockerfile.backend  # Docker backend build file
├── Dockerfile.frontend # Docker frontend build file
├── frontend            # Contains frontend project
├── README.md
└── scripts             # Contains scripts for building and running the application (docker)

Honorable mention

Made with love by Leons <3