アジェンダ

①WebSocket通信とは　
②WebSocket通信の実装
③WebSocketの実行結果
④コード解析

1. WebSocket通信とは

　双方向の通信を低コストで実施するための通信規格。SNSやゲームなどで双方向のリアルタイム通信を確立する場合に利用する。
　☆HTTP通信ではダメなのか？？
　　・各リクエスト毎にコネクションを確立する必要があるため、処理速度が遅い。
　　・クライアント→サーバへの方方向の通信であるため、双方向の通信が実現できない。
　　・HTTPヘッダーが長いため、通信するための情報量が多く処理速度が遅い。

通信確立までの流れ。通信確立はHTTP通信のハンドシェイクによって行われ、通信確立後、WebSocket通信に切り替わる流れとなる。

※詳細な規格はRFC6455を参照のこと。

2. WebSocket通信の実装

なにはともあれ、実装して実際に動かして見るのが一番いい方法である。githubに公開されたwebsocket通信を実装する。

ディレクトリ構成

~/develop/coop/webSocketDemo $ tree -I node_modules 
.
├── README.md
├── package.json
├── public
│   ├── index.css
│   ├── index.html
│   └── websocket.js
├── server
│   ├── server.js
│   └── websocket.js
└── yarn.lock

server.ts

const express = require('express')
const app = express()
const expressWs = require('express-ws')
const websocket = require('./websocket')

expressWs(app);

app.use(express.static('public'))
app.use('/websocket', websocket)
app.get('*', (req, res) => {})
app.listen(3000, () => {
  console.log('server is listening on port 3000')
})

websocket.js

const express = require('express');
const expressWs = require('express-ws')
const router = express.Router()
expressWs(router);

router.ws('/test', (ws, req) => {
  ws.send('接続成功')
  console.log('接続成功');
  let interval
  interval = setInterval(() => {
    if (ws.readyState === ws.OPEN) {
      console.log('test')
      ws.send(Math.random().toFixed(2))
      ws.send('test')
    } else {
      clearInterval(interval)
    }
  }, 1000)

  ws.on('message', msg => {
    ws.send(msg)
    console.log(msg)
  })
})

module.exports = router

3. WebSocketの実行結果

①yarn startで実行。
　→この状態では3000番でlisten状態。

②ブラウザで3000番ポートにアクセス。
　→動き始めた。コネクション確立をトリガーに動き始めたことを確認。
　ブラウザ側でも、メッセージが出続ける。

③クライアント(ブラウザ)からメッセージを送信
→「クライアントからのメッセージ」というメッセージでサーバに送信。サーバログにも出力されたことを確認。

④切断
　切断した際に通信が止まり、サーバログの出力も止まった。

4. コード解析

server.jsでlisten状態で待機。フロントでHTTP通信で画面を取得。取得後、WebSocket通信で「ws://127.0.0.1:3000/websocket/test」でサーバにリクエスト。リクエスト後、通信状態が確立。WebSocket通信にて双方向のコミュニケーションが実現される。

参考文献