OpenTUT

Node.js + WebSocketでピクトチャットをつくる

昨日

Node.js + WebSocketでピクトチャットをつくる

ピクトチャットとは

  • ニンテンドーDSに搭載

  • 複数人でのチャット機能

  • キーボードやフリーハンドでの入力

背景・目的

  • Twitterにはうんざりだ

  • あの頃のやさしいチャット e.g. 押し入れ, 公園の遊具

勉強を兼ねて作ってみよう

環境

  • Ubuntu Desktop 22.04.4 LTS

  • Node.js v10.5.0

    • WebSocket v8.16.0
    • http v0.0.1-security
    • http-server

  • Chrome

手法

  1. Node.jsでhttp-serverをたてる
  2. canvas要素に入力し，画像化
  3. 画像をbase64で文字列にエンコードし，サーバに送信
  4. サーバはBlobオブジェクトで受け取り，Blopを返す
  5. サーバは全クライアントにブロードキャスト
  6. クライアントはBlobを画像にデコードし，表示
  • 3, 4, 5番目の手順をWebSocketでソケット通信

デモンストレーション

  • みせます

  • 後でソース公開します

詰まったところ

  • クライアント側でBlobを画像にデコードできない
    • エンコードした画像をJSON形式で受け渡ししたら直った
    • マジで1文字ずつ見直したけど，それでもやっぱりおかしいところがあったぽい

結論

  • ほとんどネットのチュートリアルのまま

  • 楽しかった