Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WebSocketでリアルタイム通信 (第13回学生LT資料)

229 views

Published on

第13回学生LT(https://student-lt.connpass.com/event/91539/)で発表したスライドです。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

WebSocketでリアルタイム通信 (第13回学生LT資料)

  1. 1. WebSocketでリアルタイム通信 stmkza (ストーム)
  2. 2. WebSocketとは? • サーバからデータを送る方法 • ブラウザプラグインがいらない • 軽い • HTTP使えるならポート解放などは不要 • サーバもファイアウォールの設定不要
  3. 3. 通信の中身 • HTTPで接続する • Upgrade: WebSocket と Connection: upgrade でプロトコル切り替え • 使うポートは80番ポート(SSLだと443)と、変わらない • ↑にあるようにSSL使えます • 実際の通信を見せようと思ったけれど、うまくできませんでした。。。
  4. 4. 今から話すこと • C++でサーバを実装してみる には時間が足りませんでした。。。。 • 時間がなくなったのは、今週ずっと夜はプライムビデオでアニメ観てたか らです。。。すみません m(_ _)m • さっきのような感じで宣伝?を続ける のもネタが尽きる。。。 • 実際に使う方法を説明することにします。Socket.io使います。 • バーチャル学生LT用に作ったチャットで使っているサーバを紹介します
  5. 5. 普通のページに使ってるもの
  6. 6. Socket.ioで一番基本的な構成 Socket.io
  7. 7. Socket.ioで一番基本的な構成 Socket.io 問題点 そのままだと同一生成元ポリシーに引っかかる サーバの生IPを知らせる必要がある ファイアウォールに引っかかることがある SSL対応するにはnodeでHTTPサーバ建てる必要ある
  8. 8. こうすれば解決する Socket.io
  9. 9. ただし、このままだと うまく動かないので、 nginxの設定を変える
  10. 10. nginxの設定 • Socket.ioが使うのは /socket.io/ • HTTPバージョンを1.1に限定する • Upgradeヘッダを通す • Connectionヘッダに "upgrade"を設定する upstream socketio { server 127.0.0.1:8080; } server { server_name example.com; root /path/to/webroot; listen 80; index index.php; location ^~ /socket.io/ { proxy_pass http://socketio; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } } サンプルはGistにも書きました ln.stmkza.net/socketio
  11. 11. CloudFlareの対応について • 実は結構前(2014年くらい)からWebSocketに対応していたらしいです • Networkから設定できる(デフォルトでON?) サンプルはGistにも書きました ln.stmkza.net/socketio
  12. 12. ご静聴ありがとうございました サンプルはGistにも書きました ln.stmkza.net/socketio
  13. 13. おまけ • GDPR関係の事情でEUからのアクセスを拒否したいときにもCloudFlareが 便利です • Network > IP Geolocation をONにするだけで HTTPヘッダに国コードが入 ってきます。 • これを使ってnginxでアクセス拒否するようにしました
  14. 14. 設定内容 http { map $http_cf_ipcountry $is_eu_access { default no; AT yes; BE yes; BG yes; HR yes; CY yes; CZ yes; DK yes; EE yes; FI yes; FR yes; DE yes; GR yes; HU yes; IE yes; IT yes; LV yes; LT yes; LU yes; MT yes; NL yes; PL yes; PT yes; RO yes; SK yes; SI yes; ES yes; SE yes; } } server { # 略 if($is_eu_access = yes) { return 403; } } ln.stmkza.net/cfeu とても長いので、Gistをご覧ください ↓にURLが書いてあります

×