便利ページ：Web Serial APIでCOMポート出力のコンソールを作る

「便利ページ：Javascriptでちょっとした便利な機能を作ってみた」のシリーズものです。

ESP32を使っていると、COMポートの出力を手早く確認したいときが多いです。
もちろん、Visual Studio Code＋PlatformIOのSerial Monitorを使うのもありですが、Visual Studio Codeを立ち上げていないときにも、COMポート出力を確認したい場合がありました。
一方で、Web Serial APIというJavascriptでCOMポートを読み書きできる便利な機能があるので、使わない手はないです。

mdn：Web Serial API

ソースコードもろもろは以下のGitHubに上げてあります。

poruruba/utilities

手っ取り早く使いたい場合は、以下にアクセスして、ユーティリティからシリアルを選択してください。

ポートオープン

以下を呼び出します。このJavascriptがあるページはHTTPSである必要があります。また、ボタン押下などユーザジェスチャを契機とする必要があります。

js/comp/comp_serial.js

        var port = await navigator.serial.requestPort();
        await port.open({ baudRate: this.baud });

連続受信処理

受信は以下のようにします。valueに受信データがバイト配列で格納されています。
doneがある場合は、切断など、これ以上受信できないため中断しています。

js/comp/comp_serial.js

            this.reader = this.port.readable.getReader();
            return new Promise(async (resolve, reject) =>{
                do{
                    try{
                        var { value, done } = await this.reader.read();
                        if( done ){
                            this.console_text += '[[read done detected]]\n';
                            this.connected = false;
                            return reject("read done detected");
                        }
                        this.data_process(value);
                    }catch(error){
                        console.log(error);
                        this.connected = false;
                        return reject(error);
                    }
                }while(true);
            })
            .catch(error =>{
                console.log(error);
            });

今回は以降の処理で受信したデータをそのままHTMLのテキストエリアに出力しています。ただし、受信データはバイト配列であるため、文字列に変換します。ちょっと条件分岐がありますが、これはテキストエリアの最後に出力した
後に、自動的にスクロールバーを最後に移動させるためのものです。

js/comp/comp_serial.js

    const decoder = new TextDecoder("utf-8");

    data_process: function(value){
        this.console_text += decoder.decode(value);
        if( this.auto_scroll ){
          const el = document.getElementById('el');
          el.scrollTo(0, el.scrollHeight);
        }
    },

以上