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

发布时间：2020-12-17 02:47:29 所属栏目：百科来源：网络整理

导读：最近业务中需要实现服务器端与客户端的实时通信功能，对Signalr做了一点总结和整理。 SignalR 作为 ASP.NET 的一个库，能够简单方便地为应用提供实时的服务器端与客户端双向通信功能。 SignalR 在客户端方面有两种API：Connections 和 Hubs。在特殊情况下，

最近业务中需要实现服务器端与客户端的实时通信功能，对Signalr做了一点总结和整理。

SignalR 作为 ASP.NET 的一个库，能够简单方便地为应用提供实时的服务器端与客户端双向通信功能。

SignalR 在客户端方面有两种API：Connections 和 Hubs。

在特殊情况下，比如发送消息的格式是特定不变时，使用Connections API。

大多数情况下使用Hubs，因为它是 Connections API 更高级的一种实现，允许客户端与服务端相互直接调用方法。一个实际应用的具体场景，比如服务端获取到新订单时，调用客户端的打印方法，客户端打印完成后，调用服务端的订单状态更新方法。

下面介绍 Hubs 在前端的 API

generated proxy

当使用generated proxy的时候，在语法层面上可以更加简单地调用服务端方法，就像在服务端直接调用。

如下面是服务端的代码，表示新增一条聊天信息到列表

客户端调用的时候：

$('#newChatMessage').click(function () {
demoChatHubProxy.server.newChatMessage($('#displayname').val(),$('#message').val());
});
});

不使用 generated proxy 时,客户端调用的时候则是

但是在Vue项目里面，如果前后端分离，不会这样引用：

而且在客户端方法中如果要使用多个事件处理器时，不能使用generated proxy。

因此后面的例子不采取generated proxy的方式。

1.如何建立连接

需要注意的是，开始连接之前（调用 start 方法之前），最好注册至少一个事件处理方法，

2.客户端如何调用服务器端方法

使用 invoke，注意调用服务器端的方法名首字母可以不大写，如果方法名称要限制必须大写，需要后端做配置。

3. 服务器端调用客户端方法

首先客户端要注册方法才能让服务器端调用，使用 on 方法注册。

4 在Vue项目中使用SignalR

首先安装 SignalR 的package，需要注意的是 SignalR 依赖 jQuery。

为了方便，在webpack.base.conf.js中注册全局的jQuery

然后在main.js中引入 SignalR

这时候就可以在Vue项目中使用SignalR了，后端的相关配置暂时略过。

新建一个signalr.js

/客户端调用服务器端方法/
//更新订单打印次数
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方法即可建立连接。

了解更多

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!