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(数据))。

代码如下

html 复制代码
<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建立连接用于测试 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

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

相关推荐
未来之窗软件服务1 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友2 小时前
什么是断言?
前端·后端·安全
FIN66683 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4953 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1243 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树3 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN66683 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能
im_AMBER3 小时前
杂记 14
前端·笔记·学习·web
牧杉-惊蛰3 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js
C+ 安口木3 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js