javascript streamreader 仅在#log-box.append 中显示第二个块

Question

我正在努力学习 JQuery/Javascript 并且有一个使用 chrome“实验性”网络连续剧 API 的网络应用程序。当我输入命令并得到响应时，该字符串在随机位置分成两部分，通常在前三分之一处：

<p0><iDCC-EX V-0.2.1 / MEGA / STANDARD_MOTOR_SHIELD G-9db6d36>

所有其他 return 消息都较短，并且也包含在“<”和“>”括号中。

在下面的代码中。日志 window 只显示第二个块，即使在同时在 devtools 控制台日志中正确显示它的“ChunkTransformer() 例程中也是如此。

如何让我所有的 return 消息显示为一个字符串？只要块显示在日志中，就可以用方括号将块拆分为单独的 return 值。我认为 <p0> 没有显示，因为日志 window 认为它是一个特殊字符。在我包裹在代码标签中之前，它甚至不会显示在这里。所以我认为我至少有两个问题。

async function connectServer() {
        try{         
            port = await navigator.serial.requestPort(); // prompt user to select device connected to a com port
            await port.open({ baudRate: 115200 });         // open the port at the proper supported baud rate

            // create a text encoder output stream and pipe the stream to port.writeable
            const encoder = new TextEncoderStream();
            outputDone = encoder.readable.pipeTo(port.writable);
            outputStream = encoder.writable;
            // send a CTRL-C and turn off the echo
            writeToStream('\x03', 'echo(false);');

            let decoder = new TextDecoderStream();
            inputDone = port.readable.pipeTo(decoder.writable);
            inputStream = decoder.readable
            // test why only getting the second chunk in the log
            .pipeThrough(new TransformStream(new ChunkTransformer()));
            
            // get a reader and start the non-blocking asynchronous read loop to read data from the stream.
            reader = inputStream.getReader();
            readLoop();
            return true;
        } catch (err) {
            console.log("User didn't select a port to connect to")
            return false;
        }
}

async function readLoop() {
    while (true) {
        const { value, done } = await reader.read();
        if (value) {
            displayLog(value);
        }
        if (done) {
            console.log('[readLoop] DONE'+done.toString());
            displayLog('[readLoop] DONE'+done.toString());
            reader.releaseLock();
            break;
        }
    }
}

class ChunkTransformer {
    transform(chunk, controller) {
        displayLog(chunk.toString()); // only shows last chunk!
        console.log('dumping the raw chunk', chunk); // shows all chunks
        controller.enqueue(chunk);
    }
}

function displayLog(data){
    $("#log-box").append("<br>"+data+"<br>");
    $("#log-box").animate({scrollTop: $("#log-box").prop("scrollHeight"), duration: 1}, "fast");
}

Answer 1

第一步：通过以下方式之一修改 displayLog() 函数

使用 Animate：

function displayLog(data){
  $("#log-box").append("<br>"+data+"<br>");
  $("#log-box").animate({scrollTop: $("#log-box").prop("scrollHeight")}, "fast");
}

没有动画：

function displayLog(data){
    $("#log-box").append("<br>"+data+"<br>");
    $("#log-box").scrollTop( $("#log-box").prop("scrollHeight"));
}

或仅供您理解：

function displayLog(data){
    $("#log-box").append("<br>"+data+"<br>");
    scrollHeight =  $("#log-box").prop("scrollHeight");
    $("#log-box").scrollTop(scrollHeight);
}

javascript streamreader 仅在#log-box.append 中显示第二个块

javascript streamreader only displaying second chunk in #log-box.append

javascript

jquery

whatwg-streams-api