SignalR的服务端提供了两种实现方式,分别是PersistentConnection和Hub,这两种方式的侧重点不同:

PersistentConnection更接近于底层,编程接口比较简单,传输的数据格式为纯文本,客户端只需要调用发送和定义接收方法就可以实现跟服务端的交互。

Hub则位于更高的层次,更加的面向对象,定义了服务端方法和客户端方法,客户端通过代理对象调用服务端方法,通过客户端方法获取服务返回结果。

下图是这两个服务端API在整个SignalR中的所处位置(引用自SignalR Programming In Microsoft ASP.NET)

两种不同的服务端实现方式,其对应的客户端API的使用方式也不同,其中基于Hub的客户端API根据是否使用生成的代理对象又有一些区别。

基于上述情况,分成三大类型整理了Javascript客户端在不同实现方式下的与服务器交互的API代码使用方式

  PersistentConnection Hub/生成Proxy模式 Hub/非生成Proxy模式
服务端配置

app.Map("/messageConnection", map =>
           {
               map.RunSignalR<MessageConnection>();
           });

app.Map("/messageHub", map =>
           {
               map.RunSignalR(new Microsoft.AspNet.SignalR.HubConfiguration { EnableJavaScriptProxies = true });
           });

app.Map("/messageHub", map =>
            {
                map.RunSignalR(new Microsoft.AspNet.SignalR.HubConfiguration { EnableJavaScriptProxies = true });
            });

引入js文件 jquery-1.6.4.min.js
jquery.signalR-2.2.0.min.js
jquery-1.6.4.min.js
jquery.signalR-2.2.0.min.js
/messageHub/js
上述js文件是动态生成,其中messageHub的为服务端定义的路径
jquery-1.6.4.min.js
jquery.signalR-2.2.0.min.js
创建连接 var connection = $.connection("/message"); var connection = $.connection; var connection = $.hubConnection();
开启连接

connection.start()
                .done(function () {
                    connected = true;
                })
                .fail(function () {
                    alert("连接失败");
                });

connection.hub.start()
                .done(function () {
                    connected = true;
                })
                .fail(function () {
                    alert("连接失败");
                });

connection.start()
                .done(function () {
                    connected = true;
                })
                .fail(function () {
                    alert("连接失败");
                });

代理对象 var proxy = connection.MessageService;
MessageService是Hub的名称
var proxy = connection.createHubProxy("MessageService");
MessageService是Hub的名称
定义客户端方法

proxy.client.hello = function (message) {
                      console.log(message);

}

proxy.on("hello", function (message) {

console.log(message);

});

接收消息

connection.received(function (message) {
                alert(message);
            });

通过服务器调用客户端方法实现

通过服务器调用客户端方法实现

发送消息 connection.send(message); 通过调用服务端方法实现
proxy.server.hello(message);
通过调用服务端方法实现
proxy.invoke("hello", message);
设置QueryString 在创建connection时指定
var connection = $.connection("/messageConnection", { username: "qs" + username });
connection.hub.qs = { username: "qs" + username }; connection.qs = { username: "qs" + username };
设置Cookie document.cookie = "username=" + username; document.cookie = "username=" + username; document.cookie = "username=" + username;
设置State proxy.state.ClientType = "HubAutoProxy"; proxy.state.ClientType = "HubNonAutoProxy";

示例代码下载

SignalR的Javascript客户端API使用方式整理的更多相关文章

  1. SignalR的Javascript客户端API使用方式整合

      PersistentConnection Hub/生成Proxy模式 Hub/非生成Proxy模式 服务端配置 app.Map("/messageConnection", ma ...

  2. JavaScript DOM API初步(整理)

    文档对象模型 文档对象模型(Doucment Object Model,DOM)是表示文档(如HTML文档.XML文档)和访问.操作构成文档的各种元素的应用程序接口.在DOM中,HTML文档的层次结构 ...

  3. Extjs的API阅读方式(整理)

    原文链接:http://www.cnblogs.com/gaojun/archive/2013/05/28/3103908.html

  4. Zookeeper的java客户端API使用方法(五)

    前面几篇博文,我们简单的介绍了一下zookeeper,如何安装zookeeper集群,以及如何使用命令行等.这篇博文我们重点来看下Zookeeper的java客户端API使用方式. 创建会话 客户端可 ...

  5. 【SignalR学习系列】7. SignalR Hubs Api 详解(JavaScript 客户端)

    SignalR 的 generated proxy 服务端 public class ContosoChatHub : Hub { public void NewContosoChatMessage( ...

  6. STOMP 客户端 API 整理

    STOMP(Simple Text-Orientated Messaging Protocol) 面向消息的简单文本协议WebSocket是一个消息架构,不强制使用任何特定的消息协议,它依赖于应用层解 ...

  7. JAVA客户端API调用memcached两种方式

    1. memcached client for java客户端API:memcached client for java 引入jar包:java-memcached-2.6.2.jar package ...

  8. WebService学习整理(一)——客户端三种调用方式整理

    1 WebService基础 1.1 作用 1,       WebService是两个系统的远程调用,使两个系统进行数据交互,如应用: 天气预报服务.银行ATM取款.使用邮箱账号登录各网站等. 2, ...

  9. JavaScript客户端MVC 框架综述

    简介 15 年前,许多人都使用 Perl 和 ColdFusion 之类的工具构建网站.我们经常编写可以在页面顶部查询数据库的脚本,对数据应用必要的转换,以及在同一个脚本底部显示数据.这类架构适合于向 ...

随机推荐

  1. SDOI 2016 数字配对

    题目大意:给定n个数字以及每个数字的个数和权值,将满足条件的数字配对,使得总代价不小于0,且配对最多 最大费用最大流拆点,对于每个点,连一条由S到该点的边,容量为b,花费为0,再连一条到T的边 对于每 ...

  2. 设置Android Studio启动时可选最近打开过的工程

    Android Studio启动时,默认会打开最近关闭的工程. 如果想Android Studio在启动时,打开欢迎界面(Welcome to Android Studio界面),则可以通过设置Set ...

  3. 使用libjpeg.framework压缩UIImage

    +(void)writeFile:(NSString *)filePath withQuality:(int)quality { //初始化图片参数 UIImage *image=[UIImage i ...

  4. 一个基于Orchard的开源CRM --coevery简介

    Coevery是开源的.NET Web平台项目,力争打造一个开放而鲁棒的CRM系统,采用Orchard架构,并使用AngularJS改善页面体验.作为一个后发优势的CRM 产品,Coevery 具有一 ...

  5. 系统监控工具 Tsar

    Tsar是淘宝的一个用来收集服务器系统和应用信息的采集报告工具,如收集服务器的系统信息(cpu,mem等),以及应用数据(nginx.swift等),收集到的数据存储在服务器磁盘上,可以随时查询历史信 ...

  6. (翻译)《Hands-on Node.js》—— Why?

    事出有因 为何选择event loop? Event Loop是一种推进无阻塞I/O(网络.文件或跨进程通讯)的软件模式.传统的阻塞编程也是用一样的方式,通过function来调用I/O.但进程会在该 ...

  7. 使用shell/python获取hostname/fqdn释疑

    一直以来被Linux的hostname和fqdn(Fully Qualified Domain Name)困惑了好久,今天专门抽时间把它们的使用细节弄清了. 一.设置hostname/fqdn 在Li ...

  8. ReactNative与NativeScript对比报告

    综合这段时间对ReactNative(下称RN)和NativeScript(下称NS)的简单学习了解,分别从不同方面分析对比二者的优缺点. 页面结构 NS一个页面的目录结构: RN的一个页面一般就是一 ...

  9. 为jQuery添加Webkit的触摸方法支持

    前些日子收到邮件,之前兼职的一个项目被转给了其他人,跟进的人来问我相关代码的版权问题. 我就呵呵了. 这段代码是我在做13年一份兼职的时候无聊加上去的,为jQuery添加触摸事件的支持.因为做得有点无 ...

  10. 《Entity Framework 6 Recipes》中文翻译系列 (46) ------ 第八章 POCO之领域对象测试和仓储测试

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 8-8  测试领域对象 问题 你想为领域对象创建单元测试. 这主要用于,测试特定的数 ...