最近業務中需要實現服務器端與客戶端的實時通信功能，對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'); });需要注意的是，開始連接之前（調用 start 方法之前），最好注冊至少一個事件處理方法，如果沒有注冊的話，Hubs的 OnConnected 方法將不會被調用，那么客戶端的方法就不能被服務端調用（這容易埋坑，所以要提前注冊方法）。
2.客戶端如何調用服務器端方法
使用 invoke，注意調用服務器端的方法名首字母可以不大寫，如果方法名稱要限制必須大寫，需要后端做配置。
demoChatHubProxy.invoke('newChatMessage', {name:'a',message:'b'});3. 服務器端調用客戶端方法
首先客戶端要注冊方法才能讓服務器端調用，使用 on 方法注冊。
demoChatHubProxy.on('addMessageToList', function(userName, message) { console.log(userName + ' ' + message);});4 在Vue項目中使用SignalR
首先安裝 SignalR 的package，需要注意的是 SignalR 依賴 jQuery。
npm i signalr,jquery
為了方便，在webpack.base.conf.js中注冊全局的jQuery
plugins: [new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', 'root.jQuery': 'jquery' }) ]然后在main.js中引入 SignalR
import 'signalr'
這時候就可以在Vue項目中使用SignalR了，后端的相關配置暫時略過。
新建一個signalr.js
import { Message } from 'element-ui';const HUBNAME = 'DefaultHub';/*客戶端調用服務器端方法*///更新訂單打印次數const updateOrderPrint = { name:'updateOrderPrint', method:function(data){ console.log(data) }}/*服務器調用客戶端方法*/// 打印新訂單const printNewOrder = { name:'printNewOrder', method:function(data){ console.log(data) }}const get = { name:'Get', 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('Now connected, connection ID=' + connection.id) }).fail(()=>{ Message('連接失敗' + error); console.log('Could not connect'); }) hub.error(function (error) { Message('SignalR error: ' + error); console.log('SignalR error: ' + error) }) hub.connectionSlow(function () { console.log('We are currently experiencing difficulties with the connection.') }); hub.disconnected(function () { console.log('disconnected') }); return proxy}// 手動創建proxyexport function createHubProxy(hub){ let proxy = hub.createHubProxy(HUBNAME) // 注冊客戶端方法 clientMethodSets.map((item)=>{ proxy.on(item.name,item.method) }) return proxy}這樣，在組件引入signalr.js后調用startConnection方法即可建立連接。
了解更多 https://github.com/SignalR/SignalR
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
