輕松搞定Vue 使用SignalR與Asp.net Core通訊

前言

針對於Web與其他應用的的通訊，在.Net中，SignalR是一個不錯的選擇，在前后端沒有分離的時候，直接引用對應的signalr.js文件即可； 這里主要記錄Vue與Asp.netcore 前后端分離通過signalR通訊實踐；

 

服務端即Asp.net Core 程序

前提：通過Nugut 引入Microsoft.AspNetCore.SignalR 包

首先編寫自己的Hub  

 public class ChatHub:Hub
    {
        public Task SendMsg(ChatMessageInfo info)
        {
　　　　　　　　//這里的Show代表是客戶端的方法，具體可以細看SignalR的說明
            return Clients.All.SendAsync("Show", info.UserName + ":" + info.Message);
        }
    }
    public class ChatMessageInfo
    {
        public string UserName { get; set; }
        public string Message { get; set; }
    }

其次在Startup.cs中進行注入和配置，在ConfigureServices中添加如下代碼

//設置跨域問題  因為前后端分離可能不在統一站點部署，會出現跨域問題，這里進行跨域配置
 services.AddCors(options => {
        options.AddPolicy("SignalRCors", policy => policy.AllowAnyOrigin()
                                                         .AllowAnyHeader()
                                                         .AllowAnyMethod()
                                                         .AllowCredentials());

});
//注冊SignalR
services.AddSignalR();        

最后在Configure中配置相關中間件使用，代碼如下

//參數中的值一定要和以上設置的跨域名字一樣
app.UseCors("SignalRCors");
//可以設置SignalR相關參數，這里設置地址
app.UseSignalR(routes => { routes.MapHub<LCHub>("/lchub/signalr"); });

　到此，服務端准備完畢！！！

Vue 客戶端准備

前提條件： 已經通過Vue-cli腳手架工具把項目搭建起來了

　　首先安裝對應的signalR插件

npm i --save @aspnet/signalr

　　其次開始封裝js，這里是在utils文件夾下創建了signalR.js文件，內容如下

//引入安裝的signalr包
import * as signalR from '@aspnet/signalr'

const signal = new signalR.HubConnectionBuilder()
　　　//服務器地址
    .withUrl('http://localhost:52970/lchub/signalr', {})
    .build()

/* const signalr = function () {
  var hub
  if (hub === undefined) {
    hub = signal
  }
  return hub
} */
//  自動重連
/* async function start () {
  try {
    await signal.start()
    console.log('connected')
  } catch (err) {
    console.log(err)
    setTimeout(() => start(), 5000)
  }
}

signal.onclose(async () => {
  await start()
}) */
//將創建的signal賦值給Vue實例
export default {
    install方法的第一個參數是 Vue 構造器，第二個參數是一個可選的選項對象。
    install: function(Vue) {
        Vue.prototype.signalr = signal
    }
}

　　然后在main.js中全局引入

import signalr from './utils/signalR'
Vue.use(signalr)

　　客戶准備就完成了，現在就可以使用了，在任意組件中都可以使用，使用方式如下：

    //在Vue的生命周期Created函數中注冊相關事件 
   created(){
　　　　//這里Show就是在服務端指定的Show的方法名稱，這里是先清除，再加上
        this.signalr.off('Show');
        this.signalr.on('Show',res=>{
　　　　　　　//可以做相關業務邏輯
            console.log('signalr 來了');
        })
    },
　　//在Vue的生命周期函數mounted中進行連接
    mounted () {
        this.signalr.start().then(() => {
            console.log('連接');
        })
    }

總結

以上步驟輕松實現Vue和Asp.Net Core 前后端分離通過signalR進行通訊。signalR詳細資料可以參考對應的官方文檔和對應大牛博客

 

關注公眾號，每周更新至少兩篇關於.NetCore相關文章