如何在浏览器中显示大量的websocket消息？

Question

我正在构建一个web应用程序，该应用程序从日志文件中读取任务，并将数据作为websocket消息发送到浏览器。我是usnig Django作为服务器。当我想在浏览器中显示所有消息时，我遇到了问题。由于大量的消息，浏览器没有响应。为了在浏览器中显示消息，我使用.innerhtml。

这是我的代码：

接受消息的函数：

    socket.onmessage = (e) => {
        let consoleOutput = document.getElementById("console-output");
        consoleOutput.innerHTML += e.data + "<br>";
        console.log("message", e);
    };

发送消息的函数：

    def websocket_receive(self, event):
        response = json.loads(event["text"])
        app_name = response.get("app_name")
        path_to_logs_file = f"{pathlib.Path.home()}/logs/{app_name}/file.log"
        process = subprocess.Popen(["tail", "-f", path_to_logs_file],
                                   stdout=subprocess.PIPE,
                                   stderr=subprocess.PIPE,
                                   )
        start_time = datetime.datetime.now()
        while True:
            decoded_line = process.stdout.readline().decode("utf-8")
            if decoded_line == '' and process.poll() is not None:
                self.send({
                    "type": "websocket.close"
                })
                break
            else:
                self.send({
                    "type": "websocket.send",
                    "text": str(decoded_line).strip()
                })

如何加快将数据追加到元素的速度？任何有用的建议我都会感激的。

Answer 1

考虑到您的问题，您似乎希望使用websockets来显示日志。

添加到innerHTML之后，过一段时间就会变得非常低效。

所以您可能要做的是直接访问DOM。

下面是一个示例，它只显示当前的ins ms，并在一段时间后对旧条目进行修剪，以防止内存增长。

​

const cd = document.querySelector("code");

setInterval(() => {
  const txt = document.createTextNode(
    `Current Time in ms: ${Date.now()}\n`);
  cd.appendChild(txt);
  if (cd.childNodes.length > 500) cd.childNodes[0].remove();
}, 10);

body {
  background-color: black;
  color: white;
}
code {
  white-space: pre;
}

<code></code>

​