Vue結(jié)合SignalR實現(xiàn)前后端實時消息同步
最近業(yè)務(wù)中需要實現(xiàn)服務(wù)器端與客戶端的實時通信功能,對Signalr做了一點總結(jié)和整理。
SignalR 作為 ASP.NET 的一個庫,能夠簡單方便地為應(yīng)用提供實時的服務(wù)器端與客戶端雙向通信功能。
SignalR 在客戶端方面有兩種API:Connections 和 Hubs。
在特殊情況下,比如發(fā)送消息的格式是特定不變時,使用Connections API。
大多數(shù)情況下使用Hubs,因為它是 Connections API 更高級的一種實現(xiàn),允許客戶端與服務(wù)端相互直接調(diào)用方法。一個實際應(yīng)用的具體場景,比如服務(wù)端獲取到新訂單時,調(diào)用客戶端的打印方法,客戶端打印完成后,調(diào)用服務(wù)端的訂單狀態(tài)更新方法。
下面介紹 Hubs 在前端的 API
generated proxy
當(dāng)使用generated proxy的時候,在語法層面上可以更加簡單地調(diào)用服務(wù)端方法,就像在服務(wù)端直接調(diào)用。
如下面是服務(wù)端的代碼,表示新增一條聊天信息到列表
public class DemoChatHub : Hub { public void NewChatMessage(string name, string message) { Clients.All.addMessageToList(name, message); } }
客戶端調(diào)用的時候:
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 時,客戶端調(diào)用的時候則是
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');//如果前后端為同一個端口,可不填參數(shù)。如果前后端分離,這里參數(shù)為服務(wù)器端的URL var 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'); });
需要注意的是,開始連接之前(調(diào)用 start 方法之前),最好注冊至少一個事件處理方法,如果沒有注冊的話,Hubs的 OnConnected 方法將不會被調(diào)用,那么客戶端的方法就不能被服務(wù)端調(diào)用(這容易埋坑,所以要提前注冊方法)。
2.客戶端如何調(diào)用服務(wù)器端方法
使用 invoke,注意調(diào)用服務(wù)器端的方法名首字母可以不大寫,如果方法名稱要限制必須大寫,需要后端做配置。
demoChatHubProxy.invoke('newChatMessage', {name:'a',message:'b'});
3. 服務(wù)器端調(diào)用客戶端方法
首先客戶端要注冊方法才能讓服務(wù)器端調(diào)用,使用 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了,后端的相關(guān)配置暫時略過。
新建一個signalr.js
import { Message } from 'element-ui'; const HUBNAME = 'DefaultHub'; /*客戶端調(diào)用服務(wù)器端方法*/ //更新訂單打印次數(shù) const updateOrderPrint = { name:'updateOrderPrint', method:function(data){ console.log(data) } } /*服務(wù)器調(diào)用客戶端方法*/ // 打印新訂單 const printNewOrder = { name:'printNewOrder', method:function(data){ console.log(data) } } const get = { name:'Get', method:function(data){ console.log(data) } } //服務(wù)器端的方法 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 } // 手動創(chuàng)建proxy export function createHubProxy(hub){ let proxy = hub.createHubProxy(HUBNAME) // 注冊客戶端方法 clientMethodSets.map((item)=>{ proxy.on(item.name,item.method) }) return proxy }
這樣,在組件引入signalr.js后調(diào)用startConnection方法即可建立連接。
了解更多 https://github.com/SignalR/SignalR
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue使用stompjs實現(xiàn)mqtt消息推送通知
- vue實現(xiàn)消息的無縫滾動效果的示例代碼
- 用Vue.extend構(gòu)建消息提示組件的方法實例
- vue彈窗消息組件的使用方法
- 最簡單的vue消息提示全局組件的方法
- vue 實現(xiàn)websocket發(fā)送消息并實時接收消息
- Vue $mount實戰(zhàn)之實現(xiàn)消息彈窗組件
- 解決vue自定義全局消息框組件問題
- Vue中消息橫向滾動時setInterval清不掉的問題及解決方法
- vue 自定義組件的寫法與用法詳解
- vue2.0 自定義組件的方法(vue組件的封裝)
- vue從零實現(xiàn)一個消息通知組件的方法詳解
相關(guān)文章
Vue使用 onMounted 確保在組件掛載后執(zhí)行異步操作示例詳解
在 Vue.js 或其他類似框架中,使用 onMounted 是為了確保在組件掛載后執(zhí)行異步操作,這篇文章主要介紹了Vue使用onMounted確保在組件掛載后執(zhí)行異步操作,需要的朋友可以參考下2023-06-06antd的select下拉框因為數(shù)據(jù)量太大造成卡頓的解決方式
這篇文章主要介紹了antd的select下拉框因為數(shù)據(jù)量太大造成卡頓的解決方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10vue3 微信掃碼登錄及獲取個人信息實現(xiàn)的三種方法
本文主要介紹了vue3 微信掃碼登錄及獲取個人信息實現(xiàn)的三種方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03Vue3 SFC 和 TSX 方式自定義組件實現(xiàn) v-model的詳細
v-model 是 vue3 中的一個內(nèi)置指令,很多表單元素都可以使用這個屬性,如 input、checkbox 等,咱可以在自定義組件中實現(xiàn) v-model,這篇文章主要介紹了Vue3 SFC 和 TSX 方式自定義組件實現(xiàn) v-model,需要的朋友可以參考下2022-10-10Element-UI控件Tree實現(xiàn)數(shù)據(jù)樹形結(jié)構(gòu)的方法
這篇文章主要介紹了Element-UI控件Tree實現(xiàn)數(shù)據(jù)樹形結(jié)構(gòu),本期介紹添加、修改等功能也比較簡單,可以通過element-ui的$prompt彈框控件來實現(xiàn),需要的朋友可以參考下2024-01-01Vue.js watch監(jiān)視屬性知識點總結(jié)
在本篇文章里小編給大家分享的是關(guān)于Vue.js watch監(jiān)視屬性的相關(guān)知識點內(nèi)容,需要的朋友們學(xué)習(xí)下。2019-11-11