vue-with-websockets/README.md

# 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:

```bash
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:

```bash
docker-compose -f development.yml down
```

## Task completions

### Every task was completed successfully

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