欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue結(jié)合SignalR實現(xiàn)前后端實時消息同步

 更新時間:2017年09月19日 11:42:53   作者:lymne  
這篇文章主要為大家詳細介紹了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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue使用 onMounted 確保在組件掛載后執(zhí)行異步操作示例詳解

    Vue使用 onMounted 確保在組件掛載后執(zhí)行異步操作示例詳解

    在 Vue.js 或其他類似框架中,使用 onMounted 是為了確保在組件掛載后執(zhí)行異步操作,這篇文章主要介紹了Vue使用onMounted確保在組件掛載后執(zhí)行異步操作,需要的朋友可以參考下
    2023-06-06
  • antd的select下拉框因為數(shù)據(jù)量太大造成卡頓的解決方式

    antd的select下拉框因為數(shù)據(jù)量太大造成卡頓的解決方式

    這篇文章主要介紹了antd的select下拉框因為數(shù)據(jù)量太大造成卡頓的解決方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • vue3 微信掃碼登錄及獲取個人信息實現(xiàn)的三種方法

    vue3 微信掃碼登錄及獲取個人信息實現(xiàn)的三種方法

    本文主要介紹了vue3 微信掃碼登錄及獲取個人信息實現(xiàn)的三種方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-03-03
  • VUE-ElementUI?時間區(qū)間選擇器的使用

    VUE-ElementUI?時間區(qū)間選擇器的使用

    這篇文章主要介紹了VUE-ElementUI?時間區(qū)間選擇器的使用,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • Vue3 SFC 和 TSX 方式自定義組件實現(xiàn) v-model的詳細過程

    Vue3 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-10
  • Vue封裝通過API調(diào)用的組件的方法詳解

    Vue封裝通過API調(diào)用的組件的方法詳解

    在日常業(yè)務(wù)開發(fā)中我們會經(jīng)常封裝一些業(yè)務(wù)組件,下面這篇文章主要給大家介紹了關(guān)于Vue封裝通過API調(diào)用的組件的方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-12-12
  • Vue中computed和watch的區(qū)別

    Vue中computed和watch的區(qū)別

    在vue項目中我們常常需要用到computed和watch,那么我們究竟在什么場景下使用computed和watch呢?他們之間又有什么區(qū)別呢?本將給大家詳細的介紹一下,需要的朋友可以參考下
    2023-05-05
  • Element-UI控件Tree實現(xiàn)數(shù)據(jù)樹形結(jié)構(gòu)的方法

    Element-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-01
  • vueScroll實現(xiàn)移動端下拉刷新、上拉加載

    vueScroll實現(xiàn)移動端下拉刷新、上拉加載

    這篇文章主要介紹了vueScroll實現(xiàn)移動端下拉刷新、上拉加載,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • Vue.js watch監(jiān)視屬性知識點總結(jié)

    Vue.js watch監(jiān)視屬性知識點總結(jié)

    在本篇文章里小編給大家分享的是關(guān)于Vue.js watch監(jiān)視屬性的相關(guān)知識點內(nèi)容,需要的朋友們學(xué)習(xí)下。
    2019-11-11

最新評論