|
|
用法和上一个使用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> |
|
发表于 2026-1-2 22:03:51