socketio连接调整

guoshilong

2023-03-18 8fe76c3c286fd431b3fdf190e4594a27d5cda59a

socketio连接调整

 src/views/funcController.vue

@@ -1,15 +1,15 @@
<template>
  <div>
    <avue-form ref="form" v-model="form" :option="option" @submit="connect"></avue-form>
    <avue-form ref="form" v-model="form" :option="option" @submit="getMenuList"></avue-form>
    <div class="menu-btn-group">
      <el-button size="small" v-for="data in menuList" :index="data.id" :key="data.id" @click="changeMenu(data)">
      <el-button size="small" v-for="data in menuList" :index="data.id" :key="data.id" @click="menuChange(data)">
        {{ data.name }}
      </el-button>
    </div>
    <div class="action-btn-group">
      <div class="img-btn" v-if="currentClick.property == 2 && currentClick.type == 2">
        <el-button size="small" @click="previousPage">上一张</el-button>
        <el-button size="small" @click="nextPage">下一张</el-button>
        <el-button size="small" @click="sendMsg('changeImgPage','previous')">上一张</el-button>
        <el-button size="small" @click="sendMsg('changeImgPage','next')">下一张</el-button>
      </div>
    </div>
  </div>
@@ -30,15 +30,15 @@
        menuSpan: 6,
        column:[
          {
            label:"当前设备",
            prop:"currentDevice",
            span:6,
          },
          {
            label:"控制模块",
            prop:"modulesId",
            span:6,
          },
          {
            label:"当前设备",
            prop:"currentDevice",
            span:6,
          }
        ]
      },
      menuList:[],
@@ -47,48 +47,48 @@
  },
  mounted() {
  },
  created() {
    this.connect()
  },
  methods: {
    handleSubmit(form,done){
      this.getMenuList()
    getMenuList(form,done){
      this.sendMsg("putInClientMap",null)
      done()
    },
    getMenuList(){
      let params = {
        modulesId : this.form.modulesId
      }
      getAll(params).then(res=>{
        if (res.data.code == 200){
          let data = res.data.data
          this.menuList = data
        }
      })
    },
    changeMenu(data){
    menuChange(data){
      this.currentClick = data
      this.socketIoClient.emit('menuChange',data.id)
      this.sendMsg("menuChange",data.id)
    },
    previousPage(){
      this.socketIoClient.emit('changeImgPage','previous')
    },
    nextPage(){
      this.socketIoClient.emit('changeImgPage','next')
    },
    connect(form,done){
      let serveUri = 'http://192.168.0.200:10246'
      let params={
        modulesId:form.modulesId,
        controllerId : form.currentDevice,
        isView:false
    sendMsg(msgName,data) {
      let msg = {
        current:this.form.currentDevice,
        target:this.form.modulesId,
        msg :data
      }
      this.socketIoClient.emit(msgName,JSON.stringify(msg))
    },
    connect(){

      // if (this.socketIoClient != null){
      //   this.socketIoClient.disconnect()
      //   this.socketIoClient = null
      // }

      let serveUri = 'http://192.168.0.200:10246'
      // let params={
      //   modulesId:form.modulesId,
      //   controllerId : form.currentDevice,
      //   isView:false
      // }

      this.socketIoClient = io.connect(serveUri, {
        'force new connection': true,
        'query': 'connectInfo=' + JSON.stringify(params)
        // 'force new connection': true,
        // 'query': 'connectInfo=' + JSON.stringify(params)
      });

      //监听与服务器的连接状态
      this.socketIoClient.on("connect",()=>{
        done()
        // done()
      })

      //监听服务器发回的消息

 src/views/funcView.vue

@@ -3,7 +3,7 @@
    <el-row>
      <el-col :span="4">
        <div class="search">
          <avue-form :option="option" v-model="form" @submit="connect">
          <avue-form :option="option" v-model="form" @submit="getMenuList">
            <template slot-scope="{}" slot="modulesIdLabel">
              <span></span>
            </template>
@@ -132,18 +132,12 @@
      socketIoClient: null,
    }
  },
  created() {
    this.connect()
  },
  mounted() {
  },
  methods: {
    handleSubmit(form, done) {
      getAll(form).then(res => {
        if (res.data.code == 200) {
          let data = res.data.data
          this.menuList = data
          done()
        }
      })
    },
    handleSelect(index) {
      let selectData = this.menuList.filter(e => {
        return e.id == index
@@ -181,21 +175,28 @@
      }
    },

    connect(form, done) {
    connect() {

      // if (this.socketIoClient != null){
      //   this.socketIoClient.disconnect()
      //   this.socketIoClient = null
      // }


      let serveUri = 'http://192.168.0.200:10246'
      let params = {
        modulesId: form.modulesId,
        isView: true
      }
      // let params = {
      //   modulesId: form.modulesId,
      //   isView: true
      // }

      this.socketIoClient = io.connect(serveUri, {
        'force new connection': true,
        'query': 'connectInfo=' + JSON.stringify(params)
        // 'force new connection': true,
        // 'query': 'connectInfo=' + JSON.stringify(params)
      });

      //监听与服务器的连接状态
      this.socketIoClient.on("connect", () => {
        done()
        // done()
      })

      //监听服务器发回的消息
@@ -232,6 +233,17 @@
      });

    },
    getMenuList(form,done){
      this.sendMsg("putInClientMap",null)
      done()
    },
    sendMsg(msgName,data){
      let msg = {
        current:this.form.modulesId,
        msg :data
      }
      this.socketIoClient.emit(msgName,JSON.stringify(msg))
    },
    left() {
      this.$refs.flipbook.flipLeft()
    },