これまでのあらすじ
スマホのブラウザ上で加速度データを取得してWebSocketでサーバに送りたい！
↓
センサーデータを取得するためにはhttpsじゃないと動かない…
↓
ngrokを使ってhttpsで立てちゃお
↓
クライアント用と通信(wss)用とで2つhttpsが必要になったぞ
ngrokで複数ポートhttpsで立てる
ngrokのサイトにログイン
ngrok - secure introspectable tunnels to localhost
Setup & Installation > 3 Connect your accountをコピペしてターミナルで実行→設定ファイルに認証情報が追記される
さらに手動で設定ファイルを書き換える
各OSにおける設定ファイルの場所はこちら
Default configuration file location _ ngrok – documentation
authtoken: xxxxxxx
tunnels:
client:
addr: 8000
proto: http
wss:
addr: 3000
proto: http
ターミナルから名前を指定してngrokを起動
この場合はclientとwss
ngrok start client wss
8000番ポートと3000番ポートが同時にhttpsで利用できる！やったー
WebSocketでのopen
var sock = new WebSocket('wss://xxxxx.ngrok.io'); // 3000番ポートを利用
// 接続
sock.addEventListener('open', function (e) {
console.log('Socket 接続成功');
});
クライアントは8000番ポートで立ち上げればOK