封装socket 到vue2.x 使用

vue2.x 使用 socket 数据交互

简单封装 socket

//生成唯一标识符
function getUuid {
  let s = [];
  let hexDigits = "0123456789abcdef";
  for (let i = 0; i < 36; i++) {
    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
  }
  s[14] = "4";
  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
  s[8] = s[13] = s[18] = s[23] = "-";
  return s.join("");
};

class socketClient {
  wsUrl = "";
  wsAuto = {};
  websocket = null;
  constructor(wsUrl, wsAuto) {
    this.wsUrl = wsUrl;
    this.wsAuto = wsAuto;
  }
  // 初始化socket
  initWebSocket() {
    this.websocket = new WebSocket(this.wsUrl);
    console.log("========= create websocket ===========");
    this.wsOpen().then((res) => {
      console.log("========= onopen websocket ===========", res);
      this.wsSend(this.wsAuto);
      console.log("========= 授权完成 ===========");
    });

    this.websocket.onerror = (evt) => {
      console.log("========= 连接错误 ===========", evt);
    };

    this.websocket.onclose = (evt) => {
      console.log("========= 客户端断开连接 ===========", evt);
    };
  }
  // 打开连接
  wsOpen() {
    if (this.websocket) {
      return new Promise((resolve, reject) => {
        try {
          this.websocket.onopen = (evt) => {
            resolve(evt);
          };
        } catch (err) {
          reject(err);
        }
      });
    }
  }
  // 关闭连接
  wsClose() {
    if (this.websocket) {
      this.websocket.close();
      return new Promise((resolve, reject) => {
        try {
          this.websocket.onclose = (evt) => {
            console.log("========= 客户端断开连接 ===========", evt);
            resolve(evt);
          };
        } catch (err) {
          reject(err);
        }
      });
    }
  }
  // 监听消息
  wsMessage(callback) {
    // 需要监听的消息路径
    if (this.websocket) {
      try {
        this.websocket.onmessage = (evt) => {
          // 判断是否有 data 数据
          if (evt.data) {
            let data = evt.data;
            if (this.isJsonString(data)) {
              callback(JSON.parse(data));
            }
          }
        };
      } catch (err) {
        callback(err);
      }
    }
  }
  // 发送消息
  wsSend(options, isFile = false) {
    if (this.websocket) {
      try {
        if (isFile) {
          let params = { ...options };
          params.RequestId = getUuid();
          this.websocket.send(params);
        } else {
          this.websocket.send(JSON.stringify(options));
        }
      } catch (e) {
        console.log('错误', e)
      }
    }
  }
  // 连接因错误而关闭时触发
  wsOnerror() {
    if (this.websocket) {
      return new Promise((resolve, reject) => {
        try {
          this.websocket.onerror = (evt) => {
            resolve(evt);
          };
        } catch (err) {
          reject(err);
        }
      });
    }
  }
  // 判断是否是json字符串
  isJsonString(str) {
    try {
      if (typeof JSON.parse(str) == "object") {
        return true;
      }
    } catch (e) {
      console.log("isJsonString:错误捕获");
    }
    return false;
  }
}

export { socketClient };

在 main.js 上引用

// ********** socket **********
import { socketClient } from "./utils/socket";
// 初始化 socket
const ws_wyf_url = "ws://xxx.xxx.xxx.xxx:8080/conn?u=123ad";
const wsAuto = {
  appId: "xxxx",
  appSecret: "xxxxxxx"
};
const wsocket = new socketClient(ws_wyf_url, wsAuto);
wsocket.initWebSocket();
Vue.prototype.$ws = wsocket;

vue2.x 组件使用

<script>
  created() {
      // 监听消息
      this.$ws.wsMessage((res) => {
          console.log(res)
      });
  },

  // 发送消息
  let parm = {
      name:"asd"
  }
  this.$ws.wsSend(patm);
</script>