前端vue连接websocket

封装websocket的Api

/* eslint-disable no-mixed-spaces-and-tabs */
/*------------------------- web socket方法封装 -------------------------*/
    /*连接websocket*/
    var ws;
    var port = '0'; //前一次端口号，断线重连时用到
    var seq=0;//第几次请求握手
    export const websocketFun = (parmas) => {
        var WebSocketsExist = true;
	    try {
	        ws = new WebSocket("ws://" + parmas.websocketip + ":" + parmas.websocketport);
	    }
	    catch (ex) {
	        try {
	            ws = new WebSocket("ws://" + this.$store.state.websocketip + ":" + this.$store.state.websocketport);
	        }
	        catch (ex) {
	            WebSocketsExist = false;
	        }
	    }
	    if (!WebSocketsExist) {
	        return;
	    }
	    ws.onopen = WSonOpen;
	    //ws.onmessage = WSonMessage;
	    ws.onclose = WSonClose;
        ws.onerror = WSonError;
        return ws; 
      }

    function WSonOpen() {
        var json={};
		json.userid=sessionStorage.getItem("userId");
		json.username=sessionStorage.getItem("username");
        json.FSNo="01";
        json.svrtype="8";
        json.msgType="msg_HandShake";
        json.port=port;
        json.reportflag="1";
        json.format="0";
        json.seq=seq;
        seq++;
        let str = JSON.stringify(json);
        let length=str.length;
        let len=length.toString(16);
        len=len.padStart(4, "0"); 
        str=len+str;
        ws.send(str);
   }

function WSonClose() {
}

function WSonError() {
}

使用（我自己的案例）

<template>
  <div class="meterSwitch">
    <div class="header">
      <div class="search">
        <el-form size="mini" :inline="true" :model="search" class="demo-form-inline">
          <el-form-item label="户号">
            <el-input v-model="search.customerNum"></el-input>
          </el-form-item>
          <el-form-item label="户名">
            <el-input v-model="search.customerName"></el-input>
          </el-form-item>
          <el-form-item label="电表地址">
            <el-input v-model="search.meterAddress"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" size="mini" type="primary" @click="getMeterSwitchList">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="Newly">
        <el-button icon="el-icon-connection" size="mini" type="primary" @click="readingSelect">透抄</el-button>
      </div>
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        height="100%"
        ref="multipleTable"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="55"></el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          width="150"
          label="电表ID"
          prop="fileId"
          v-if="false"
        ></el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          width="150"
          label="集中器ID"
          prop="upGoingId"
          v-if="false"
        ></el-table-column>
        <!-- <el-table-column type="index" width="50" prop="index"></el-table-column> -->
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          width="120"
          label="户名"
          prop="customerName"
        ></el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          width="120"
          label="户号"
          prop="customerNum"
        ></el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          width="150"
          label="电表地址"
          prop="meterAddress"
        ></el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          label="安装地址"
          prop="installAddress"
        ></el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          width="150"
          prop="readingStatus"
          label="透抄结果"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.readingStatus==1" style="color: green">成功</span>
            <span v-else-if="scope.row.readingStatus==0" style="color: red">失败</span>
            <span v-else style="color: black">未透抄</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          width="150"
          label="数据内容"
          prop="readingData"
        ></el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="search.page"
        :page-sizes="pages"
        :page-size="search.size"
        layout="total,sizes, prev, pager, next, jumper"
        :total="params.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { websocketFun } from "@/request/websocketApi";
import { getMeterSwitchList, openSwitch } from "@/request/meterapi";
export default {
  data() {
    return {
      ws: "",
      search: {
        page: 1,
        size: 10,
        meterAddress: "",
        customerName: "",
        customerNum: "",
        organizationid: "",
        gid: "",
        type:'',
      },
      // 分页
      pages: [10, 20, 40],
      tableData: [],
      exchangeTableData: [],
      params: {
        total: 0
      },
      dealRows: [],
      multipleSelection: []
    };
  },
  computed:{
    tree(){
      return this.$store.state.tree
    }
  },
  watch: {
    tree:{
      deep:true,//代表深层次的监听
      immediate:true,//页面初始化的时候就立即触发一次
      handler(val){
        // console.log('vuex树',val)
        if(val.type===3){
          this.search.meterAddress = val.name
        }else {
          this.search.meterAddress = ''
        }
        if(val.type===2){
          this.search.customerName = val.name
          this.search.gid = val.gid
          this.search.type = val.type
        }else {
          this.search.customerName = ''
        }
        if(val.type===1){
          this.search.gid = val.gid
          this.search.type = val.type
        }
        // console.log('this.search---',this.search)
        this.page = 1
        this.getMeterSwitchList();
      }
    }
  },
  methods: {
    getMeterSwitchList() {
      getMeterSwitchList(this.search).then(res => {
        this.tableData = res.data.data;
        this.params.total = res.data.total;
      });
      if (this.ws == "") {
        this.ws = websocketFun(this.$store.state);
        this.ws.onmessage = this.WSonMessage;
      }
    },
    WSonMessage(event) {
      if (!event) {
        return;
      }
      let str = event.data; //要截取的字符串
      let index = str.indexOf("{");
      let result = str.substr(index, str.length);
      let events = eval("(" + result + ")");
      if (events.result == "nak") {
        this.$message({
          message: "与前置机连接被拒绝！",
          type: "error",
          duration: 3000
        });
      } else if (events.result == "ack") {
        console.log("与前置机连接成功！");
      } else {
        console.log(events);
        if (events.errorCode == "ok") {
          this.$message({
            message: "操作成功！",
            type: "success",
            duration: 3000
          });
          //同时修改数据库里电表下达状态，关于电表的数据在events.objJson里，
          //还需解析,然后根据电表地址 判断index，将数据写入到对应的列
          // this.tableData[this.dealRow].readingStatus=1;
          // this.tableData[this.dealRow].readingData=events.objJson;
        } else if (events.errorCode == "notOnline") {
          this.$message({
            message: "操作失败,集中器不在线!",
            type: "error",
            duration: 3000
          });
          //同时修改数据库里电表下达状态，关于电表的数据在events.objJson里，
          //还需解析,然后根据电表地址 判断index，将数据写入到对应的行
          //events.objJson.forEach((val) => {
          this.multipleSelection.forEach(val => {
            this.tableData.forEach((v, i) => {
              if (val.fileId == v.fileId) {
                this.dealRows.push(i);
              }
            });
          });
          this.$refs.multipleTable.clearSelection();
          for (let dealRow of this.dealRows) {
            this.tableData[dealRow].readingStatus = 0;
            this.tableData[dealRow].readingData = events.objJson;
          }
          this.dealRows = [];
        } else if (events.errorCode == "failed") {
          this.$message({
            message: "操作失败!",
            type: "error",
            duration: 3000
          });
        } else {
          this.$message({
            message: events,
            type: "error",
            duration: 3000
          });
        }
      }
    },
    handleCurrentChange(val) {
      this.search.page = val;
      this.getMeterSwitchList();
    },
    handleSizeChange(val) {
      this.search.size = val;
      this.search.page = 1;
      this.getMeterSwitchList();
    },
    readingSelect() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请勾选后操作！",
          type: "warning",
          duration: 2000
        });
      }
      if (this.ws.readyState == 1) {
        for (let select of this.multipleSelection) {
          let electricmeter = {};
          electricmeter.fileId = select.fileId;
          electricmeter.upGoingId = select.upGoingId;
          openSwitch(electricmeter).then(res => {
            let openSwitchStr = res.data.data;
            this.ws.send(openSwitchStr);
            console.log("已发送");
          });
        }
      } else {
        this.$message({
          message: "未连接前置机！",
          type: "warning",
          duration: 2000
        });
      }
      console.log(this.multipleSelection);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },
  created() {
    this.getMeterSwitchList();
  }
};
</script>

<style lang="scss">
.meterSwitch {
  height: 100%;
  .header {
    vertical-align: middle;
    .search {
      // display: inline-block;
      vertical-align: top;
    }
    .Newly {
      display: block;
    }
  }
  .content {
    height: calc(100% - 120px);
    margin-top: 10px;
    .el-form-item {
      width: 33% !important;
    }
    .demo-table-expand {
      font-size: 0;
    }
    .el-form-item__label {
      // width: 90px;
      color: #99a9bf !important;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
  }
}
</style>

使用vuex保存连接websocket的ip、端口等信息

1、安装vuex

import vuex from 'vuex'

2、在main.js里把vuex注册到vue全局组件里

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import store from './store/index.js'
import Vuex from 'vuex'

Vue.use(ElementUI)
Vue.use(Vuex)//使用vuex
Vue.config.productionTip = false
import './assets/font/iconfont.css'
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
// 引入reset.css
import './assets/css/reset.css'
import './assets/css/base.css'

state: {
    websocketip:"193.168.1.100",
    websocketport:"20020",
  },
var store = new vuex.Store({//创建vuex中的store对象
    state
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')