ChromeのIsolated Web AppsでTCPソケットをリッスンする

以前紹介したように、ブラウザでTCPソケットを扱う『Direct Sockets API』という仕様があります。

asnokaze.hatenablog.com

前回紹介したときから時間はたち、Isolated Web Appsでの利用に限定されたり、TCPサーバソケットをリッスンできるようになったりしている。

Isolated Web Apps

Isolated Web Appsは、Web技術を用いて作られたアプリケーションを独立した環境で動作させる仕組みです。現在、フラグ付きでChromeを起動することで動作させることが出来ます。
github.com

アプリケーションの例として、Telnetクライアントを動作させる Isolated Web Apps が公開されています。
github.com

Webアプリケーションに署名し、サーバを起動させた、フラグ付きで起動したChromeで動作確認できます（詳しくはリポジトリ参照）

Chromeの起動はこんな感じです。

google-chrome-unstable --enable-features=IsolatedWebApps,IsolatedWebAppDevMode \
                       --install-isolated-web-app-from-url=http://localhost:8080

その後、"chrome://apps/" を開くと該当アプリが確認できます。

Direct Sockets API

Direct Sockets APIはTCPソケットやUDPソケットを操作するAPIを定義しています。現在はIsolated Web Apps環境でのみ動作させることが出来ます。
wicg.github.io

今回、TCPサーバソケットをリッスンできるようになったので軽く動作確認 (現状 reader しか無さそう)。
環境準備は面倒くさいので、上記のIsolated Web Appsを起動しデベロッパーツール経由でスクリプトを実行します。

こんな感じで実行すると、該当ポートでちゃんとリッスンされました。

const socket = new TCPServerSocket("0.0.0.0", {localPort:10083})
const { readable } = await socket.opened;
const reader = readable.getReader();

while (true) {
  debug = await reader.read();
  console.log(debug)
}

(valueがうまく取れなかったけど、、なんかおかしい？)

ひとまず、telnetで適当に文字を打って、wiresharkで見るとちゃんとリッスンしてAckを返せてるところまでは確認できた。