ws

情報科学実験A第1部のスライド担当部分

Transcript

1. 機能拡張:WebSocket (WebScoketはWSと略記します)
2. WSとは •ブラウザとサーバの間でリアルタイムな 双方向通信を行うためのプロトコル •チャットやゲームでよく採用されている •Discord, Mattermost •Slither.io, Krunker.io
3. HTTPとの関係 •Devtoolsで ふつうに見れる • HTTPから プロトコルを 切り替える
4. HTTPとの関係 •Devtoolsで ふつうに見れる • HTTPから プロトコルを 切り替える
5. WSにアップグレードする •GETリクエストをClient •Connection: Upgrade付きのリクエスト がくる GET / HTTP/1.1 Host: 169.254.157.182:10001 Connection: Upgrade Pragma: no-cache Cache-Control: no-cache User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Mobile Safari/537.36 Upgrade: websocket Origin: http://169.254.157.182:10001 Sec-WebSocket-Version: 13
6. WSにアップグレードする •WSハンドシェイク •Sec-Websocket-Keyから Sec-Websocket-Acceptを 作って検証する Request Header Response Header Sec-WebSocket-Accept の計算 1. クライアントから Sec-WebSocket-Key を受け取る 2. その文字列の後ろに、固定のGUIDを連結する 3. 連結した文字列を SHA-1 でハッシュする 4. SHA-1の結果を Base64 エンコードする 5. それを Sec-WebSocket-Accept として返す
7. •WSハンドシェイク •Sec-Websocket-Keyから Sec-Websocket-Acceptを 作って検証する Request Header Response Header WSにアップグレードする
8. •WSハンドシェイク •Sec-Websocket-Keyから Sec-Websocket-Acceptを 作って検証する Request Header Response Header HTTPdaemonは 計算しない WSにアップグレードする
9. HTTPdaemonは何をするんだ WSdaemonがあるのか？ ない
10. HTTPdaemonは何をするんだ WSdaemonがあるのか？ •HTTPサーバとWSサーバの役割は 全然違う •WSはアプリケーション •Connection: Upgrade付きの リクエストが来たらHTTPdaemonは バックエンドにProxyするだけでいい (apache/httpdやnignx/nignxはちゃんとWSフレームを読んで色々やってる)
11. WSのことは WSサーバ(バックエンド)に任せよう •Sec-Websocket-Acceptの計算とか •WSフレームの解析とか •WSのサーバーはNodeとかRailsとかで 簡単に用意する •より詳しく知りたいならMDNの記事を 見るといい↓ https://developer.mozilla.org/ja/docs/Web/API/WebSockets_API/Writing_WebSocket_servers
12. WSのことは WSサーバ(バックエンド)に任せよう •Sec-Websocket-Acceptの計算とか •WSフレームの解析とか •WSのサーバーはNodeとかRailsとかで 簡単に用意する •より詳しく知りたいならMDNの記事を 見るといい↓ https://developer.mozilla.org/ja/docs/Web/API/WebSockets_API/Writing_WebSocket_servers HTTPサーバー の授業だし
13. すること •ヘッダー解析・WebSocketの判定 •リバースプロキシの実装 •Javascript 対応(フロントエンド) •簡易チャットアプリの用意 (バックエンドWSサーバ含む)
14. ヘッダー解析 •ヘッダーを最初の1行だけでなく すべて(\r\n\r\nまで)読む •ヘッダーを1行ずつ見てWebSocketに 必要な値を保存する
15. WebSocketの判定 •メソッドがGET •Upgradeがwebsocket •Connectionにupgradeが含まれる •Sec-WebSocket-Keyが存在する •Sec-WebSocket-Versionが13 →リバースプロキシに分岐
16. リバースプロキシの実装 •exp1_tcp_connectで転送先サーバーに TCP接続する •ブラウザから受け取ったUpgrade リクエストを転送先へそのまま送る •selectで両方のソケットを監視し 受信したデータを反対側へsendする
17. JS対応 •これを足すだけ }else if(pext != NULL && strcmp(pext, ".js") == 0){ strcpy(info->type, "application/javascript"); }
18. 簡易チャットアプリの用意をして…… •動く
19. 注意点 •2048byteの固定長バッファを使ってい るので大きいヘッダーに対応していない •WebSocketが開き続けるので複数接続 に対応しておく必要がある など
20. 将来の展望？ •WebSocketの実装やその他の実装が不 十分で実現することはできなかったが Mattermostのような複雑なWebアプリ をセルフホストできたらいい •というかそもそもPOSTリクエストに 対応していない