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

最近业务中需要实现服务器端与客户端的实时通信功能，对Signalr做了一点总结和整理。

SignalR 作为  ASP.NET 的一个库，能够简单方便地为应用提供实时的服务器端与客户端双向通信功能。

SignalR 在客户端方面有两种API：Connections 和 Hubs。

在特殊情况下，比如发送消息的格式是特定不变时，使用Connections API。

大多数情况下使用Hubs，因为它是 Connections API 更高级的一种实现，允许客户端与服务端相互直接调用方法。一个实际应用的具体场景，比如服务端获取到新订单时，调用客户端的打印方法，客户端打印完成后，调用服务端的订单状态更新方法。

下面介绍 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'); });