Fiber WebSocket 实时数据推送

目标

使用 Fiber WebSocket 实现服务端定时推送模拟传感器数据（温度/湿度），前端实时折线图展示——典型 IoT/毕设看板场景。

后端代码

package main

import (
	"encoding/json"
	"log"
	"math/rand"
	"sync"
	"time"

	"github.com/gofiber/fiber/v3"
	"github.com/gofiber/contrib/websocket"
)

type SensorData struct {
	Timestamp   int64   `json:"timestamp"`
	Temperature float64 `json:"temperature"`
	Humidity    float64 `json:"humidity"`
}

var (
	clients   = make(map[*websocket.Conn]bool)
	clientsMu sync.RWMutex
)

func main() {
	app := fiber.New()

	app.Static("/", "./public")

	app.Get("/ws", websocket.New(func(c *websocket.Conn) {
		clientsMu.Lock()
		clients[c] = true
		clientsMu.Unlock()
		log.Printf("客户端连接，在线: %d", len(clients))

		for {
			_, _, err := c.ReadMessage()
			if err != nil {
				break
			}
		}

		clientsMu.Lock()
		delete(clients, c)
		clientsMu.Unlock()
		log.Printf("客户端断开，在线: %d", len(clients))
	}))

	go broadcastLoop()
	log.Fatal(app.Listen(":3000"))
}

func broadcastLoop() {
	ticker := time.NewTicker(2 * time.Second)
	defer ticker.Stop()

	for range ticker.C {
		data := SensorData{
			Timestamp:   time.Now().UnixMilli(),
			Temperature: 20 + rand.Float64()*15,
			Humidity:    40 + rand.Float64()*40,
		}
		payload, _ := json.Marshal(data)

		clientsMu.RLock()
		for client := range clients {
			client.WriteMessage(websocket.TextMessage, payload)
		}
		clientsMu.RUnlock()
	}
}

前端页面 (public/index.html)

用 Chart.js 绘制温度/湿度双轴折线图，每 2 秒追加数据点，保留最近 30 个点滚动展示。

关键 JS 逻辑：

• const ws = new WebSocket('ws://' + location.host + '/ws')
• ws.onmessage 接收 JSON 更新 Chart.js 数据和卡片数值
• 双 Y 轴：左侧温度(°C)，右侧湿度(%)

运行步骤

go mod init sensor-dashboard
go get github.com/gofiber/fiber/v3
go get github.com/gofiber/contrib/websocket
mkdir public
# 将 HTML 保存为 public/index.html
go run main.go
# 访问 http://localhost:3000

预期效果

• 页面显示温度/湿度卡片 + 实时折线图
• 数据每 2 秒自动刷新
• 多开浏览器窗口，所有窗口同步收到推送
• 关闭窗口后服务端日志打印断开信息