Vue結合SignalR前後端即時訊息同步實作方法-js教程-PHP中文網

本文主要為大家介紹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 + &#39; &#39; + message);
};
$.connection.hub.start().done(function () {
 
  $(&#39;#newChatMessage&#39;).click(function () {
     demoChatHubProxy.server.newChatMessage($(&#39;#displayname&#39;).val(), $(&#39;#message&#39;).val());
   });
});

登入後複製

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

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

登入後複製

但是在Vue專案裡面，如果前後端分離，不會這樣引用：

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

登入後複製

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

因此後面的範例不採取generated proxy的方式。

1.如何建立連線

var connection = $.hubConnection(&#39;localhost:23123&#39;);//如果前后端为同一个端口，可不填参数。如果前后端分离，这里参数为服务器端的URL
var demoChatHubProxy = connection.createHubProxy(&#39;demoChatHub&#39;);
demoChatHubProxy.on(&#39;addMessageToList&#39;, function(userName, message) {
  console.log(userName + &#39; &#39; + message);
}); 
connection.start()
  .done(function(){ console.log(&#39;Now connected, connection ID=&#39; + connection.id); })
  .fail(function(){ console.log(&#39;Could not connect&#39;); });

登入後複製

需要注意的是，開始連線之前（在呼叫start 方法之前），最好註冊至少一個事件處理方法，如果沒有註冊的話，Hubs的OnConnected 方法將不會被調用，那麼客戶端的方法就不能被服務端調用（這容易埋坑，所以要提前註冊方法）。

2.客戶端如何呼叫伺服器端方法
使用invoke，注意呼叫伺服器端的方法名稱首字母可以不大寫，如果方法名稱要限制必須大寫，需要後端做配置。

demoChatHubProxy.invoke(&#39;newChatMessage&#39;, {name:&#39;a&#39;,message:&#39;b&#39;});

登入後複製

3. 伺服器端呼叫客戶端方法

首先客戶端要註冊方法才能讓伺服器端呼叫，使用on 方法註冊。

demoChatHubProxy.on(&#39;addMessageToList&#39;, function(userName, message) {
  console.log(userName + &#39; &#39; + message);
});

登入後複製

4 在Vue專案中使用SignalR

先安裝SignalR 的package，需要注意的是SignalR 依賴jQuery。

npm i signalr,jquery

#為了方便，在webpack.base.conf.js中註冊全域的jQuery

plugins: [new webpack.ProvidePlugin({
      $: &#39;jquery&#39;,
      jQuery: &#39;jquery&#39;,
      &#39;window.jQuery&#39;: &#39;jquery&#39;,
      &#39;root.jQuery&#39;: &#39;jquery&#39;
    })
  ]

登入後複製

然後在main.js中引入SignalR

import 'signalr'

這時候就可以在Vue專案中使用SignalR了，後端的相關配置暫時略過。

新建一個signalr.js

import { Message } from &#39;element-ui&#39;;
const HUBNAME = &#39;DefaultHub&#39;;

/*客户端调用服务器端方法*/
//更新订单打印次数
const updateOrderPrint = {
  name:&#39;updateOrderPrint&#39;,
  method:function(data){
    console.log(data)
  }
}

/*服务器调用客户端方法*/
// 打印新订单
const printNewOrder = {
  name:&#39;printNewOrder&#39;,
  method:function(data){
    console.log(data)
  }
}
const get = {
  name:&#39;Get&#39;,
  method:function(data){
    console.log(data)
  }
}

//服务器端的方法
const serverMethodSets = [updateOrderPrint];
//客户端的方法
const clientMethodSets = [printNewOrder,get]; //将需要注册的方法放进集合

// 建立连接
export function startConnection() {
  let hub = $.hubConnection(process.env.HUB_API)
  let proxy = createHubProxy(hub) //需要先注册方法再连接
  hub.start().done((connection) =>{
    console.log(&#39;Now connected, connection ID=&#39; + connection.id)
  }).fail(()=>{
    Message(&#39;连接失败&#39; + error);
    console.log(&#39;Could not connect&#39;);
  })
  hub.error(function (error) {
    Message(&#39;SignalR error: &#39; + error);
    console.log(&#39;SignalR error: &#39; + error)
  })
  hub.connectionSlow(function () {
    console.log(&#39;We are currently experiencing difficulties with the connection.&#39;)
  });
  hub.disconnected(function () {
    console.log(&#39;disconnected&#39;)
  });
  return proxy
}
// 手动创建proxy
export function createHubProxy(hub){
  let proxy = hub.createHubProxy(HUBNAME)
  // 注册客户端方法
  clientMethodSets.map((item)=>{
    proxy.on(item.name,item.method)
  })
  return proxy
}

登入後複製

這樣，在元件引入signalr.js後呼叫startConnection方法即可建立連線。