vue中使用websock的两种方法

前言：

       到目前为止，使用websock很多次了，整理下资料，共两种，一种时ws:的，一种是普通的http(这种方法主要是因为对后端技术要求比较低)

在线测试websock

****个人贡献，提供一个websocket可测试地址****

测试路径   ws://localhost:8900/ws

百度网盘地址：

链接：https://pan.baidu.com/s/1iUumi-j38hhWsW1CLXJdVg    提取码：1ow2

方法一：

1 定义组件： websockDiv.vue

<template>
      <div></div>
</template>

<script>
  let socket;
  // 给服务器发送一个字符串:
  export default {
    data() {
      return {
        // 连接标志位
        lockReconnect: false,
        wsCfg: {
          // websocket地址
          url: "wss://papp.yunmaizhineng.com:8443/payment/scan"
        }
      };
    },
    methods: {
      createWebSocket() {
        try {
          // 创建Web Socket 连接
          socket = new WebSocket(this.wsCfg.url);
          // 初始化事件
          this.initEventHandle(socket);
        } catch (e) {
          // 出错时重新连接
          this.reconnect(this.wsCfg.url);
        }
      },
      initEventHandle(socket) {
        // 连接关闭时触发
        socket.onclose = () => {
          console.log("连接关闭");
        };
        // 通信发生错误时触发
        socket.onerror = () => {
          // 重新创建长连接
          this.reconnect();
        };
        // 连接建立时触发
        socket.onopen = () => {
          console.log("连接成功");
          this.$emit('successWeb')
        };
        // 客户端接收服务端数据时触发
        socket.onmessage = msg => {
          // 业务逻辑处理
          console.log(msg.data, "ws:data");
          let data =  JSON.parse(msg.data)
          this.$emit('getSockData',data)
        };
      },
      reconnect() {
        if (this.lockReconnect) {
          return;
        }
        this.lockReconnect = true;


        // 没连接上会一直重连，设置延迟避免请求过多
        setTimeout(() => {
          this.lockReconnect = false;
          this.createWebSocket(this.wsCfg.url);
        }, 2000);
      },
      test(data) {
        // 给服务器发送一个字符串:
        // ws.send("Hello!");
        socket.send(data);
      }
    },
    mounted() {

    }
  };
</script>

2 再template中

 <websockDiv ref="webso" @getSockData="getSockData" @successWeb="successWeb"></websockDiv>

3 methods中

   /**
     * websock后端返回数据调用
     * */
    getSockData(data){
      if(data.status == 99){
        Toast('支付失败');
      }else if(data.status == 1){
        Toast('支付成功,支付金额为：'+(data.amount/100).toFixed(2));
        this.initUserDataT();//刷新方法
      }

    },
    /**
     * websock连接成功
     * */
    successWeb(){
        this.$refs.webso.test(this.user.card_id);//websock给后台传参数
    },

方法二（特殊）：文献

1 安装两个插件

cnpm i --s sockjs-client stompjs

2 引入

import SockJS from 'sockjs-client';
import Stomp from 'stompjs';

/**
   * websock-公共方法
   */
  initWebSocket(data){
    this.connection(data);
    //模拟客户端向后台推送消息
  },
  //建立连接
  connection(data) {
    let baseUrl = 'wss://papp.yunmaizhineng.com:8443/payment/scan';//实时的服务路径
     let nowMethod = '';// 方法
    // let pageName = data.name;//页面名称
    //  let pageName = '作业管控';//页面名称
    // 建立连接对象
    //连接服务端提供的通信接口，连接以后才可以订阅广播消息和个人消息
    let _that=this;
    //后台服务ip和port
    _that.socket = new SockJS(baseUrl);
    // 获取STOMP子协议的客户端对象
    _that.stompClient = Stomp.over(_that.socket);
    // 向服务器发起websocket连接
    _that.stompClient.connect('guest','guest',(frame) => {
      // 订阅服务端提供的某个topic
      _that.stompClient.subscribe(nowMethod, (msg) => {
        //msg.body存放的是服务端发送给我们的信息
        let  resData= JSON.parse(msg.body);
        if(pageName == '作业管控'){
          let res = {}
          res.data = resData;
          this.zygk_websock(res);
        }

      });
    }, (err) => {
    });
  },
  //关闭连接
  disconnect() {
    if (this.stompClient != null) {
      this.stompClient.disconnect();
      console.log("Disconnected");
    }
  },
  websocketclose(e){ //关闭
    console.log("connection closed (" + e.code + ")");
  },

  /**
   * websock-数据接收以后的方法
   */
  zygk_websock(data){
    store.commit('getYYBBData',data);
  }

到此为止