koa-websocket 即時通信

WebSocket 是 HTML5 開始提供的一種在單個 TCP 鏈接上進行全雙工通信的協議。

WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，容許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只須要完成一次握手，二者之間就直接能夠建立持久性的鏈接，並進行雙向數據傳輸。

在 WebSocket API 中，瀏覽器和服務器只須要作一個握手的動做，而後，瀏覽器和服務器之間就造成了一條快速通道。二者之間就直接能夠數據互相傳送。

node

const Koa = require('koa')
const Router = require('koa-router')
const websockify = require('koa-websocket')

const app = websockify(new Koa())
const router = new Router()

app.ws.use((ctx, next) => {
  return next(ctx)
})

router.get('/', async ctx => {
  ctx.body = '歡迎'
})

router.all('/websocket/:id', async ctx => {
  let t = setInterval(function() {
    let n = Math.random()
    if(n > 0.3) {
      let msg = JSON.stringify({ 'id': ctx.params.id, 'n': n })
      ctx.websocket.send(msg)
    }
  }, 1000)
  ctx.websocket.on('message', msg => {
    console.log('前端發過來的數據：', msg)
  })
  ctx.websocket.on('close', () => {
    console.log('前端關閉了websocket')
  })
})

app
.ws
.use(router.routes())
.use(router.allowedMethods())

app.listen(3000, () => {
  console.log('koa is listening in 3000')
})
複製代碼

html

handleStart(id) {
    // 判斷瀏覽器是否支持websocket
    var CreateWebSocket = (function () {
      return function (urlValue) {
        if (window.WebSocket) return new WebSocket(urlValue);
        if (window.MozWebSocket) return new MozWebSocket(urlValue);
        return false;
      }
    })()
    // 建立一個websocket
    var webSocket = CreateWebSocket("ws://127.0.0.1:3000/websocket/" + id);
    // 監聽鏈接開啓
    webSocket.onopen = function (evt) {
        // 主動向後臺發送數據
          webSocket.send("前端向後端發送第一條數據")
    }
    // 監聽websocket通信
    webSocket.onmessage = function (evt) {
        // 這是服務端返回的數據
        let res = JSON.parse(evt.data)
        if(res.n > 0.99) {
          // 前端主動關閉鏈接
          webSocket.close()
        }
    }
    // 監聽鏈接關閉
    webSocket.onclose = function (evt) {
        console.log("Connection closed.")
    }
  }
複製代碼