‌Koa2框架的web前后端访问和WebSocket的前后端通信

Koa2‌：是一个基于 Node.js 的 web 框架，主要用于构建服务器端应用。它提供了路由、中间件、请求处理等 HTTP 相关功能，简化了服务器开发。‌它本身不直接处理 WebSocket 连接，但可以通过插件或集成来支持。
‌WebSocket‌：是一种网络通信协议，运行在传输层（TCP 协议之上），用于在客户端和服务器之间建立持久的双向连接。它支持实时数据传输，如即时通讯、在线游戏等。‌通常通过模块（如 ws）在 Node.js 中实现，可以独立使用，也可以与 Koa2 集成,例如在 Koa2 项目中，可以通过 ws 模块创建 WebSocket 服务，并让它们共用同一个端口。‌

Koa2:node.js的web服务器开发框架。express与koa
后台项目开发步骤
安装：npm init -y 与 npm install koa 
在后端代码文件app.js中分以下3步
1，创建koa对象
const Koa=require('koa')
const app=new Koa()
2，编写响应函数（中间件）
//第一层中间件  next:下一个中间件，下一层中间件是否执行，取决于next这个函数有没有调用。ctx.response.body:响应体返回前端页面，ctx.request.url ：请求信息头
app.use((ctx,next)=>{   
   console.log(ctx.request.url)
   ctx.response.body='hello world'
   console.log('第一层中间件...1')
   next()
   console.log('第一层中间件...2')
})
//第二层中间件
app.use(async (ctx,next)=>{
   console.log('第二层中间件...1')
   const ret = await next()
   console.log(ret)
   console.log('第二层中间件...2')
})
//第三层中间件
app.use((ctx,next)=>{
   console.log('第三层中间件')
   return 'i love the dog'
})
//require() 接收一个中间件函数 respDurationMiddleware, 绑定中间件  
const respDurationMiddleware =  require('./middleware/koa_response_duration')
// 绑定中间件  
app.use(respDurationMiddleware)
  // 设置响应数据的格式和编码方式
  const contentType = 'application/json; charset=utf-8'
  ctx.set('Content-Type', contentType)
  //ctx.response.body = '{"success": true}' 
  //设置响应头，允许跨域访问
  ctx.set("Access-Control-Allow-Origin", "*")
  ctx.set("Access-Control-Allow-Methods", "OPTIONS, GET, PUT, POST, DELETE")
异步函数调用不能通过return返回调用函数的返回值，需要返回一个 Promise对象
// 读取文件的工具方法 file_utils.js 中定义getFileJsonData方法
const fs = require('fs')
module.exports.getFileJsonData = (filePath) => {
return new Promise((resolve, reject) => { 
  fs.readFile(filePath, 'utf-8', (error, data) => {
      if(error) {
        // 读取文件失败
        reject(error)
      } else {
        // 读取文件成功
        resolve(data)
      }
    })
 })
 }
const fileUtils = require('../utils/file_utils')
const ret = await fileUtils.getFileJsonData(filePath)
ctx.response.body = ret //数据赋值给响应体
3，绑定端口号，根据url读取指定目录下的文件内容
app.listen(8888)
node app.js  启动服务端

前端交互
前端axios组件安装 npm install axios 
在main.js中引入axios：import axios from 'axios'
// 请求基准路径的配置
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/'
// 将axios挂载到Vue的原型对象上
// 在别的组件中 this.$http 得到axios对象  $http是自己取得名字
Vue.prototype.$http = axios

Vue页面中获得数据：
// http://127.0.0.1:8888/api/seller
//解构data 赋值给 ret
 const { data: ret } = await this.$http.get('seller')
 将ret赋值给allData
 this.allData = ret

WebSocket:WebSocket 是 HTML5 定义的全双工通信协议，旨在解决 HTTP 协议的局限性（单向请求 - 响应、短连接），实现客户端与服务器的持久化双向通信，服务器端（Node.js + ws 库）。
其核心特点包括：
1，持久连接：通过一次 HTTP 握手建立连接后，保持 TCP 连接不关闭，避免频繁建立连接的开销。
2，全双工通信：连接建立后，客户端和服务器可随时向对方发送数据，无需等待对方响应。
3，轻量协议：数据帧格式简洁，比 HTTP 头部开销更小，适合实时场景（如聊天、实时数据监控、游戏等）。
后端依赖安装 npm install ws，后端代码文件app.js中分以下3步
1 创建对象：
const WebSocket = require('ws')
// 创建WebSocket服务端的对象, 绑定的端口号是9998
const wss = new WebSocket.Server({
  port: 9998
})
2 监听事件：
// 服务端开启了监听
module.exports.listen = () => {
    // 对客户端的连接事件进行监听
    //连接事件：client 代表的是客户端的连接socket对象
    wss.on('connection', client => {
    console.log('有客户端连接成功了...')
    // 对客户端的连接对象进行message事件的监听
    //接收数据事件： msg 由客户端发给服务端的数据
    client.on('message',async msg => {  
             console.log('客户端发送数据给服务端了: ' + msg)  
             
             //3 发送数据： 由服务端往客户端发送数据
             // client.send('hello socket from backend')
          })      
    })
}
node app.js  启动服务端

前端使用
1 创建WebSocket对象 const ws = new WebSocket('ws://localhost:9998')
2 监听事件：
连接成功事件 
ws.onopen = () => {
   console.log('连接服务端成功了')
}
  // 存储回调函数
  callBackMapping = {} 
接收服务端发送来数据事件
ws.onmessage = msg => {
      console.log('从服务端获取到了数据')
      // 真正服务端发送过来的原始数据时在msg中的data字段
      console.log(msg.data)
        // 真正服务端发送过来的原始数据时在msg中的data字段
      // console.log(msg.data)
      const recvData = JSON.parse(msg.data)
      const socketType = recvData.socketType
      // 判断回调函数是否存在
      if (this.callBackMapping[socketType]) {
        const action = recvData.action
        if (action === 'getData') {
          const realData = JSON.parse(recvData.data)
          this.callBackMapping[socketType].call(this, realData)
        } else if (action === 'fullScreen') {
          this.callBackMapping[socketType].call(this, recvData)
        } else if (action === 'themeChange') {
          this.callBackMapping[socketType].call(this, recvData)
        }
      }
}

 // 回调函数的注册，callBack  callBackMapping[trendData]=getData
  registerCallBack (socketType, callBack) {
    this.callBackMapping[socketType] = callBack
  }

  // 取消某一个回调函数
  unRegisterCallBack (socketType) {
    this.callBackMapping[socketType] = null
  }

关闭连接事件
ws.onclose = () => {
      console.log('连接服务端失败')
}
3 发送数据：从前端发送数据到后端
ws.send(JSON.stringify(data))
在main.js中挂载 SocketService对象到Vue的原型对象上
import SocketService from '@/utils/socket_service'
// 对服务端进行websocket的连接
SocketService.Instance.connect()
// 其他的组件  this.$socket  $socket是自己取得名字
Vue.prototype.$socket = SocketService.Instance

Vue页面中的使用
created () {
    // 在组件创建完成之后 进行回调函数的注册
    //socketType: 'trendData' 绑定的回调函数 callBack：this.getData
    this.$socket.registerCallBack('trendData', this.getData)
  },
destroyed () {
    window.removeEventListener('resize', this.screenAdapter)
    // 在组件销毁的时候, 进行回调函数的取消
    this.$socket.unRegisterCallBack('trendData')
  },
mounted () {
    this.initChart()
    // this.getData()
    // 发送数据给服务器, 告诉服务器, 我现在需要数据
    //触发注册的回调函数registerCallBack('trendData', this.getData)，执行ws.onmessage中的this.callBackMapping[socketType].call(this, realData)，即调用Vue页面中的getData (ret)
    this.$socket.send({
      action: 'getData',
      socketType: 'trendData',
      chartName: 'trend',
      value: ''
    })
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
 // ret 就是服务端发送给客户端的图表的数据
getData (ret) {
   //  this.allData  从服务器中获取的所有数据
      this.allData = ret
      console.log(this.allData)
      this.updateChart()
    },