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.")
    }
  }