前后端项目中webSocket的使用

后端Koa2中

安装

命令行中输入

npm i ws -S

服务端接收数据字段约定:
在这里插入图片描述
服务端发送数据字段的约定
在这里插入图片描述

创建web_socket_service文件

在后端项目的根目录下创建一个service文件夹,文件夹中 创建web_socket_service.js文件,文件截图及内容如下:
在这里插入图片描述

// 引入socket包
const WebSocket = require('ws')
// 创建WebSocket服务端的对象,绑定的端口是9998
const wss = new WebSocket.Server({
    port: 9998
})
// 服务端开启了监听
module.exports.listen = () => {
    // 对客户端(前端)的事件进行监听
    // client: 代表的是客户端的连接socket对象
    wss.on('connection', client => {
    console.log('有客户端连接成功了...')
    // 对客户端的连接对象进行message事件的监听
    // msg:由客户端发给服务端的数据
    client.on('message', msg => {
        console.log('客户端发送数据给服务端了:' + msg)
    })
    // 由服务端往客户端发送数据
    client.send('hello socket from banked')
})
}

app.js中配置

const WebSocketService = require('./service/web_socket_service')
// 开启服务端的监听,监听客户端的连接
// 当某一一个客户端连接成功之后,就会对这个客户端进行message事件的监听
WebSocketService.listen()

前端vue中

由于websocket是window对象就提供了的,所以在前端不用安装额外的包了。

在src下面的utils中创建socket_service.js文件

在这里插入图片描述

编写socket_service.js文件内容

export default class SocketService {
// 1.定义类socketSservice,并定义成单例设计模式
  /**
   * 单例
   */
  static instance = null
  static get Instance() {
    if (!this.instance) {
      this.instance = new SocketService()
    }
    return this.instance
  }
// 2.定义连接服务器的方法connet
  // 和服务端连接的socket对象
  ws = null
  // 标识是否连接成功
  connected = false
  // 请求数据尝试的次数
  sendRetryCount = 0
  // 重新连接尝试的次数
  connectRetryCount = 0

  // 存储回到函数
  callBackMapping = {}

  // 定义连接服务器的方法,注意将此方法注册到main.js中
  connect() {
    // 连接服务器
    if (!window.WebSocket) return console.log('您的浏览器不支持 WebSocket');

    // this.ws = new WebSocket('ws://localhost:9998')

    // 使用接口地址
    this.ws = new WebSocket('ws://127.0.0.1:9998')

// 3.监听事件onopen onmessage onclose
    // 连接成功的事件
    this.ws.onopen = () => {
      this.connected = true
      this.connectRetryCount = 0
      console.log('连接服务端成功了');
    }

    // 接收到服务端数据
    this.ws.onmessage = (msg) => {
      // 保存接收到的数据
      const recvData = JSON.parse(msg.data)
      // console.log('接收到数据:',recvData);
      // 取出业务模块类型
      const socketType = recvData.socketType
      // 判断回调函数是否存在
      if (this.callBackMapping[socketType]) {
        const action = recvData.action
        if (action === 'getData') {
          // 获取数据  realData真实数据
          const realData = JSON.parse(recvData.data)
          // console.log('真实数据:',realData);
          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)
        }
      }

    }

    // 连接服务端失败
    this.ws.onerror = () => {
      this.connected = false
      console.log('连接服务端失败');
    }

    // 连接已关闭  当连接成功后:服务器关闭
    this.ws.onclose = () => {
      this.connectRetryCount++
      this.connected = false
      console.log('连接已关闭');
      setTimeout(() => {
        this.connect()
      }, this.connectRetryCount * 500);
    }
  }
// 4.存储回调函数 
  /**
   * 注册回调函数
   * @param {socketType} 业务模块类型 
   * @param {*} callback 
   */
  registerCallBack(socketType, callback) {
    this.callBackMapping[socketType] = callback
  }

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

  // 发送数据的方法
  send(data) {
    if (this.connected) {
      this.sendRetryCount = 0
      // 调用 webSocket 身上的send方法
      // console.log('发送请求:',data);
      this.ws.send(JSON.stringify(data))
    } else {// 发送不成功执行else里面的语句
      this.sendRetryCount++
      setTimeout(() => {
        this.send(data)
      }, this.sendRetryCount * 500);
    }

  }
}
// 有两个优化:1.断开重连的机制:服务器关闭之后,前端重复尝试连接,在 this.ws.onclose中。
// 2.重发数据的机制:可能来不及触发connect()方法就触发了send方法,导致导致页面刷新不出来,设置有了connect再调用send方法

将connect方法注册到main.js中,并将SocketService对象挂载到Vue的原型对象上

import SocketService from '@/utils/socket_service'
// 对服务器进行websocket的连接
SocketService.Instance.connect()
// 其他组件使用 this.$socket
Vue.prototype.$socket = SocketService.Instance

回到vue具体的组件中进行调用

开启组件时,注册回调函数

created () {
    // 在组件创建完成后 进行回调函数的注册
    this.$socket.registerCallBack('trendData', this.getData)
  },

组件关闭时,取消回调函数

  destroyed () {
    // 在组件销毁的时候 进行回调函数的取消
    this.$socket.unRegisterCallBack('trendData')
  },

原来获取数据的地方改为发送数据

 // mounted中
 mounted () {
	this.$socket.send({
      action: 'getData',
      socketType: 'trendData',
      chartName: 'trend',
      value: ''
    })
 }
 // 把原来用http请求数据的语句注释掉,同时函数中增加参数ret
 getData (ret) {
      // this.$http.get
      // ret 就是服务端发送给客户端图标的数据
      // const { data: ret } = await this.$http.get('trend')
      this.allData = ret// 对allData进行赋值
      console.log(this.allData)
      this.updataChart()
    },

细节更新中…
若有问题,欢迎评论区交流!!!

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值