最近业务中需要实现服务器端与客户端的实时通信功能,对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.如何建立连接

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

Vue 结合 SignalR 实现前后端实时消息同步的更多相关文章

  1. .Net Core+Vue.js+ElementUI 实现前后端分离

    .Net Core+Vue.js+ElementUI 实现前后端分离 Tags: Vue 架构 前端采用:Vue.js.Element-UI.axios 后端采用:.Net Core Mvc 本项目是 ...

  2. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史

    ---新内容开始--- 番外 大家周一好呀,又是元气满满的一个周一呀!感谢大家在周一这个着急改Bug的黄金时期,抽出时间来看我的博文哈哈哈,时间真快,已经到第十四篇博文了,也很顺顺(跌跌)利利 (撞撞 ...

  3. vue.js+UEditor集成 [前后端分离项目]

    首先,谈下这篇文章中的前后端所涉及到的技术框架内容. 虽然是后端的管理项目,但整体项目,是采用前后端分离的方式完成,这样做的目的也是产品化的需求: 前端,vue+vuex+vue router+web ...

  4. 如何利用vue和php做前后端分离开发?

    新手上路,前端工程师,刚毕业参加工作两个月,上面让我用vue搭建环境和php工程师一起开发,做前后端分离,然而我只用过简单的vue做一些小组件的经验,完全不知道怎样和php工程师配合,ps: php那 ...

  5. vue+uwsgi+nginx部署前后端分离项目

    前后端分离,vue前端提供静态页面,且可以向后台发起get,post等restful请求. django后台提供数据支撑,返回json数据,返回给vue,进行数据页面渲染 后端 创建虚拟环境 解决dj ...

  6. Vue 应用 nginx 配置 前后端不分离模式

    一.先在官网下载nginx 软件,解压后放在软件盘中如D盘 将nginx 文件夹拖到编译器中,打开conf 文件夹中的 nginx.conf 文件,找到其中的server {} 配置项,默认35 行. ...

  7. 使用Vue+JFinal框架搭建前后端分离系统

    前后端分离作为Web开发的一种方式,现在应用越来越广泛.前端一般比较流行Vue.js框架,后端框架比较多,网上有很多Vue+SpringMVC前后端分离的demo,但是Vue+JFinal框架貌似没有 ...

  8. nginx+vue+uwsgi+django的前后端分离项目部署

    Vue+Django前后端分离项目部署,nginx默认端口80,数据提交监听端口9000,反向代理(uwsgi配置)端口9999 1.下载项目文件(统一在/opt/luffyproject目录) (1 ...

  9. SpringBoot+Vue豆宝社区前后端分离项目手把手实战系列教程01---搭建前端工程

    豆宝社区项目实战教程简介 本项目实战教程配有免费视频教程,配套代码完全开源.手把手从零开始搭建一个目前应用最广泛的Springboot+Vue前后端分离多用户社区项目.本项目难度适中,为便于大家学习, ...

随机推荐

  1. Spring框架的相关介绍

    Spring是一个开源轻量级的框架,它的核心是控制反转(IOC)和面向切面编程(AOP). 作为业务层框架的spring能够很好地整合表现层跟持久层. IOC:将类的创建和依赖关系写到配置文件里,可以 ...

  2. Gallery -- 横向不断滚动 demo

    <%@ Page Language="C#" AutoEventWireup="true" %> <!DOCTYPE html> < ...

  3. Web前端基础(6):CSS(三)

    1. 定位 定位有三种:相对定位.绝对定位.固定定位 1.1 相对定位 现象和使用: 1.如果对当前元素仅仅设置了相对定位,那么与标准流的盒子什么区别. 2.设置相对定位之后,我们才可以使用四个方向的 ...

  4. 通过SSH通道来访问MySQL

     许多时候当要使用Mysql时,会遇到如下情况: 1. 信息比较重要,希望通信被加密.2. 一些端口,比如3306端口,被路由器禁用. 对第一个问题的一个比较直接的解决办法就是更改mysql的代码,或 ...

  5. MVC模式和Spring MVC初识

    概述 传统的Model1和Model2 在Model1的模式下,整个Web应用几乎全部是由JSP页面组成,接受和处理用户请求,并对请求处理后直接做出响应:JSP身兼View和Controller两个角 ...

  6. 自学_CSS<二>

    CSS CSS(层叠样式表)是用来美化页面用的,可以对页面元素进行更精细的设置,样式主要描述元素的字体颜色.背景颜色.边框等. CSS主要有元素内联.页面嵌入和外部引用三种使用方式.CSS是描述元素的 ...

  7. AwaitAsync(异步和多线程)

    参考了一些大佬写的文章: https://www.cnblogs.com/yilezhu/p/10555849.html这个大佬写的文章,我还是很喜欢的 https://www.cnblogs.com ...

  8. Spring高频面试题,你能答的上哪些?(高级篇)

    1.什么是 Spring 框架?Spring 框架有哪些主要模块? 2.使用 Spring 框架能带来哪些好处? 3.什么是控制反转(IOC)?什么是依赖注入? 4.请解释下 Spring 框架中的 ...

  9. webUploader上传大视频文件相关web.config配置

    在webuploader上传大文件时必须配置一下,不然请求后台处理程序时,会请求超时.出现404! <system.web> <httpRuntime maxRequestLengt ...

  10. [b0027] python 归纳 (十二)_并发队列Queue的使用

    # -*- coding: UTF-8 -*- """ 学习队列 Queue 总结: 1. 队列可以设置大小,也可以无限大小 2. 空了,满了,读写时可以阻塞,也可以报错 ...