VUE学习(六)使用signalR

1.通过npm安装SignalR。这个地方需要注意安装@microsoft/signalr。另外一个版本在我这里总是报错。

 2.我的测试代码主要看initSignalR()部分即可，其他的是我测试代码。

另外signalR需要在当前页面导入，不能用全局的方法main.js中导入，我这里会出错

<script>
import * as signalR from "@microsoft/signalr";
export default {
  data() {
    return {
      name: "'aaaabbbb22'",
      tableData: [],
      signal: null,
    }
  },

  methods: {
    changeName() {
      this.name = 'easyboot'
    },
    // 接收数据
    receiveData(msgInfo) {
      console.log('signalR',msgInfo)
      this.data = msgInfo;
    },
    initSignalR() {
      this.signal = new signalR.HubConnectionBuilder()
        //服务器地址
      //  .withUrl('http://192.168.0.110:8100/myHub', {})
      .withUrl('http://192.168.0.106:5127/chatHub', {})
        .withAutomaticReconnect()
        .build()
      // 定义后端调用的方法
      this.signal.on("ReceiveMsg", this.receiveData);
      this.signal.start().then(() => {
        console.log('连接');
      }).catch(() => {
        console.log('连接失败');
      })
    },
    getTableData() {
      let cont = 0;
      let tableData = [];
      while (cont < 10000) {
        cont = cont + 1;
        let object = {
          name: "王小虎" + cont,
          sex: cont,
          att1: "att1 " + cont,
          att2: "att2 " + cont,
          att3: "att3 " + cont,
          att4: "att4 " + cont,
          att5: "att5 " + cont,
          att6: "att6 " + cont,
          att7: "att7 " + cont,
        };
        tableData.push(object);
      }

      setTimeout(() => {
        this.tableData = tableData;
        // console.log(tableData,this.tableData[0].name)
      }, 0);
    }
  },
  created() {
    this.getTableData();
    this.initSignalR();
    //this.tableData = window.MOCK_TREE_DATA_LIST
  }
}
</script >

<script setup>

// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'


</script>

<template>
  <p>{{ name }}</p>



  <vxe-table :data="tableData" height="400" stripe show-overflow border round :column-config="{ resizable: true }"
    :row-config="{ isCurrent: true, isHover: true }">
    <vxe-column type="seq" width="60"></vxe-column>
    <vxe-column field="name" sortable title="Name"></vxe-column>
    <vxe-column field="role" title="Role"></vxe-column>
    <vxe-column type="seq" title="Seq" width="60"></vxe-column>
    <vxe-column field="att1" title="att1"></vxe-column>
    <vxe-column field="att2" title="att2"></vxe-column>
    <vxe-column type="att3" title="att3" width="60"></vxe-column>
    <vxe-column field="att4" title="att4"></vxe-column>
    <vxe-column field="att5" title="att5"></vxe-column>
    <vxe-column type="att6" title="att6" width="60"></vxe-column>
    <vxe-column field="att7" title="att7"></vxe-column>
    <vxe-column field="role" title="Role"></vxe-column>
    <vxe-column type="seq" title="Seq" width="60"></vxe-column>
    <vxe-column field="name" title="Name"></vxe-column>
    <vxe-column field="role" title="Role"></vxe-column>
    <vxe-column type="seq" title="Seq" width="60"></vxe-column>
    <vxe-column field="name" title="Name"></vxe-column>
    <vxe-column field="role" title="Role"></vxe-column>
    <vxe-column type="seq" title="Seq1" width="60"></vxe-column>
    <vxe-column field="name" title="Name1"></vxe-column>
    <vxe-column field="role" title="Role1"></vxe-column>
    <vxe-column type="seq" title="Seq12" width="60"></vxe-column>
    <vxe-column field="name" title="Name12"></vxe-column>
    <vxe-column field="role" title="Role12"></vxe-column>
    <!-- <vxe-colgroup title="Group1">
        <vxe-column field="sex" title="Sex"></vxe-column>
        <vxe-column field="address" title="Address"></vxe-column>
      </vxe-colgroup> -->
  </vxe-table>

  <vxe-table border height="400" stripe :column-config="{ resizable: true }" :row-config="{ isHover: true }"
    :data="tableData">
    <vxe-column type="seq" width="60"></vxe-column>
    <vxe-column field="name" sortable title="Name" width="300"></vxe-column>
    <vxe-column field="sex" title="最小列宽" min-width="300"></vxe-column>
    <vxe-column field="age" title="Age" width="300"></vxe-column>
    <vxe-column field="time" title="Time" width="300"></vxe-column>
    <vxe-column field="address" title="Address" width="300" show-overflow></vxe-column>
  </vxe-table>
  <br />
  <br />
  <button @click="changeName">改变名称</button>
  <button @click="changeName">改变名称1</button>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <!-- <HelloWorld msg="Vite + Vue" /> -->
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}



.vxe-textarea--inner {
  line-height: inherit;
}

/*滚动条整体部分*/
.mytable-scrollbar ::-webkit-scrollbar {
  width: 20px;
  height: 21px;
}

/*滚动条的轨道*/
.mytable-scrollbar ::-webkit-scrollbar-track {
  background-color: #FFFFFF;
}

/*滚动条里面的小方块，能向上向下移动*/
.mytable-scrollbar ::-webkit-scrollbar-thumb {
  background-color: #bfbfbf;
  border-radius: 5px;
  border: 1px solid #F1F1F1;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}

.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
  background-color: #A8A8A8;
}

.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
  background-color: #787878;
}

/*边角，即两个滚动条的交汇处*/
.mytable-scrollbar ::-webkit-scrollbar-corner {
  background-color: #FFFFFF;
}
</style>