前端要實(shí)現(xiàn)即時(shí)通訊一般要看后端使用的什么樣的語言。在公司的一個(gè)項(xiàng)目中需要根據(jù)數(shù)據(jù)庫(kù)變化數(shù)據(jù)變化，一開始使用定時(shí)器輪詢請(qǐng)求數(shù)據(jù)，后來后端有時(shí)間搞即時(shí)通訊后，總算可以拋棄這種最暴力的做法了。
后端.net，即時(shí)通訊是用的SignalR 類庫(kù)。對(duì)于這個(gè)需要前端也進(jìn)行相對(duì)應(yīng)的設(shè)置。首先SignalR依賴jquery，需要在項(xiàng)目中先引入jquery，和signalr。我是在index.html中直接cdn映入的jquery。<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
然后再項(xiàng)目中的vue.config.js中配置

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

然后安裝signalr，自己根據(jù)需要選擇npm還是cnpm。

npm i signalr
cnpm i signalr

安裝好后在main.js引入。這時(shí)候就可以在Vue項(xiàng)目中使用SignalR了

import 'signalr'

utils中新建一個(gè)signalr.js

import { Message } from 'element-ui'
import $ from 'jquery'
import global from './global'
import store from '../store'
const HUBNAME = '后臺(tái)定義的名字'

// 服務(wù)器調(diào)用客戶端方法
const printNewOrder = {
  name: '與后臺(tái)約定的方法',
  method: function() {
    store.dispatch('dashboard/getwarning').then((res) => {
      // console.log(res)
    }).catch(err => {
      console.log(err)
    })
  }
}

// 客戶端的方法
const clientMethodSets = [printNewOrder] // 將需要注冊(cè)的方法放進(jìn)集合

// 建立連接
export function startConnection() {
  // 后臺(tái)的url
  const hub = $.hubConnection(global.imgURL)
  const proxy = createHubProxy(hub) // 需要先注冊(cè)方法再連接
  hub.start().done((connection) => {
    // console.log(connection)
    console.log('現(xiàn)在已連接，連接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() { // 當(dāng)客戶端檢測(cè)到慢速或頻繁刪除連接時(shí)引發(fā)
    console.log('我們目前遇到連接困難.')
  })
  hub.disconnected(function() { // 當(dāng)連接已斷開連接時(shí)引發(fā)
    console.log('連接已斷開')
  })
  return proxy
}
// 手動(dòng)創(chuàng)建proxy
export function createHubProxy(hub) {
  const proxy = hub.createHubProxy(HUBNAME)
  // 注冊(cè)客戶端方法
  clientMethodSets.map((item) => {
    proxy.on(item.name, item.method)
  })
  return proxy
}

這樣，在組件引入signalr.js后調(diào)用startConnection方法即可建立連接。
index.vue中調(diào)用。我是將數(shù)據(jù)存在vuex當(dāng)中?？梢愿鶕?jù)自己的需求去調(diào)用。

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()
    // 即時(shí)通訊建立連接
    startConnection()
  },

好了?；揪褪沁@些。歡迎各位大神可以給點(diǎn)改進(jìn)意見。