hotmaneil熱血新好男人

由於系統上客戶需要即時儀表板的功能，想要不用計時器setInterval這種方式，就用SignalR這種作法。

分成三個獨立的專案：

1.最先呼叫API的專案：在此不說明

2.ASP.NET Web API專案：SignalR 相關的套件、設定、API及Cors設定

需要先以Nuget安裝SignalR 相關的套件例如：Microsoft.AspNet.SignalR

BroadcastHub.cs

/// <summary>
/// 廣播 Hub
/// </summary>
public class BroadcastHub: Hub
{
}

BroadcastController.cs

public class BroadcastController : ApiController
{
	IHubContext hub = GlobalHost.ConnectionManager.GetHubContext<BroadcastHub>();

	/// <summary>
	/// 顯示單一訊息
	/// </summary>
	/// <param name="model"></param>
	/// <returns></returns>
	[HttpPost]
	[Route("ShowSingleMessage")]
	public IHttpActionResult ShowSingleMessage(MessageModel model)
	{
		hub.Clients.All.SingleMessage(model.Message);
		return Ok();
	}
}

補充：由於對Vue前端會有signalr跨域問題，因此需要設定如下:

WebApiConfig.cs

public static class WebApiConfig
	{
		public static void Register(HttpConfiguration config)
		{
			var cors = new EnableCorsAttribute("*", "*", "*");
			config.EnableCors(cors);
			
			//略...
		}
	}

Startup.cs

[assembly: OwinStartup(typeof(WebAPISignalR.Startup))]
namespace WebAPISignalR
{
	/// <summary>
	/// 初始
	/// </summary>
	public class Startup
	{
		/// <summary>
		/// 設定 SignalR 允許 Cors 跨域
		/// </summary>
		/// <param name="app"></param>
		public void Configuration(IAppBuilder app)
		{
			var hubConfiguration = new HubConfiguration();
			app.Map("/signalr", map =>
			{
				map.UseCors(CorsOptions.AllowAll);

				hubConfiguration.EnableJSONP = true;
				map.RunSignalR(hubConfiguration);
			});
			app.MapSignalR(hubConfiguration);
		}
	}
}

3.Vue專案：以vue-element-admin為基底的框架，也就是已經做好的Vue框架專案包、SignalR+jQuery 的相關的套件

前端需要安裝SignalR+jQuery的package並引用

npm i jquery signalr --S

main.js

import Vue from 'vue'
import jQuery from 'jquery'
import 'signalr'
//略...
new Vue({
  el: '#app',
  router,
  store,
  jQuery,
  render: h => h(App)
})

test.vue

<script>
window.jQuery = jQuery
require('signalr')

/**
     * SignalR呼叫
     */
    getData() {
      const vm = this

      // 下面對應到網址的部份
      const hub = jQuery.hubConnection(WebApiUrl)

      // 下面對應了.net的DefaultHub
      const proxy = hub.createHubProxy('BroadcastHub')

      proxy.on('SingleMessage', (data) => {
        //略...
      })
      hub.start()
    }
</script>

為避免忘記，特此記錄下來。