vue-页面使用websocket建立连接用于测试

前言

• websocket双向通讯在项目中经常使用，但一般都是封装成第三方包，登录，退出建立连接。

• 这样使用是合理，但不便于测试，其实在.vue页面通过new方式可以直接使用websocket。

• 在页面实例加载完成之后连接websocket，在组件销毁时候断开websocket连接。

• 注意具体情况要跟后端对接，比如唯一值（比如token），是不是一对一发，还是一对多发（链表）。

细节-websocket方法拆解

• 通过new WebSocket来获取websocket实例，在页面实例加载完毕建立连接

• 实例.onopen（地址）- 在页面实例加载完毕建立连接

• 实例.onclose - 在页面销毁之前销毁websocket实例

• 实例.onmessage（数据）- 后端使用send发送给前端时候就会触发这个函数方法（带参数）

• 实例.onerror - 在websocket断开连接，连接错误时就会触发这个函数方法

• 实例.send（数据）- 向后端发送数据-后端同样用onmessage接收到数据

• send方法发送数组对象数据时，需要转成字符串形式（ JSON.stringify(数据)）。

代码如下

<template>
  <div class="app-container">
    <el-input
      placeholder="请选择日期"
      suffix-icon="el-icon-edit-outline"
      v-model="messagedata"
      style="width: 400px; margin: 0 10px"
    >
    </el-input>
    <el-button type="primary" @click="init">建立连接</el-button>
    <el-button type="success" @click="send">发送信息</el-button>
    <el-button type="info" @click="close">断开连接</el-button>
  </div>
</template>

<script>
import store from "@/store";
export default {
  data() {
    return {
      url: "ws://192.168.2.25:48081/websocket/message",
      ws: null,
      // 推送消息
      messagedata: "",
    };
  },
  created() {},
  mounted() {},
  methods: {
    init() {
      if (typeof WebSocket === "undefined") {
        this.$modal.msgError("您的浏览器不支持WebSocket");
        return;
      } else {
        const userId = store.getters.userId;
        // 实例化socket
        this.ws = new WebSocket(this.url + "?userId=" + userId);
        // 监听socket连接
        this.ws.onopen = this.open;
        // 监听socket错误信息
        this.ws.onerror = this.error;
        // 监听socket消息
        this.ws.onmessage = this.getMessage;
      }
    },
    // websocket建立连接
    open() {
      console.log("socket连接成功");
    },
    // websocket错误信息
    error() {
      console.log("连接错误");
    },
    // 接受后端消息
    getMessage(msg) {
      console.log(msg.data);
    },
    // 向后端发送信息
    send() {
      console.log("this.ws", this.ws);
      this.ws.send(this.messagedata);
    },
    // 关闭websocket连接
    close() {
      if (this.ws) {
        this.ws.close();
        this.ws = null;
        console.log("socket已经关闭");
      }
    },
  },
  destroyed() {
    this.close();
  },
};
</script>

<style lang="scss" scoped>
</style>

连接效果图

---

总结：

经过这一趟流程下来相信你也对 vue-页面使用websocket建立连接用于测试 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕