websocket简单搭建

1：新建文件夹，用来存储后续代码

mkdir websocket //创建文件名
cd websocket //进入文件名

2：初始化package.json，用来存放项目信息及配置等信息

cnpm init -y

3：下载我们所需要的包；

cnpm i koa -S //koa是下一代Express的下一代基于node.js的web框架
cnpm i koa-router -S //路由导航，实际应用中可以理解为node接口
cnpm i koa-websocket -S //websocket的封装

4：创建一个app.js文件，用来创建接口

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.all('/websocket/:id', async ctx => {
    ctx.websocket.on('message', msg => {
     let t = setInterval(function () {
     let n = new Date()
     if (n > 0.3) {
     let msg = JSON.stringify({ 'id': ctx.params.id, 'n': n})
       console.log(msg)
       ctx.websocket.send(msg)
          }
        }, 1000)
    })
    ctx.websocket.on('close', () => {
        console.log('前端关闭了websocket')
    })
})
app
    .ws
    .use(router.routes())
    .use(router.allowedMethods())
app.listen(3000, () => {
    console.log('启动端口号3000')
})

5：创建完接口，就可以启动我们的服务了

node app

6：前端请求

 function 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://localhost:3000/websocket/" + id);
       // 监听连接开启
       webSocket.onopen = function (evt) {
       // 主动向后台发送数据
        webSocket.send("前端向后端发送数据")
       }
       // 监听websocket通讯
      webSocket.onmessage = function (evt) {
      // 这是服务端返回的数据
        let res = JSON.parse(evt.data)
          console.log(res)
        if (res.n > 0.99) {
        // 前端主动关闭连接
        webSocket.close()
          }
         }
         // 监听连接关闭
         webSocket.onclose = function (evt) {
         console.log("后端关闭连接")
         }
   }