vue项目中封装websock并使用

import { randomString } from '@/utils/index.js';
import router from '@/router/index.js';
// ws配置信息
export const webSocket = {
  ws: null, // ws实例
  recTime: 5 * 1000, // 重连刷新时间
  webSocketTime: null, // 定时请求发送心跳包id
  reconnentTime: null, // 唱失败从重连id
  param: '', // 请求参数
  url: ``, // ws url
  wsData: {},// ws 抛出来的数据
  // 获取ws成功后的数据
  getWsData () {
    return this.wsData;
  },
  // ws 关闭连接
  close () {
    clearInterval(this.webSocketTime);
    clearTimeout(this.reconnentTime);
    this.ws && this.ws.close();
    console.log('-----执行webSocket关闭操作----');
  },
  // ws重联
  wsReconnent () {
    clearInterval(this.webSocketTime);
    clearTimeout(this.reconnentTime);
    this.reconnentTime = setTimeout(() => {
      console.log('-----执行webSocket重联操作----');
      this.ws && this.ws.close(); // 先关闭然后再重联
      // this.param = '';
      this.wsInt(this.url, this.param); // 断开5s后重联
    }, this.recTime);
  },
  // ws发送心跳包
  startHeartBeat () {
    this.webSocketTime = setInterval(() => {
      if (this.ws.readyState == 1) {
        this.ws.send('心跳包');
      } else {
        console.log('心跳断开，服务端断开，执行ws.close()触发重连！');
        this.wsReconnent(); // 断开重连
      }
    }, this.recTime);
  },
  // 初始化ws方法
  wsInt(url, param) {
    if (typeof window.WebSocket === 'undefined') {
      console.error('浏览器不支持WebSocket');
      return;
    }

    this.url = url;
    this.param = param;

    const ws = new WebSocket(`${this.url}${this.param}_${randomString()}`);
    this.ws = ws;

    ws.onopen = function(evt) {
      console.log('------告警推送连接打开------');
      webSocket.startHeartBeat();
    };

    ws.onmessage = function(evt) {
      if (evt.data !== '连接成功' && evt.data !== '心跳包') {
        console.log('------告警推送数据------', JSON.parse(evt.data));
        webSocket.wsData = JSON.parse(evt.data);
      }
    };

    ws.onclose = function(evt) {
      console.log('------告警推送连接关闭------');
      if (router.app.$route.name !== 'login') {
        // webSocket.wsReconnent(); // 断开重连
      }
    };

    ws.onerror = function(evt) {
      console.error('-------告警推送websocket连接失败--------');
      webSocket.wsReconnent(); // 断开重连
    };

  },
};

<template>
  <div :class="['wanringMsgBox', isActive ? '' : 'active']">
    <p style="">你有新的告警信息！<i class="el-icon-circle-close close-btn" @click="close"></i></p>
    <div class="content" @click="wanringToggle">
      <ul>
        <li v-for="(item, index) in tableData" :key="index">
          <span class="prj-name" style="font-size:15px;">项目：{{item.orgPath || '-'}}</span>
          <span class="content" :title="item.content">告警内容：{{item.content}}</span>
          <span class="btn">日期：{{item.createTime}}</span>
        </li>
      </ul>
      <span class="more">前往确认>></span>
    </div>
  </div>
</template>

<script>
  import {webSocket} from '@/utils/webSocket.js';
  import {mapState} from 'vuex';
  import {DEV_WS_API} from '@/axios/index.js';
  export default {
    name: 'warningNotice',
    data () {
      return {
        webSocket,
        timId: null,
        tableData: []
      };
    },
    computed: mapState({
      isActive: state => state.warningState
    }),
    watch: {
      'webSocket.wsData': {
        handler (newv, oval) {
          if (newv.id) {
            this.tableData = [newv];
            this.$store.commit('setWarningState', true);
          }
        },
        immediate: true
      }
    },
    created () {},
    beforeDestroy () {
      webSocket.close();
    },
    mounted () {
      if (this.$route.name !== 'login') {
        const user = JSON.parse(window.sessionStorage.getItem('user'));
        webSocket.wsInt(`${DEV_WS_API}device-manager/ws/`, user.id);
      }
    },
    methods: {
      // 点击跳转到告警列表
      wanringToggle () {
        this.$store.commit('setWarningState', false);
        this.$router.push({name: 'warningList'});
      },
      close () {
        this.$store.commit('setWarningState', false);
      },
      sureBtn () {
        this.$store.commit('setWarningState', true);
      }
    }
  };
</script>

<style lang="less" scoped>
  .wanringMsgBox.active{
    right:-350px;
  }
  .wanringMsgBox{
    position: fixed;
    right:0;
    bottom:0;
    z-index:99999999;
    height:150px;
    width:350px;
    background:#fff;
    transition: all 1s;
    .more{
      color:red;
      position:absolute;
      bottom:5px;
      right:20px;
    }
    p {
      position:relative;
      height:30px;
      line-height:30px;
      background:#00014c;
      color:#fff;
      font-size:14px;
      text-align:left;
      padding-left:10px;
      .close-btn{
        position: absolute;
        right:10px;
        top: 8px;
        cursor: pointer;
      }
    }
    .content{
      height:270px;
      padding-top:10px;
      cursor:pointer;
      li{
        height:30px;
        line-height:30px;
        padding:0 20px;
        >span{
          height:30px;
          line-height:30px;
          padding-top:0;
        }
        &::after{
          content: '';
          display:block;
          clear: both;
        }
        .prj-name{
          display:block;
          width:200px;
          white-space: nowrap;
          text-overflow:ellipsis;
          overflow:hidden;
        }
        .content{
          display:block;
          color:red;
          width:320px;
          white-space: nowrap;
          text-overflow:ellipsis;
          overflow:hidden;
        }
        .btn{
          display:block;
          height:20px;
          margin-top:5px;
          line-height:20px;
          color:#333;
          cursor:pointer;
        }
      }
    }
  }
</style>

// 生成随机字符串
export function randomString (len = 32) {
  let $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; // 默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
  var maxPos = $chars.length;
  var pwd = '';
  for (let i = 0; i < len; i++) {
    pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return 'chart-' + pwd;
}

项目过程中使用根据自己情况修改对应的url 和去掉不需要的逻辑和方法即可。