1.signalR 优化

loulijun2021

2023-07-20 0ec9d9c2f790b432ec86311e757c469ca413b59b

1.signalR 优化

 src/layout/components/Navbar.vue

@@ -171,6 +171,7 @@
import variables from '@/styles/variables.scss'
import RightPanel from '@/components/RightPanel'
import Settings from '../components/Settings/index'
import * as signalR from '@aspnet/signalr'

export default {
  components: {
@@ -224,28 +225,21 @@
        ]
      },
      stu_torgname: '',
      show: false
      show: false,
      signalr: null
    }
  },
  inject: [
    'reload'
  ],
  created() {
    // this.$signalr.start()
    this.usercode = getCookie('navTabId')
    this.username = getCookie('username')
    this.stu_torgname = getCookie('stu_torgname') === '' ? '系统管理员' : getCookie('stu_torgname')
  },
  mounted() {
    this.$signalr.off('SendAll')
    this.$signalr.on('SendAll', (res) => {
      this.$notify({
        offset: 80,
        type: 'warning',
        title: '消息提醒',
        message: res
      })
      this.$store.state.settings.isDot = true
    })
    this.getHubConnectionBuilder()
  },
  computed: {
    ...mapGetters([
@@ -277,6 +271,40 @@
    }
  },
  methods: {
    // 建立hub连接
    async getHubConnectionBuilder() {
      const url = 'http://121.196.36.24:8019/chatHub'
      this.signalr = new signalR.HubConnectionBuilder().withUrl(url, {
        // skipNegotiation: true,
        // transport: signalR.HttpTransportType.WebSockets
      }).configureLogging(signalR.LogLevel.Information).build()

      await this.signalr.start().then(() => {
        if (window.Notification) {
          if (Notification.permission === 'granted') {
            console.log('允许通知')
          } else if (Notification.permission !== 'denied') {
            console.log('需要通知权限')
            Notification.requestPermission((permission) => {
              console.log('权限通知', permission)
            })
          } else if (Notification.permission === 'denied') {
            // console.log('拒绝通知')
          }
        } else {
          console.error('浏览器不支持Notification')
        }
        // console.log('连接成功')
      })

      this.signalr.off('SendCustomUserMessage')
      this.signalr.on('SendCustomUserMessage', (res) => {
        this.$notify({ offset: 80, type: 'warning', title: '消息提醒', message: res })
        this.$store.state.settings.isDot = true
      })
      await this.signalr.invoke('AddUser', getCookie('admin'))
    },

    systemSetting() {
      this.$refs.rightPanel.show = !this.$refs.rightPanel.show
      this.$refs.rightPanel.addEventClick()
@@ -304,7 +332,8 @@
      this.$store.dispatch('app/toggleSideBar')
    },
    async logout() {
      this.$signalr.off('SendAll')
      await this.signalr.stop()
      this.signalr.off('SendCustomUserMessage')
      await this.$store.dispatch('user/logout')
      this.$message.success('退出成功！')
      this.$router.push(`/login`)

 src/main.js

@@ -70,9 +70,6 @@
// 引用修改过的gantt
Vue.use(vGanttChart)

import signalr from './utils/signalR'
Vue.prototype.$signalr = signalr.signal

import { setCookie } from '@/utils/auth' // 引用修改过的gantt
// 判断是否走原平台过来
if (window.location.hash.indexOf('guid') !== -1) {

 src/utils/signalR.js

@@ -1,36 +1,38 @@
import * as signalR from '@aspnet/signalr'
// 此文件的代码放到layout/Navbar文件下了

const url = 'http://121.196.36.24:8019/chatHub'
const signal = new signalR.HubConnectionBuilder()
  .withUrl(url, {
    // skipNegotiation: true,
    // transport: signalR.HttpTransportType.WebSockets
  })
  .configureLogging(signalR.LogLevel.Information)
  .build()
// signal.on('SendAll', (res) => {
//   console.log(res, '收到消息了')
// import * as signalR from '@aspnet/signalr'
//
// const url = 'http://121.196.36.24:8019/chatHub'
// const signal = new signalR.HubConnectionBuilder()
//   .withUrl(url, {
//     // skipNegotiation: true,
//     // transport: signalR.HttpTransportType.WebSockets
//   })
//   .configureLogging(signalR.LogLevel.Information)
//   .build()
// // signal.on('SendAll', (res) => {
// //   console.log(res, '收到消息了')
// // })
// signal.start().then(() => {
//   if (window.Notification) {
//     if (Notification.permission === 'granted') {
//       console.log('允许通知')
//     } else if (Notification.permission !== 'denied') {
//       console.log('需要通知权限')
//       Notification.requestPermission((permission) => {
//         console.log('权限通知', permission)
//       })
//     } else if (Notification.permission === 'denied') {
//       // console.log('拒绝通知')
//     }
//   } else {
//     console.error('浏览器不支持Notification')
//   }
//   // console.log('连接成功')
// })
signal.start().then(() => {
  if (window.Notification) {
    if (Notification.permission === 'granted') {
      console.log('允许通知')
    } else if (Notification.permission !== 'denied') {
      console.log('需要通知权限')
      Notification.requestPermission((permission) => {
        console.log('权限通知', permission)
      })
    } else if (Notification.permission === 'denied') {
      // console.log('拒绝通知')
    }
  } else {
    console.error('浏览器不支持Notification')
  }
  // console.log('连接成功')
})
// signal.onclose((err) => {
//   console.log('连接已经断开 执行函数onclose', err)
// })
export default {
  signal
}
// // signal.onclose((err) => {
// //   console.log('连接已经断开 执行函数onclose', err)
// // })
// export default {
//   signal
// }