时间:2021-05-26
最近业务中需要实现服务器端与客户端的实时通信功能,对Signalr做了一点总结和整理。
SignalR 作为 ASP.NET 的一个库,能够简单方便地为应用提供实时的服务器端与客户端双向通信功能。
SignalR 在客户端方面有两种API:Connections 和 Hubs。
在特殊情况下,比如发送消息的格式是特定不变时,使用Connections API。
大多数情况下使用Hubs,因为它是 Connections API 更高级的一种实现,允许客户端与服务端相互直接调用方法。一个实际应用的具体场景,比如服务端获取到新订单时,调用客户端的打印方法,客户端打印完成后,调用服务端的订单状态更新方法。
下面介绍 Hubs 在前端的 API
generated proxy
当使用generated proxy的时候,在语法层面上可以更加简单地调用服务端方法,就像在服务端直接调用。
如下面是服务端的代码,表示新增一条聊天信息到列表
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()); });});不使用 generated proxy 时,客户端调用的时候则是
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.如何建立连接
需要注意的是,开始连接之前(调用 start 方法之前),最好注册至少一个事件处理方法,如果没有注册的话,Hubs的 OnConnected 方法将不会被调用,那么客户端的方法就不能被服务端调用(这容易埋坑,所以要提前注册方法)。
2.客户端如何调用服务器端方法
使用 invoke,注意调用服务器端的方法名首字母可以不大写,如果方法名称要限制必须大写,需要后端做配置。
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}// 手动创建proxyexport 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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
php和vue可以配合使用,我们可以利用vue和php进行前后端分离。进行前后端分离的好处前后端分离后可以使前后端工程师分工更加明确,让后端工程师专注于业务逻辑
本文介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码,分享给大家,也给自己留个笔记。在项目中尝试了mockjs,mock数据,实现前后端分离开发。
Vue-CLI项目-axios模块前后端交互(类似ajax提交)08.31自我总结,内容如下:Vue-CLI项目-axios前后端交互一.模块的安装npmins
踩坑Axios提交form表单几种格式前后端分离的开发前后端,前端使用的vue,后端的安全模块使用的SpringSecurity,使用postman测试后端的权
前后端分离项目,前后端共用一个域名。通过域名后的url前缀来区别前后端项目。以vue+php项目为例。直接上server模块的nginx配置。?12345678