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

1. WebSocketでリアルタイム通信
stmkza (ストーム)

2. WebSocketとは？
• サーバからデータを送る方法
• ブラウザプラグインがいらない
• 軽い
• HTTP使えるならポート解放などは不要
• サーバもファイアウォールの設定不要

3. 通信の中身
• HTTPで接続する
• Upgrade: WebSocket と Connection: upgrade でプロトコル切り替え
• 使うポートは80番ポート(SSLだと443)と、変わらない
• ↑にあるようにSSL使えます
• 実際の通信を見せようと思ったけれど、うまくできませんでした。。。

4. 今から話すこと
• C++でサーバを実装してみる には時間が足りませんでした。。。。
• 時間がなくなったのは、今週ずっと夜はプライムビデオでアニメ観てたか
らです。。。すみません m(_ _)m
• さっきのような感じで宣伝？を続ける のもネタが尽きる。。。
• 実際に使う方法を説明することにします。Socket.io使います。
• バーチャル学生LT用に作ったチャットで使っているサーバを紹介します

5. 普通のページに使ってるもの

6. Socket.ioで一番基本的な構成
Socket.io

7. Socket.ioで一番基本的な構成
Socket.io
問題点
そのままだと同一生成元ポリシーに引っかかる
サーバの生IPを知らせる必要がある
ファイアウォールに引っかかることがある
SSL対応するにはnodeでHTTPサーバ建てる必要ある

8. こうすれば解決する
Socket.io

9. ただし、このままだと
うまく動かないので、
nginxの設定を変える

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. CloudFlareの対応について
• 実は結構前(2014年くらい)からWebSocketに対応していたらしいです
• Networkから設定できる(デフォルトでON?)
サンプルはGistにも書きました
ln.stmkza.net/socketio

12. ご静聴ありがとうございました
サンプルはGistにも書きました
ln.stmkza.net/socketio

13. おまけ
• GDPR関係の事情でEUからのアクセスを拒否したいときにもCloudFlareが
便利です
• Network > IP Geolocation をONにするだけで HTTPヘッダに国コードが入
ってきます。
• これを使ってnginxでアクセス拒否するようにしました

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が書いてあります