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

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());
   });
});

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());
    });
});

<script src="/UploadFiles/2021-04-02/@Url.Content(">

而且在客户端方法中如果要使用多个事件处理器时，不能使用generated proxy。
因此后面的例子不采取generated proxy的方式。
1.如何建立连接




var connection = $.hubConnection('localhost:23123');//如果前后端为同一个端口，可不填参数。如果前后端分离，这里参数为服务器端的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'); });



需要注意的是，开始连接之前（调用 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
}
// 手动创建proxy
export 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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。