Vue 结合 SignalR 实现前后端实时消息同步

前端要实现即时通讯一般要看后端使用的什么样的语言。在公司的一个项目中需要根据数据库变化数据变化，一开始使用定时器轮询请求数据，后来后端有时间搞即时通讯后，总算可以抛弃这种最暴力的做法了。
后端.net，即时通讯是用的SignalR 类库。对于这个需要前端也进行相对应的设置。首先SignalR依赖jquery，需要在项目中先引入jquery，和signalr。我是在index.html中直接cdn映入的jquery。
然后再项目中的vue.config.js中配置

configureWebpack: {
    externals: {
      'jquery': '$',
      '@riophae/vue-treeselect': 'VueTreeselect'
    }
  },

然后安装signalr，自己根据需要选择npm还是cnpm。

npm i signalr
cnpm i signalr

安装好后在main.js引入。这时候就可以在Vue项目中使用SignalR了

import 'signalr'

utils中新建一个signalr.js

import { Message } from 'element-ui'
import $ from 'jquery'
import global from './global'
import store from '../store'
const HUBNAME = '后台定义的名字'

// 服务器调用客户端方法
const printNewOrder = {
  name: '与后台约定的方法',
  method: function() {
    store.dispatch('dashboard/getwarning').then((res) => {
      // console.log(res)
    }).catch(err => {
      console.log(err)
    })
  }
}

// 客户端的方法
const clientMethodSets = [printNewOrder] // 将需要注册的方法放进集合

// 建立连接
export function startConnection() {
  // 后台的url
  const hub = $.hubConnection(global.imgURL)
  const proxy = createHubProxy(hub) // 需要先注册方法再连接
  hub.start().done((connection) => {
    // console.log(connection)
    console.log('现在已连接，连接ID=' + connection.id)
    store.dispatch('dashboard/getwarning').then((res) => {
      // console.log(res)
    }).catch(err => {
      console.log(err)
    })
  }).fail(() => {
    Message('连接失败')
    // console.log('无法连接')
  })
  hub.error(function(error) {
    // Message('SignalR error: ' + error)
    console.log('SignalR error: ' + error)
  })
  hub.connectionSlow(function() { // 当客户端检测到慢速或频繁删除连接时引发
    console.log('我们目前遇到连接困难.')
  })
  hub.disconnected(function() { // 当连接已断开连接时引发
    console.log('连接已断开')
  })
  return proxy
}
// 手动创建proxy
export function createHubProxy(hub) {
  const proxy = hub.createHubProxy(HUBNAME)
  // 注册客户端方法
  clientMethodSets.map((item) => {
    proxy.on(item.name, item.method)
  })
  return proxy
}

这样，在组件引入signalr.js后调用startConnection方法即可建立连接。
index.vue中调用。我是将数据存在vuex当中。可以根据自己的需求去调用。

import { startConnection } from '@/utils/signalr'
import { mapState } from 'vuex'
computed: {
    ...mapState({
      warnList: state => state.dashboard.warnList
    })
  },
  watch: {
    warnList(val) {
      this.addwarningMarker()
    }
  },
created() {
    this.GetComDict()
    this.getAllData()
    // 即时通讯建立连接
    startConnection()
  },

好了。基本就是这些。欢迎各位大神可以给点改进意见。