热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

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

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

最近业务中需要实现服务器端与客户端的实时通信功能,对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项目里面,如果前后端分离,不会这样引用:

而且在客户端方法中如果要使用多个事件处理器时,不能使用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方法即可建立连接。

相关推荐:



推荐阅读
  • 本文基于Java官方文档进行了适当修改,旨在介绍如何实现一个能够同时处理多个客户端请求的服务端程序。在前文中,我们探讨了单客户端访问的服务端实现,而本篇将深入讲解多客户端环境下的服务端设计与实现。 ... [详细]
  • D17:C#设计模式之十六观察者模式(Observer Pattern)【行为型】
    一、引言今天是2017年11月份的最后一天,也就是2017年11月30日,利用今天再写一个模式,争取下个月(也就是12月份& ... [详细]
  • 本文介绍了如何使用Node.js通过两种不同的方法连接MongoDB数据库,包括使用MongoClient对象和连接字符串的方法。每种方法都有其特点和适用场景,适合不同需求的开发者。 ... [详细]
  • 本文详细介绍了Oracle 11g中的创建表空间的方法,以及如何设置客户端和服务端的基本配置,包括用户管理、环境变量配置等。 ... [详细]
  • 本文探讨了使用Python实现监控信息收集的方法,涵盖从基础的日志记录到复杂的系统运维解决方案,旨在帮助开发者和运维人员提升工作效率。 ... [详细]
  • 函子(Functor)是函数式编程中的一个重要概念,它不仅是一个特殊的容器,还提供了一种优雅的方式来处理值和函数。本文将详细介绍函子的基本概念及其在函数式编程中的应用,包括如何通过函子控制副作用、处理异常以及进行异步操作。 ... [详细]
  • Docker安全策略与管理
    本文探讨了Docker的安全挑战、核心安全特性及其管理策略,旨在帮助读者深入理解Docker安全机制,并提供实用的安全管理建议。 ... [详细]
  • 本文详细介绍了如何在Oracle VM VirtualBox中实现主机与虚拟机之间的数据交换,包括安装Guest Additions增强功能,以及如何利用这些功能进行文件传输、屏幕调整等操作。 ... [详细]
  • Java虚拟机及其发展历程
    Java虚拟机(JVM)是每个Java开发者日常工作中不可或缺的一部分,但其背后的运作机制却往往显得神秘莫测。本文将探讨Java及其虚拟机的发展历程,帮助读者深入了解这一关键技术。 ... [详细]
  • 本文详细介绍了在Luat OS中如何实现C与Lua的混合编程,包括在C环境中运行Lua脚本、封装可被Lua调用的C语言库,以及C与Lua之间的数据交互方法。 ... [详细]
  • 本文探讨了Python类型注解使用率低下的原因,主要归结于历史背景和投资回报率(ROI)的考量。文章不仅分析了类型注解的实际效用,还回顾了Python类型注解的发展历程。 ... [详细]
  • 二维码的实现与应用
    本文介绍了二维码的基本概念、分类及其优缺点,并详细描述了如何使用Java编程语言结合第三方库(如ZXing和qrcode.jar)来实现二维码的生成与解析。 ... [详细]
  • 本文详细介绍了在Windows系统中如何配置Nginx以实现高效的缓存加速功能,包括关键的配置文件设置和示例代码。 ... [详细]
  • 本文介绍了如何通过命令行有效地终止所有 Node.js 进程实例,以解决因端口冲突或其他服务冲突导致的问题。 ... [详细]
  • 问题场景用Java进行web开发过程当中,当遇到很多很多个字段的实体时,最苦恼的莫过于编辑字段的查看和修改界面,发现2个页面存在很多重复信息,能不能写一遍?有没有轮子用都不如自己造。解决方式笔者根据自 ... [详细]
author-avatar
区小靜
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有