How can I display a large number of websocket messages in a browser?

Question

I work on a project where I am building a web application that reads tasks from a log file and sends data as a websocket message to the browser. I am usnig Django as a server. I have a problem when I want to display all the messages in browser. Due to the large number of messages the browser becaome unresponsive. To display messgegs in browser I am usning .innerhtml .

Here is my code:

Function that accepts a message:

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

Function which sends message:

    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()
                })

How can I speed up appending data to the element? I will appreciate any usefull advice.

Answer 1

Looking at your question it appears your wanting to use websockets to show a log.

Appending to innerHTML constantly becomes very inefficient after a while.

So what you might want to do is accessing the DOM directly..

Below is an example, it simply shows the current time ins ms , and also prunes old entries after a while to prevent memory growing.

 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>