phpsignalr_Vue结合SignalR前后端实时消息同步实现方法

本文主要为大家介绍Vue结合SignalR实现前后端实时消息同步&＃xff0c;具有一定的参考价值&＃xff0c;感兴趣的小伙伴们可以参考一下&＃xff0c;希望能帮助到大家。

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

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

SignalR 在客户端方面有两种API&＃xff1a;Connections 和 Hubs。

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

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

下面介绍 Hubs 在前端的 API

generated proxy

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

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

public class DemoChatHub : Hub

{

public void NewChatMessage(string name, string message)

{

Clients.All.addMessageToList(name, message);

}

}

客户端调用的时候&＃xff1a;

var demoChatHubProxy &＃61; $.connection.DemoChatHub;

demoChatHubProxy.client.addMessageToList &＃61; function (name, message) {

console.log(name &＃43; &＃39; &＃39; &＃43; message);

};

$.connection.hub.start().done(function () {

$(&＃39;#newChatMessage&＃39;).click(function () {

demoChatHubProxy.server.newChatMessage($(&＃39;#displayname&＃39;).val(), $(&＃39;#message&＃39;).val());

});

});

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

var connection &＃61; $.hubConnection();

var demoChatHubProxy &＃61; connection.createHubProxy(&＃39;demoChatHub&＃39;);

demoChatHubProxy.on(&＃39;addMessageToList&＃39;, function(name, message) {

console.log(name &＃43; &＃39; &＃39; &＃43; message);

});

connection.start().done(function() {

$(&＃39;#newChatMessage&＃39;).click(function () {

demoChatHubProxy.invoke(&＃39;newChatMessage&＃39;, $(&＃39;#displayname&＃39;).val(), $(&＃39;#message&＃39;).val());

});

});

但是在Vue项目里面&＃xff0c;如果前后端分离&＃xff0c;不会这样引用&＃xff1a;

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

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

1.如何建立连接

var connection &＃61; $.hubConnection(&＃39;localhost:23123&＃39;);//如果前后端为同一个端口&＃xff0c;可不填参数。如果前后端分离&＃xff0c;这里参数为服务器端的URL

var demoChatHubProxy &＃61; connection.createHubProxy(&＃39;demoChatHub&＃39;);

demoChatHubProxy.on(&＃39;addMessageToList&＃39;, function(userName, message) {

console.log(userName &＃43; &＃39; &＃39; &＃43; message);

});

connection.start()

.done(function(){ console.log(&＃39;Now connected, connection ID&＃61;&＃39; &＃43; connection.id); })

.fail(function(){ console.log(&＃39;Could not connect&＃39;); });

需要注意的是&＃xff0c;开始连接之前(调用 start 方法之前)&＃xff0c;最好注册至少一个事件处理方法&＃xff0c;如果没有注册的话&＃xff0c;Hubs的 OnConnected 方法将不会被调用&＃xff0c;那么客户端的方法就不能被服务端调用(这容易埋坑&＃xff0c;所以要提前注册方法)。

2.客户端如何调用服务器端方法使用 invoke&＃xff0c;注意调用服务器端的方法名首字母可以不大写&＃xff0c;如果方法名称要限制必须大写&＃xff0c;需要后端做配置。

demoChatHubProxy.invoke(&＃39;newChatMessage&＃39;, {name:&＃39;a&＃39;,message:&＃39;b&＃39;});

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

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

demoChatHubProxy.on(&＃39;addMessageToList&＃39;, function(userName, message) {

console.log(userName &＃43; &＃39; &＃39; &＃43; message);

});

4 在Vue项目中使用SignalR

首先安装 SignalR 的package&＃xff0c;需要注意的是 SignalR 依赖 jQuery。

npm i signalr,jquery

为了方便&＃xff0c;在webpack.base.conf.js中注册全局的jQuery

plugins: [new webpack.ProvidePlugin({

$: &＃39;jquery&＃39;,

jQuery: &＃39;jquery&＃39;,

&＃39;window.jQuery&＃39;: &＃39;jquery&＃39;,

&＃39;root.jQuery&＃39;: &＃39;jquery&＃39;

})

]

然后在main.js中引入 SignalR

import &＃39;signalr&＃39;

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

新建一个signalr.js

import { Message } from &＃39;element-ui&＃39;;

const HUBNAME &＃61; &＃39;DefaultHub&＃39;;

/*客户端调用服务器端方法*/

//更新订单打印次数

const updateOrderPrint &＃61; {

name:&＃39;updateOrderPrint&＃39;,

method:function(data){

console.log(data)

}

}

/*服务器调用客户端方法*/

// 打印新订单

const printNewOrder &＃61; {

name:&＃39;printNewOrder&＃39;,

method:function(data){

console.log(data)

}

}

const get &＃61; {

name:&＃39;Get&＃39;,

method:function(data){

console.log(data)

}

}

//服务器端的方法

const serverMethodSets &＃61; [updateOrderPrint];

//客户端的方法

const clientMethodSets &＃61; [printNewOrder,get]; //将需要注册的方法放进集合

// 建立连接

export function startConnection() {

let hub &＃61; $.hubConnection(process.env.HUB_API)

let proxy &＃61; createHubProxy(hub) //需要先注册方法再连接

hub.start().done((connection) &＃61;>{

console.log(&＃39;Now connected, connection ID&＃61;&＃39; &＃43; connection.id)

}).fail(()&＃61;>{

Message(&＃39;连接失败&＃39; &＃43; error);

console.log(&＃39;Could not connect&＃39;);

})

hub.error(function (error) {

Message(&＃39;SignalR error: &＃39; &＃43; error);

console.log(&＃39;SignalR error: &＃39; &＃43; error)

})

hub.connectionSlow(function () {

console.log(&＃39;We are currently experiencing difficulties with the connection.&＃39;)

});

hub.disconnected(function () {

console.log(&＃39;disconnected&＃39;)

});

return proxy

}

// 手动创建proxy

export function createHubProxy(hub){

let proxy &＃61; hub.createHubProxy(HUBNAME)

// 注册客户端方法

clientMethodSets.map((item)&＃61;>{

proxy.on(item.name,item.method)

})

return proxy

}

这样&＃xff0c;在组件引入signalr.js后调用startConnection方法即可建立连接。

相关推荐&＃xff1a;