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


Posted in Javascript onSeptember 19, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习笔记之2个小技巧
Jan 19 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
js仿微博动态栏功能
Feb 22 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
Js中async/await的执行顺序详解
Sep 22 Javascript
js判断节假日实例代码
Dec 27 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 #Javascript
vue实现页面加载动画效果
Sep 19 #Javascript
深入理解Node.js中通用基础设计模式
Sep 19 #Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 #Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 #Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 #Javascript
JavaScript 中的 this 简单规则
Sep 19 #Javascript
You might like
基础的WordPress插件制作教程
2015/11/24 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
Python MySQLdb Linux下安装笔记
2015/05/09 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
css3的transition属性详解
2014/12/15 HTML / CSS
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
什么是网络协议
2016/04/07 面试题
酷瑞网络科技面试题
2012/03/30 面试题
打架检讨书2000字
2014/02/22 职场文书
优秀实习生感言
2014/03/01 职场文书
公司合作意向书范文
2014/07/30 职场文书
大学生团日活动总结
2015/05/06 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python
golang生成vcf通讯录格式文件详情
2022/03/25 Golang