vue+echarts项目十一使用webSocket优化项目各图表组件的改造和流程梳理

后端和 前端入口 准备工作都做完了 接下来就是各个图表组件内部的 逐个修改

各个图表组件修改

1. 进入组件时 this.$socket.registerCallBack注册函数 (可选：trendData,sellerData,mapData,rankData,hotData,stockData) 然后传入自己getData函数
2. 组件挂载到页面上时并 初始化图表之后 调用 this.$socket.send 方法发送数据
3. 组件注销时 卸载 进入组件时注册的函数
4. getData的修改 改为不由自己调用  服务器返回数据时 自行调用

1.  
   created() {
2.  
   // 注册webSocket 函数
3.  
   this.$socket.registerCallBack('rankData',this.getData)
4.  
   },
5.  
   mounted() {
6.  
   // 渲染DOM元素之后 初始化图表实例 请求数据 监听页面尺寸变化
7.  
   this.initChart()
8.  
   // 注释掉直接发送请求数据
9.  
   //this.getData()
10.  
    // 通过 send 方法 向服务器发送数据
11.  
    this.$socket.send({
12.  
    action:'getData',
13.  
    socketType: 'rankData',
14.  
    chartName: 'rank',
15.  
    value:''
16.  
    })
17.  
    window.addEventListener('resize',this.screenAdapter)
18.  
    this.screenAdapter()
19.  
    },
20.  
    // 销毁组件时 注销 webSocket 函数
21.  
    destroyed() {
22.  
    clearInterval(this.timerID)
23.  
    window.removeEventListener('resize',this.screenAdapter)
24.  
    this.$socket.unRegisterCallBack('rankData')
25.  
    },
26.  
     
27.  
    methods:{
28.  
    getData(res){
29.  
    //const {data:res} = await this.$http.get('rank')
30.  
    this.allData = res
31.  
    this.allData.sort((a,b) =>{
32.  
    return b.value - a.value // 从大到小排序
33.  
    })
34.  
    this.updateChart()
35.  
    this.startInterval()
36.  
    },
37.  
    }

逻辑流程梳理

准备工作

前端 src/utils/socket_service.js   并在main.js 引入  挂载到Vue原型上  this.$socket

一、进入组件时挂载 函数

Rank.vue:

    created() {
      // 注册webSocket 函数
      this.$socket.registerCallBack('rankData',this.getData)
    },

 src/utils/socket_service.js

在callBackMapping对象中 注册一个函数 名字为 第一个参数  内容为第二个参数

registerCallBack(socketType,callBack){
  this.callBackMapping[socketType] = callBack
}

 二、组件挂载到DOM上时 使用 this.$scoket.send 方法

    mounted() {
      // 通过 send 方法 向服务器发送数据
      this.$socket.send({
        action:'getData',
        socketType: 'rankData',
        chartName: 'rank',
        value:''
      })
    }

 src/utils/socket_service.js

// 发送数据的方法
send(data){
  // 判断此时此刻有没有连接成功 不成功就一段时间后(越来越久)再次发送
  if (this.connected){
    this.sendRetryCount = 0
    this.ws.send(JSON.stringify(data))
  }else {
    this.sendRetryCount  
    setTimeout(() =>{
      this.send(data)
    },500 * this.sendRetryCount)
  }
}

 后端 service/web_socket_service.js  接收到前端发送数据时的响应：

判断action是不是 getData 是的话就根据 chartName 拼接路径 查找数据 赋值给新增的data 属性

不是getDta 的话就原封不动的将数据转发给每一个处于链接状态的客户端 根据value 变更主图或者 全屏切换   wss.clients 所有客户端的链接

1.  
    
2.  
   // 对客户端的连接对象进行message 事件监听
3.  
   // msg：由客户端发给服务器的数据
4.  
   client.on('message',async msg => {
5.  
   console.log('客户端发送数据给服务端了：' msg)
6.  
   let payload = JSON.parse(msg)
7.  
   const action = payload.action
8.  
   if (action === 'getData'){
9.  
   let filePath = '../data/' payload.chartName '.json'
10.  
    // payload.chartName 六选一 trend seller map rank hot stock
11.  
    filePath = path.join(__dirname,filePath)
12.  
    const ret = await fileUtils.getFileJsonData(filePath)
13.  
    // 根据路径找到 json 数据 传出去
14.  
    payload.data = ret
15.  
    client.send(JSON.stringify(payload))
16.  
    }else {
17.  
    // 不是getDta 的话就原封不动的将数据转发给每一个处于链接状态的客户端 根据value 变更主图或者 全屏切换 wss.clients 所有客户端的链接
18.  
    wss.clients.forEach(client => {
19.  
    client.send(msg)
20.  
    })
21.  
    }
22.  
    // 由服务器往客户端发送数据
23.  
    //client.send('hello socket from 后端')
24.  
    })

发送给前端  前端(src/utils/socket_service.js)监听到发送过来的数据

判断action 类型  调用created 创建的函数  传参  就运行了 getData

如果是主题切换 或者全屏切换 事件就传入其他参数 不需要data

1.  
   // 得到服务器发送过来的数据
2.  
   this.ws.onmessage = msg => {
3.  
   console.log('从服务器获取到了数据')
4.  
   // 真正的服务端发送过来的原始数据在msg中的data字段
5.  
   //console.log(msg.data)
6.  
   const recData = JSON.parse(msg.data)
7.  
   const socketType = recData.socketType
8.  
   // 判断回调函数是否存在
9.  
   if(this.callBackMapping[socketType]){
10.  
    const action = recData.action
11.  
    if (action === 'getData'){
12.  
    const realData = JSON.parse(recData.data)
13.  
    // 在这里才是真正的调用 传参
14.  
    // 不用 .call(this,realData) 没有影响 还是他们的this 指向同一个对象
15.  
    this.callBackMapping[socketType](realData)
16.  
    }else if (action === 'fullScreen'){
17.  
    this.callBackMapping[socketType](recData)
18.  
    }else if (action === 'themeChange'){
19.  
    this.callBackMapping[socketType](recData)
20.  
    }
21.  
    }
22.  
    }

这篇好文章是转载于：学新通技术网