ホワイトボード
Socket.ioのサイトを見ていたら、デモにホワイトボードもあった。面白そうなのでこちらも設置してみる。
https://socket.io/demos/whiteboard/
https://github.com/socketio/socket.io/tree/master/examples/whiteboard
設置したやつ
https://dalomo.net/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がサブディレクトリになっている都合上、またうまく動いてないので色々書き換える。が、どこを変えたのかまとめるのがめんどいので
こちらで差分を表示してスクショ撮った。
/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でデベロッパーツールを使いながら検証するような使い方も知った。
スマホ実機でデベロッパーツールを使う
スマホで使うというよりは、スマホの表示をPCで確認するような感じ。
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?hl=ja
ちょうべんりだった。
参考
https://www.nishishi.com/javascript-tips/location-reload.html
https://qiita.com/TanakaMidnight/items/979cd7f044fb03a12a9d
https://developer.mozilla.org/ja/docs/Web/CSS/overscroll-behavior-y