1.接入signalR 消息推送功能

loulijun2021

2023-07-19 5cf009d5ee7cd782a360848d5c2d7b71aec4d8af

 src/views/purchasesManager/goodsStatisticsList.vue

@@ -1,41 +1,84 @@
<template>
  <div id="app">
    <div class="box">
      <el-input v-model="input" placeholder class="inp" />
      <el-button type="primary" @click="showDialog">生成 cron</el-button>
    </div>
    <el-dialog title="生成 cron" :visible.sync="showCron">
      <vcrontab :expression="expression" @hide="showCron=false" @fill="crontabFill" />
    </el-dialog>
  </div>
</template>
<script>
import vcrontab from 'vcrontab'
<!--<template>-->
<!--  <div class="home">-->
<!--    <h1>前端演示SignalR</h1>-->
<!--    <input v-model="user" type="text">-->
<!--    <input v-model="message" type="text">-->
<!--    <button @click="sendAll">发送全部</button>-->
<!--    <button @click="sendOwn">对自己发送</button>-->
<!--    <button @click="sendOther">对其他发送</button>-->
<!--    <div>-->
<!--      <ul v-for="(item, index) in messages" :key="index + 'itemMessage'">-->
<!--        <li>{{ item.user }} says {{ item.message }}</li>-->
<!--      </ul>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

export default {
  components: { vcrontab },
  data() {
    return {
      input: '',
      expression: '',
      showCron: false,
      cronExpression: '*/1 * * * *',
      form: {},
      formLabelWidth: '120px'
      // showCron: false
    }
  },
  methods: {
    crontabFill(value) {
      // 确定后回传的值
      this.input = value
    },
    showDialog() {
      this.expression = this.input
      // 传入的 cron 表达式，可以反解析到 UI 上
      this.showCron = true
    }
  }
}
</script>
}
<!--<script>-->
<!--// @ is an alias to /src-->
<!--import * as signalR from '@aspnet/signalr'-->
<!--export default {-->
<!--  name: 'Home',-->
<!--  components: {},-->
<!--  data() {-->
<!--    return {-->
<!--      user: 's2', // 用户-->
<!--      message: '22222', // 消息-->
<!--      connection: '', // signalr连接-->
<!--      messages: [] // 返回消息-->
<!--    }-->
<!--  },-->
<!--  created: function() {-->
<!--    const thisVue = this-->
<!--    this.connection = new signalR.HubConnectionBuilder()-->
<!--      .withUrl('http://121.196.36.24:8019/chatHub', {-->
<!--        // skipNegotiation: true,-->
<!--        // transport: signalR.HttpTransportType.WebSockets-->
<!--      })-->
<!--      .configureLogging(signalR.LogLevel.Information)-->
<!--      .build()-->

<!--    console.log(this.connection, 1)-->

<!--    this.connection.on('ReceiveMessage', function(user, message) {-->
<!--      debugger-->
<!--      thisVue.messages.push({ user, message })-->
<!--      console.log({ user, message })-->
<!--    })-->
<!--    this.connection.on('ReceiveCaller', function(message) {-->
<!--      debugger-->
<!--      const user = '自己' // 这里为了push不报错，我就弄了一个默认值。-->
<!--      thisVue.messages.push({ user, message })-->
<!--      console.log({ user, message })-->
<!--    })-->
<!--    this.connection.start()-->
<!--  },-->
<!--  methods: {-->
<!--    // 给全部发送消息-->
<!--    sendAll: function() {-->
<!--      this.connection-->
<!--        .invoke('SendMessage', this.user, this.message)-->
<!--        .catch(function(err) {-->
<!--          return console.error(err)-->
<!--        })-->
<!--    },-->
<!--    // 只给自己发送消息-->
<!--    sendOwn: function() {-->
<!--      this.connection-->
<!--        .invoke('SendMessageCaller', this.message)-->
<!--        .catch(function(err) {-->
<!--          return console.error(err)-->
<!--        })-->
<!--    },-->

<!--    // 给其他人员发送消息-->
<!--    sendOther: function() {-->
<!--      this.connection-->
<!--        .invoke('SendMessageOther', this.user, this.message)-->
<!--        .catch(function(err) {-->
<!--          return console.error(err)-->
<!--        })-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->