Socket.IOのデモのホワイトボードを設置してみた

スポンサーリンク
スポンサーリンク

ホワイトボード

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

Whiteboard
source code
socketio/socket.io
Realtime application framework (Node.JS server). Contribute to socketio/socket.io development by creating an account on GitHub.
スポンサーリンク

設置したやつ

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でデベロッパーツールを使いながら検証するような使い方も知った。

スポンサーリンク

スマホ実機でデベロッパーツールを使う

スマホで使うというよりは、スマホの表示をPCで確認するような感じ。

chrome://inspect/#devices

Android 端末のリモート デバッグを行う  |  Chrome DevTools  |  Google Developers
Windows、Mac、または Linux コンピュータから Android 端末上のライブ コンテンツのリモート デバッグを行います。

ちょうべんりだった。

スポンサーリンク

参考

再読込ボタンを作る方法 - JavaScript TIPSふぁくとりー
ブラウザの再読込ボタンと同じ効果のあるボタンをJavaScriptで作るには、location.reload();を実行するボタンを作れば良いだけです。reloadメソッドの引数に値trueを指定すると、キャッシュではなくサーバから強制的に再読込してくれるようです。
Android ChromeでPull-to-RefreshをCSSで無効化する。 - Qiita
はじめに Pull-to-Refresh(ページの一番上までいる時にさらに下にスワイプするとリロードされるやつ) を無効にしたいと思い調べた所、JavaScriptつかってごにょごにょすれば出来る記事はあったのですが、 最近はC...
overscroll-behavior-y - CSS: カスケーディングスタイルシート | MDN
overscroll-behavior-y は CSS のプロパティで、スクロール領域の垂直方向の境界に達したときのブラウザーの挙動を設定します。
スマホ向けWebページの検証を行う方法 - Qiita
スマホ向けサイトの表示確認、通信内容確認などの検証を行いたいときのやり方いろいろ。 スマホだけで確認する view-source:を使用する ChromeブラウザやFirefoxで使えるやり方。URLの先頭にview-sou...

コメント

タイトルとURLをコピーしました