在springboot项目前端遇到websocket无法更新最新数据渲染问题
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Example</title>
</head>
<body>
<!-- 表格一 -->
<table class="table table-bordered">
<thead>
<tr>
<th>公司名称</th>
<th>当前价格</th>
</tr>
</thead>
<tbody id="company-table-body">
</tbody>
</table>
<!-- 表格二 -->
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>买入金额</th>
<th>买入数量</th>
</tr>
</thead>
<tbody id="buy-orders-table-body">
</tbody>
</table>
<!-- 表格三 -->
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>卖出金额</th>
<th>卖出数量</th>
</tr>
</thead>
<tbody id="sell-orders-table-body">
</tbody>
</table>
<script>
// 保存当前数据的变量
let shareCapitalList = [];
let buyOrdersList = [];
let sellOrdersList = [];
const ws = new WebSocket("ws://localhost:8081/websocket");
ws.onopen = function() {
console.log('WebSocket connected');
}
ws.onmessage = function(event) {
console.log(event.data);
if (event.data.startsWith("shareCapitalList:")) {
shareCapitalList = JSON.parse(event.data.substring(17));
renderCompanyTable(shareCapitalList);
} else if (event.data.startsWith("buyOrdersList:")) {
buyOrdersList = JSON.parse(event.data.substring(14));
renderBuyOrdersTable(buyOrdersList);
} else if (event.data.startsWith("sellOrdersList:")) {
sellOrdersList = JSON.parse(event.data.substring(15));
renderSellOrdersTable(sellOrdersList);
}
}
ws.onclose = function() {
console.log('WebSocket disconnected');
}
function renderTableData(data, tbodyId) {
// 获取 tbody 元素
const tbody = document.getElementById(tbodyId);
// 清空之前的数据
tbody.innerHTML = "";
// 生成 HTML 代码
const html = data.map((item) => {
let rowHtml = "";
for (const [key, value] of Object.entries(item)) {
rowHtml += `<td>${value}</td>`;
}
return `<tr>${rowHtml}</tr>`;
}).join("");
// 更新表格数据
tbody.innerHTML = html;
}
function renderCompanyTable(data) {
// 渲染表格一数据
renderTableData(data, "company-table-body");
}
function renderBuyOrdersTable(data) {
// 渲染表格二数据
renderTableData(data, "buy-orders-table-body");
}
function renderSellOrdersTable(data) {
// 渲染表格三数据
renderTableData(data, "sell-orders-table-body");
}
</script>
</body>
</html>
初始化数据可以正常渲染如下图
但是websocket发布了新的数据时，前端无法正常渲染新的数据，还是最初的数据如下图
我想要前端可以正常自动渲染最新的数据
