用虚拟机创建websocket服务通过HTML展示数据

IP不卡 · 发表于 2026-1-2 22:03:51

用法和上一个使用http的一样可以参考这里只贴出代码使用websocket协议进行通信
后端
var websocket = import("websocket")
var http = import("net/http")
var json = import("encoding/json")
var time = import("time")
var fmt = import("fmt")

// 跨域检查函数
func CheckOrigin(r) {
return true
}

// 创建 WebSocket 升级器
var upGrader = new(websocket.Upgrader)
upGrader.CheckOrigin = CheckOrigin

func ResponseData (){

ResponseData = []map[string]interface{}
ResponseData[0] = {"device_id":"设备1","phase_a":GetDeviceData("设备1->A相电流"),"phase_b":GetDeviceData("设备1->B相电流"),"phase_c":GetDeviceData("设备1->C相电流"),"time":time.Now().Format("2006-01-02 15:04:05")}
ResponseData[1] = {"device_id":"设备2","phase_a":GetDeviceData("设备2->A相电流"),"phase_b":GetDeviceData("设备2->B相电流"),"phase_c":GetDeviceData("设备2->C相电流"),"time":time.Now().Format("2006-01-02 15:04:05")}

responseJsonData,err = json.Marshal(ResponseData)
return  responseJsonData
}

// WebSocket 连接处理
http.HandleFunc("/ws/three-phase-current", func(w, r) {
// 升级 HTTP 连接为 WebSocket
conn, err = upGrader.Upgrade(w, r, nil)
if err != nil {
      fmt.Println("WebSocket 连接失败:", err)
      return
}
fmt.Println("客户端已连接",conn.RemoteAddr())

// 1秒循环推送数据
for {
      // 推送数据到客户端
      err = conn.WriteMessage(1, ResponseData())
      if err != nil {
         fmt.Println("客户端断开连接:", err)
         conn.Close()
         break
      }
      // 1秒延迟
      time.Sleep(time.Second * 1)
}
})

// 启动服务
fmt.Println("WebSocket 服务器启动，端口 8099")
http.ListenAndServe(":7001", nil)

前端
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>设备三相电流实时监控</title>
<style>
      body { font-family: Arial, sans-serif; margin: 20px; }
      h1 { color: #333; text-align: center; }
      table { width: 80%; margin: 0 auto; border-collapse: collapse; }
      th, td { padding: 12px; text-align: center; border: 1px solid #ddd; }
      th { background-color: #4CAF50; color: white; }
      tr:nth-child(even) { background-color: #f2f2f2; }
      tr:hover { background-color: #e0f7fa; }
      .timestamp { color: #666; font-size: 14px; text-align: center; margin-top: 10px; }
</style>
</head>
<body>
<h1>设备三相电流实时监控表</h1>
<table id="currentTable">
      <thead>
         <tr>
            <th>设备名称</</th>
            <th>A相电流 (A)</</th>
            <th>B相电流 (A)</</th>
            <th>C相电流 (A)</</th>
         </tr>
      </thead>
      <tbody>
         
      </tbody>
</table>
<div class="timestamp" id="updateTime"></div>

<script>
      // 连接 WebSocket（替换为 ISM 服务器实际 IP）
      const ws = new WebSocket('ws://127.0.0.1:7001/ws/three-phase-current');
      const tableBody = document.querySelector('#currentTable tbody');
      const updateTimeEl = document.querySelector('#updateTime');

      ws.onopen = () => {
         console.log('WebSocket 连接成功，开始接收数据...');
      };

      // 接收数据并更新表格
      ws.onmessage = function(event) {
         const currentData = JSON.parse(event.data);

         tableBody.innerHTML = '';

         currentData.forEach(device => {
            const row = document.createElement('tr');
            row.innerHTML = `
                  <td>${device.device_id}</td>
                  <td>${device.phase_a.toFixed(2)}</td>
                  <td>${device.phase_b.toFixed(2)}</td>
                  <td>${device.phase_c.toFixed(2)}</td>
            `;
            tableBody.appendChild(row);
         });

         const now = new Date();
         updateTimeEl.textContent = `最后更新：${now.toLocaleTimeString()}`;
      };

      ws.onclose = function() {
         console.log('WebSocket 连接关闭，正在尝试重连...');
         // 重连逻辑：3秒后重新建立连接
         setTimeout(() => window.location.reload(), 3000);
      };

      // 连接错误回调
      ws.onerror = function(error) {
         console.error('WebSocket 错误：', error);
      };
</script>
</body>
</html>

		自动登录	找回密码
密码			成为会员

用虚拟机创建websocket服务 通过HTML展示数据

用虚拟机创建websocket服务通过HTML展示数据