54 lines
1.1 KiB
Markdown
Executable File
54 lines
1.1 KiB
Markdown
Executable File
# Real-time Random Number Visualization
|
|
|
|
This application demonstrates real-time data visualization using WebSocket communication between a Go backend and Vue.js frontend.
|
|
|
|
## Project Structure
|
|
|
|
- `main.go` - Go backend server that generates random numbers and sends them via WebSocket
|
|
- `frontend/` - Vue.js frontend with TypeScript that visualizes the data in real-time
|
|
|
|
## Prerequisites
|
|
|
|
- Go 1.21 or later
|
|
- Node.js 16 or later
|
|
- npm or yarn
|
|
|
|
## Backend Setup
|
|
|
|
1. Install Go dependencies:
|
|
```bash
|
|
go mod tidy
|
|
```
|
|
|
|
2. Run the Go server:
|
|
```bash
|
|
go run main.go
|
|
```
|
|
|
|
The server will start on port 8080.
|
|
|
|
## Frontend Setup
|
|
|
|
1. Navigate to the frontend directory:
|
|
```bash
|
|
cd frontend
|
|
```
|
|
|
|
2. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. Start the development server:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
The frontend will be available at http://localhost:3000
|
|
|
|
## Features
|
|
|
|
- Backend generates random numbers between 1 and 100 every second
|
|
- Frontend displays the numbers in a real-time line chart
|
|
- WebSocket connection automatically reconnects if disconnected
|
|
- Chart shows the last 20 data points |