实现医学实时温度波形图的WebSocket方案需要以下几个核心组件:
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
// 存储所有连接的客户端
const clients = new Set();
wss.on('connection', (ws) => {
clients.add(ws);
console.log('新的客户端连接');
ws.on('close', () => {
clients.delete(ws);
console.log('客户端断开连接');
});
});
// 模拟数据发送(实际应用中应从医疗设备获取)
setInterval(() => {
const temperatureData = {
timestamp: new Date().getTime(),
value: 36.5 + Math.random() * 2, // 模拟温度波动
patientId: "patient-001"
};
const dataString = JSON.stringify(temperatureData);
// 向所有连接的客户端发送数据
clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(dataString);
}
});
}, 1000); // 每秒发送一次数据
<!DOCTYPE html>
<html>
<head>
<title>实时温度监测</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>患者实时体温监测</h1>
<div style="width: 800px; height: 400px;">
<canvas id="temperatureChart"></canvas>
</div>
<script src="app.js"></script>
</body>
</html>
// 初始化图表
const ctx = document.getElementById('temperatureChart').getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: '体温 (°C)',
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.1)',
tension: 0.1,
data: []
}]
},
options: {
scales: {
x: {
type: 'realtime',
realtime: {
duration: 60000, // 显示60秒的数据
refresh: 1000,
delay: 1000,
onRefresh: chart => {
// 数据更新在WebSocket回调中处理
}
}
},
y: {
min: 35,
max: 40
}
}
}
});
// WebSocket连接
const ws = new WebSocket('ws://localhost:8080');
// 存储最近的数据点
const maxDataPoints = 60; // 保留60个数据点
const temperatureData = [];
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
// 添加新数据点
temperatureData.push({
x: data.timestamp,
y: data.value
});
// 限制数据点数量
if (temperatureData.length > maxDataPoints) {
temperatureData.shift();
}
// 更新图表
chart.data.datasets[0].data = temperatureData;
chart.update('quiet');
};
ws.onerror = (error) => {
console.error('WebSocket错误:', error);
};
ws.onclose = () => {
console.log('WebSocket连接关闭');
};
建议使用JSON格式传输数据:
{
"timestamp": 1625097600000,
"value": 36.8,
"patientId": "patient-001",
"deviceId": "thermo-001",
"unit": "°C"
}
安全性:
性能优化:
容错处理:
医疗合规性:
替代图表库:
替代通信协议:
全栈框架:
这个方案提供了从后端到前端的完整实现思路,您可以根据具体需求进行调整和扩展。