最近業(yè)務中需要實現服務器端與客戶端的實時通信功能，對Signalr做了一點總結和整理。

SignalR 作為  ASP.NET 的一個庫，能夠簡單方便地為應用提供實時的服務器端與客戶端雙向通信功能。

SignalR 在客戶端方面有兩種API：Connections 和 Hubs。

在特殊情況下，比如發(fā)送消息的格式是特定不變時，使用Connections API。

大多數情況下使用Hubs，因為它是 Connections API 更高級的一種實現，允許客戶端與服務端相互直接調用方法。一個實際應用的具體場景，比如服務端獲取到新訂單時，調用客戶端的打印方法，客戶端打印完成后，調用服務端的訂單狀態(tài)更新方法。

下面介紹 Hubs 在前端的 API

generated proxy

當使用generated proxy的時候，在語法層面上可以更加簡單地調用服務端方法，就像在服務端直接調用。

如下面是服務端的代碼，表示新增一條聊天信息到列表

public class DemoChatHub : Hub{  public void NewChatMessage(string name, string message)  {    Clients.All.addMessageToList(name, message);  }}

客戶端調用的時候：

var demoChatHubProxy = $.connection.DemoChatHub;demoChatHubProxy.client.addMessageToList = function (name, message) {  console.log(name + ' ' + message);};$.connection.hub.start().done(function () {   $('#newChatMessage').click(function () {     demoChatHubProxy.server.newChatMessage($('#displayname').val(), $('#message').val());   });});

不使用 generated proxy 時,客戶端調用的時候則是

var connection = $.hubConnection();var demoChatHubProxy = connection.createHubProxy('demoChatHub');demoChatHubProxy.on('addMessageToList', function(name, message) {  console.log(name + ' ' + message);});connection.start().done(function() {  $('#newChatMessage').click(function () {    demoChatHubProxy.invoke('newChatMessage', $('#displayname').val(), $('#message').val());    });});

但是在Vue項目里面，如果前后端分離，不會這樣引用：

<script src="@Url.Content("~/signalr/hubs")" type="text/javascript"></script>

而且在客戶端方法中如果要使用多個事件處理器時，不能使用generated proxy。

因此后面的例子不采取generated proxy的方式。

1.如何建立連接

var connection = $.hubConnection('localhost:23123');//如果前后端為同一個端口，可不填參數。如果前后端分離，這里參數為服務器端的URLvar demoChatHubProxy = connection.createHubProxy('demoChatHub');demoChatHubProxy.on('addMessageToList', function(userName, message) {  console.log(userName + ' ' + message);}); connection.start()  .done(function(){ console.log('Now connected, connection ID=' + connection.id); })  .fail(function(){ console.log('Could not connect'); });