如何在每次websocket发送数据时刷新html页面进行更新

Question

我想用偶尔从服务器通过websocket(我使用的是socket.io(传入的数据更新一个简单的html前端。对于每个数据，我想创建一个<p>元素，其中包含关于数据的文本，并将其作为<div>内的子元素附加。然后我想让浏览器自动刷新页面以显示它

当我将数据记录到控制台时，后端正在按原样发送数据。但是，我的前端渲染不正确。数据发送后，浏览器不会刷新，因此不会显示<p>元素。然而，当我手动刷新它时，第一个<p>元素会显示并闪烁得非常快。当数据进入时，它不会显示额外的<p>元素。

这是有问题的前端代码：

<div id="names"></div>
<script src="/socket.io/socket.io.js"></script>
<script>
let socket = io();
let nameDiv = document.getElementById('names');
socket.on('message', data => {
let newName = document.createElement('p');
newName.textContent = data.name;
nameDiv.appendChild(newName);
location.reload();
});
</script>

Answer 1

从代码中删除location.reload((，然后重试。你不需要"；刷新"；为了让DOM反映您所做的更改，事件循环将立即呈现这些更改。