エンドツーエンド暗号化でお絵かき/手書きチャット - Piping Server経由
https://youtu.be/fgpuPEXaiuk
アプリケーション
GitHubリポジトリ
https://gh-card.dev/repos/nwtgck/piping-draw-web.svg https://github.com/nwtgck/piping-draw-web
特徴
双方向の手書き
エンドツーエンド暗号化 (AES GCM)
楕円曲線ディフィー・ヘルマン鍵共有
Progressive Web App (PWA)
Piping Server経由
touchするようなスマホ・タブレットデバイス対応
作る経緯
iPad mini 5を買ってApple Pencilが使えるようになった。結構書きやすい。
書いたほうが伝えやすいこともよくあるので、Pipng Serverでのセキュアに通信する仕組みのproof of conceptとして作りたくなった。
技術的な話
Canvasへの描画
canvasへの描画はステートレスなハンドラーを作っている。
以下が対応するコード。DrawActionに対して、canvasへ描画するようになっている。
通信相手が送ってきたDrawActionも自分のDrawActionもこのハンドラを経由してcanvasへ描画する。DrawActionも静的型付けされていて、リモートも自分も両方共同じ描画ができるようになっている。リモートから来たJSONがDrawActionの型になっているかは、JSONをTypeScriptの型でバリデーションしたい!を利用している。 今後新しいDrawActionができても、このハンドラに処理を追加すれば、自分も通信相手も描画に対応できる。
DrawActionの通信の遅延対策
DrawActionはキューのように貯めて送る。これによって遅延を削減することができた。
DrawAction発生ごとに送って見ると、遅延が結構発生した。そこで、POSTのfetch()が完了してない間は、DrawActionのキューに詰め込んで、次のPOSTのfetch()でまとめて送るように変更した。そうすると、遅延が解消され、最初のデモ動画のように、リモートのPiping Server経由でもほぼほぼ遅延なしでリアルタイムな手書きチャットができるようになった。
locahostのPiping Serverを使えば、キューにして送信しなくても遅延はほぼ発生しなかった。