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:

go mod tidy

2. Run the Go server:

go run main.go

The server will start on port 8080.

Frontend Setup

1. Navigate to the frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Start the development server:

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