ホワイトボード

Socket.ioのサイトを見ていたら、デモにホワイトボードもあった。面白そうなのでこちらも設置してみる。

Whiteboard | Socket.IO

https://github.com/socketio/socket.io/tree/master/examples/whiteboard

お品書き

設置したやつ
nginxの設定
デモを設置
できあがり
javascriptやcssを編集したのにブラウザで開いても更新されてない
スマホ実機でデベロッパーツールを使う
参考

設置したやつ

Socket.IO whiteboard

少しだけ変えてるので、流れとともにメモっとく。例によって、nginxをフロントに、リバーズプロキシでアクセスを振ってるのでなんかよく分からんくなっとる。

nginxの設定

/etc/nginx/conf.d/reverse_proxy.confに

upstream whiteboard {
  ip_hash;
  server 127.0.0.1:5000;
}
…
server {
…
 location /whiteboard/ {
    proxy_pass http://whiteboard;
    proxy_redirect off;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
…
}

と追記。dalomo.net/whiteboard/へのアクセスをport5000に振る。

デモを設置

/home/dalomo/whiteboardというディレクトリを作りそこにファイルを置く。ディレクトリ内で

$ npm ci

ってやると、package.jsonを基にライブラリをダウンロードしてきてくれる。すごい便利ですね。URLがサブディレクトリになっている都合上、またうまく動いてないので色々書き換える。が、どこを変えたのかまとめるのがめんどいので

difff《ﾃﾞｭﾌﾌ》

こちらで差分を表示してスクショ撮った。

/home/dalomo/whiteboard/index.js

そもそものindex.htmlがサーブされないためapp.useの指定を変えてみた。絶対パスの指定で何故かされなかったのだけれど、サブディレクトリ名の指定だけでできた。なんでかは知らん。

ioをrequireする際にpathを指定した。指定しないと、dalomo.net/socket.ioを探しに行く。そこにはない。

/home/dalomo/whiteboard/public/index.html

色をいっぱい追加した、意味はない…。splitして名前を使ってるみたいだったのでwebcolor16色にしてみた。

クライアントサイドのsocket.ioをクラウドから取得するようにしてる。ここが自分の環境だとどうやればちゃんと配信されるか分かんないんだよね～。

リロード用のボタンをつけてる。画面が描画で一杯になっちゃった時用。canvasをリセットするやり方を検討してないので、使う人いないだろうし負荷とかは気にせず！

/home/dalomo/whiteboard/public/style.css

android使ってるんですが一番上で下にスワイプすると再読み込みになってしまう。Pull-to-Refreshというもので、今回のホワイトボードでは無用なのでなくしたい。なのでbody{overscroll-behavior-y: none;}を追加する。

再読み込み用のボタンがそのままだと色選択の後ろに隠れちゃったので、右下にくるようにしてみた。でもなんかうまく表示されなくて頑張っていい感じになるようにしたけど難しい。CSS難しい！

/home/dalomo/whiteboard/public/main.js

 var socket = io();
↓
 var socket = io.connect("/", {path: "/whiteboard/socket.io"});

としただけ。

できあがり

動いたー。PCでもスマホでも動く。以下余談。

javascriptやcssを編集したのにブラウザで開いても更新されてない

ていうことがあった。スマホの挙動の検証してたところで、なんでか変更しても表示だったり、コードだったりが変わらない。ブラウザのキャッシュを使っているのが原因らしい。ただスーパーリロードしても何故か更新されなかったりしたのでCacheBustingという方法を使って別物と認識させる感じ？で編集後のjsだったりcssだったりを読み込めるようになった。また、その過程で、スマホの表示をPCから接続して、PCのchromeでデベロッパーツールを使いながら検証するような使い方も知った。