乐趣区

关于express:使用expressws启动WebSocket服务实现双向通讯功能

成果动态图

咱们应用 WebSocket 写一个这样的小 demo:

  • 演示网址:http://ashuai.work:8888/#/WebSocket(点击跳转观看成果)
  • 前端代码仓库地址:https://github.com/shuirongshuifu/elementSrcCodeStudy
  • 后端代码仓库地址:https://github.com/shuirongshuifu/express-ws-server

WebSocket 相干常识温习

什么是 WebSocket,解决了什么问题

  • WebSocket 是 html5 推出的新个性,新性能,是一种新的网络通讯协定
  • WebSocket 解决了 http 只能单向申请的缺点(http 只能由客户端向服务端发申请)
  • 应用 WebSocket 协定能够做到,客户端和服务端互相发送音讯
  • http 和 WebSocket 二者长相区别:http://ashuai.work:6789/urlws://ashuai.work:6789/url(就最后面的协定变了)

WebSocket 利用场景

对于实时性要求比拟高的性能需要,如:

  • 聊天室性能
  • 实时股票行情性能
  • 体育竞赛直播性能
  • 最新天气
  • 最新消息(订阅公布,小红点未读音讯)
  • 多人协同编辑文档(及时更新)
  • 监控性能(监控地位、监控相干数据搭配可视化图表)
  • 在线客服

根本 WebSocket 的八股文概念没啥意思,大家可移步到 MDN 官网文档瞅瞅

这里咱们通过一个例子去学习,高深莫测哎

举个 WebSocket 理论例子

例子需要

  1. 可创立 WebSocket 服务,并敞开之
  2. 实现客户端能够向服务端发送申请
  3. 实现服务端能够向客户端推送音讯
  4. 存储后端推送的每一条音讯
  5. 类编程,便于前端多个中央复用
  6. ……

后端用 express-ws 开启 WebSocket 服务

这里咱们应用 npm 上的一个比拟优良的包:express-ws,地址如下:https://www.npmjs.com/package/express-ws/v/5.0.2

当然,前提是咱们须要搭建一个 express 环境,这里咱们不赘述,间接上代码:

代码中,曾经有相干正文啦 …

app.js 文件中应用 express-ws 包注入.ws 接口办法

const express = require('express') // 引入 express 插件包并生成一个实例 app
const app = express()

// 引入 express-ws 的 WebSocket 性能,并混入 app,相当于为 app 实例增加 .ws 办法
const expressWs = require('express-ws')(app) 

const Router = require('./router') // 引入分模块治理的路由
app.use(Router) // 路由分模块
app.listen(10000, (req,res) => { // 在 10000 端口上启动后端服务
    console.log('后端服务端口地址为:  http://localhost:10000');
})

router.js 中应用 route.ws 创立 WebSocket 接口服务

/**
 * route.ws('/url',(ws, req)=>{})
 * 建设 WebSocket 服务,并指定对应接口 url,及相应回调
 * ws 为实例化的对象,req 即为申请
 * 
 * ws.send 办法用来向客户端发送信息
 * ws.on 办法用于监听事件(如监听 message 事件,或监听 close 事件)* */
route.ws('/mySocketUrl', (ws, req) => {// console.log('连贯胜利', ws)

  ws.send('来自服务端推送的音讯')

  ws.on('message', function (msg) {ws.send(` 收到客户端的音讯为:${msg},再返回去 `)
  })

  // 应用定时器不停的向客户端推动音讯
  let timer = setInterval(() => {ws.send(` 服务端定时推送音讯: ${getNowTime()}`)
  }, 1000)

  ws.on('close', function (e) {// console.log('连贯敞开')
    clearInterval(timer)
    timer = null
  })
})

有的道友说,这样看着也不不便,有没有残缺的后端代码啊,我想运行起来,更加直观,不便,那必须有哎

就在,笔者的 GitHub 仓库里呢,地址:https://github.com/shuirongshuifu/express-ws-server

欢送各位道友 御键航行,云游 笔者的仓库

前端应用 class 类编程,不便复用 WebSocket 性能

在写代码之前,咱们要剖析一下性能,以便于设计 class 类

  • 首先,既然是 WebSocket,那必定要指定后端的服务地址在哪里,所以要有 url 这个参数
  • 另外因为咱们应用的是 WebSocket 构造函数,是要实例化进去的,所以须要再定义一个变量 socket 用于存储实例化好的 WebSocket 对象
  • 既然还要存储后端推送的每一条音讯,那就罗唆定义一个数组 messageArr 吧

于是乎,咱们就能够这样写:

class myWebSocket {constructor(url) {
        this.url = url || 'ws://ashuai.work:10000/mySocketUrl' // 指定默认 ws 的地址
        this.socket = null // 实例化的 ws 对象
        this.messageArr = [] // 接管服务端推送的音讯数组}
}

constructor 能够用来接管参数,就像函数接管参数一样

  • 接下来,还须要创立(开启)一个 WebSocket 服务
  • 以及这个 WebSocket 服务须要可能发送音讯
  • 当然了,能创立(开启),也要能敞开

于是乎咱们在 myWebSocket 这个类中增加三个办法,别离是 创立 createFn发送 sendFn敞开 closeFn

class myWebSocket {constructor(url) {......}
    
    createFn() {this.socket = new WebSocket(this.url) // 生成 WebSocket 实例化对象

        // 应用 WebSocket 的原生办法 onopen 去连贯开启
        this.socket.onopen = function (e) {console.log('连贯胜利')
        }
        // 应用 WebSocket 的原生办法 onerror 去兜错一下
        this.socket.onerror = (e) => {console.error('连贯谬误', e)
            this.close()}
        // 应用 WebSocket 的原生办法 onmessage 与服务器关联
        this.socket.onmessage = (wsObj) => {this.messageArr.push(wsObj.data)
        }
    }
    sendFn(msg) {
        // 应用 WebSocket 的原生办法 send 去发消息
        this.socket.send(msg)
    }
    closeFn() {
        // 应用 WebSocket 的原生办法 close 去敞开曾经开启的 WebSocket 服务
        this.socket.close() 
        this.socket = null // 回归默认值
        this.messageArr = [] // 清空音讯数组}
}

这里的代码,还须要去做一些边界管制,再加一些判断即可

如果要应用的话,间接 new 一个 myWebSocket 即可(其实就是应用类编程的思维,给 WebSocket 再套一层壳子,封装思维)

应用的代码:

<template>
  <div class="wsBox">
    <el-button
      size="mini"
      class="wsOpen"
      type="success"
      icon="el-icon-check"
      @click="openopen"
      > 开启 WebSocket</el-button
    >
    <el-button
      size="mini"
      class="clientSend"
      type="primary"
      icon="el-icon-s-promotion"
      @click="sendsend"
      > 客户端发送音讯 </el-button
    >
    <el-button
      size="mini"
      class="closeWs"
      type="danger"
      icon="el-icon-close"
      @click="closeclose"
      > 敞开 WebSocket</el-button
    >
    <el-button
      size="mini"
      class="serverMsgs"
      type="info"
      icon="el-icon-chat-dot-round"
      @click="showMsgs"
      > 服务端推送的音讯数组 </el-button
    >
    
    <h3 v-for="(item, index) in msgs" :key="index">{{item}}</h3>
  </div>
</template>

<script>
import myWebSocket from "@/class/ws";
export default {
  name: "wsRouteName",
  data() {
    return {myWs: null,};
  },
  created() {this.myWs = new myWebSocket();
  },
  computed: {msgs() {return this.myWs.messageArr.slice(-5);
    },
  },
  methods: {openopen() {this.myWs.createFn();
    },
    closeclose() {this.myWs.closeFn();
    },
    sendsend() {this.myWs.sendFn("111");
    },
    showMsgs() {console.log("myWs.messageArr", this.myWs.messageArr);
    },
  },
  beforeDestroy() {this.myWs.closeFn();
  },
};
</script>

残缺代码在笔者的仓库里哦,欢送各位道友,不吝 star ^_^

  • 演示网址:http://ashuai.work:8888/#/WebSocket(点击跳转观看成果)
  • 前端代码仓库地址:https://github.com/shuirongshuifu/elementSrcCodeStudy
  • 后端代码仓库地址:https://github.com/shuirongshuifu/express-ws-server
退出移动版