成果动态图
咱们应用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/url和ws://ashuai.work:6789/url（就最后面的协定变了）
WebSocket利用场景
对于实时性要求比拟高的性能需要，如：
- 聊天室性能
- 实时股票行情性能
- 体育竞赛直播性能
- 最新天气
- 最新消息（订阅公布，小红点未读音讯）
- 多人协同编辑文档（及时更新）
- 监控性能（监控地位、监控相干数据搭配可视化图表）
- 在线客服
根本WebSocket的八股文概念没啥意思，大家可移步到MDN官网文档瞅瞅
这里咱们通过一个例子去学习，高深莫测哎
举个WebSocket理论例子
例子需要
- 可创立WebSocket服务，并敞开之
- 实现客户端能够向服务端发送申请
- 实现服务端能够向客户端推送音讯
- 存储后端推送的每一条音讯
- 类编程，便于前端多个中央复用
- ......
后端用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插件包并生成一个实例appconst 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