workman服务端开发模式-应用开发-vue-element-admin封装websocket

一、用于保存WebSocket实例对象

复制代码
export const WebSocketHandle = undefined

二、外部根据具体登录地址实例化WebSocket,然后回传保存WebSocket

复制代码
export const WebsocketINI = function (websocketinstance) {
  this.WebSocketHandle = websocketinstance
  this.WebSocketHandle.onmessage = OnMessage
}

三、为实例化的WebSocket绑定消息接收事件:同时用于回调外部各个vue页面绑定的消息事件

复制代码
const OnMessage = function(msg) {
  // 1、消息打印
  // console.log('收到消息:', msg)

  // 2、如果外部回调函数未绑定 结束操作
  if (!WebSocket.WebSocketOnMsgEvent_CallBack) {
    console.log(WebSocket.WebSocketOnMsgEvent_CallBack)
    return
  }

  // 3、调用外部函数
  WebSocket.WebSocketOnMsgEvent_CallBack(msg)
}

四、全局存放外部页面绑定onmessage消息回调函数:注意使用的是var

复制代码
export const WebSocketOnMsgEvent_CallBack = undefined

五、外部通过此绑定方法 来传入的onmessage消息回调函数

复制代码
export const WebSocketBandMsgReceivedEvent = function(receiveevent) {
  WebSocket.WebSocketOnMsgEvent_CallBack = receiveevent
}

六、封装一个直接发送消息的方法:

复制代码
export const Send = function(msg) {
  if (!this.WebSocketHandle || this.WebSocketHandle.readyState !== 1) {
    // 未创建连接 或者连接断开 无法发送消息
    return
  }
  this.WebSocketHandle.send(msg)// 发送消息
}

七、导出配置

复制代码
const WebSocket = {
  WebSocketHandle,
  WebsocketINI,
  WebSocketBandMsgReceivedEvent,
  Send,
  WebSocketOnMsgEvent_CallBack
}

八、全局绑定WebSocket

复制代码
Vue.prototype.$WebSocket = WebSocket

九、总结

复制代码
import Vue from 'vue'

// 1、用于保存WebSocket实例对象
export const WebSocketHandle = undefined

// 2、外部根据具体登录地址实例化WebSocket,然后回传保存WebSocket
export const WebsocketINI = function (websocketinstance) {
  this.WebSocketHandle = websocketinstance
  this.WebSocketHandle.onmessage = OnMessage
}
// 3、为实例化的WebSocket绑定消息接收事件:同时用于回调外部各个vue页面绑定的消息事件
// 主要使用WebSocket.WebSocketOnMsgEvent_CallBack才能访问  this.WebSocketOnMsgEvent_CallBack 无法访问很诡异
const OnMessage = function(msg) {
  // 1、消息打印
  // console.log('收到消息:', msg)

  // 2、如果外部回调函数未绑定 结束操作
  if (!WebSocket.WebSocketOnMsgEvent_CallBack) {
    console.log(WebSocket.WebSocketOnMsgEvent_CallBack)
    return
  }

  // 3、调用外部函数
  WebSocket.WebSocketOnMsgEvent_CallBack(msg)
}

// 4、全局存放外部页面绑定onmessage消息回调函数:注意使用的是var
export const WebSocketOnMsgEvent_CallBack = undefined

// 5、外部通过此绑定方法 来传入的onmessage消息回调函数
export const WebSocketBandMsgReceivedEvent = function(receiveevent) {
  WebSocket.WebSocketOnMsgEvent_CallBack = receiveevent
}

// 6、封装一个直接发送消息的方法:
export const Send = function(msg) {
  if (!this.WebSocketHandle || this.WebSocketHandle.readyState !== 1) {
    // 未创建连接 或者连接断开 无法发送消息
    return
  }
  this.WebSocketHandle.send(msg)// 发送消息
}

// 7、导出配置
const WebSocket = {
  WebSocketHandle,
  WebsocketINI,
  WebSocketBandMsgReceivedEvent,
  Send,
  WebSocketOnMsgEvent_CallBack
}

// 8、全局绑定WebSocket
Vue.prototype.$WebSocket = WebSocket
相关推荐
ACRELKY7 小时前
光伏运维迎来云端革命!AcrelCloud-1200如何破解分布式光伏四大痛点?
运维·分布式
朝阳58111 小时前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust
子非鱼@Itfuture11 小时前
【Kafka】Kafka使用场景用例&Kafka用例图
分布式·中间件·kafka
kobe_OKOK_12 小时前
rabbitmq 入门知识点
分布式·rabbitmq·ruby
王嘉俊92512 小时前
深入浅出 全面剖析消息队列(Kafka,RabbitMQ,RocketMQ 等)
分布式·kafka·消息队列·rabbitmq·rocketmq
叫我阿柒啊13 小时前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
沧澜sincerely13 小时前
分布式3PC理论
分布式·一致性协议·3pc
掘金-我是哪吒14 小时前
分布式微服务系统架构第169集:1万~10万QPS的查当前订单列表
分布式·微服务·云原生·架构·系统架构
Zhao_yani14 小时前
RabbitMQ相关知识
分布式·rabbitmq
我就是全世界15 小时前
【存储选型终极指南】RustFS vs MinIO:5大维度深度对决,95%技术团队的选择秘密!
开发语言·分布式·rust·存储