八九社区 首页 教程频道

SignalR的Javascript客户端API使用方式

2019-7-11 09:32

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

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

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

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

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

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

 PersistentConnectionHub/生成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 };
设置Cookiedocument.cookie = "username=" + username;document.cookie = "username=" + username;document.cookie = "username=" + username;
设置Stateproxy.state.ClientType = "HubAutoProxy";proxy.state.ClientType = "HubNonAutoProxy";

一、PersistentConnection 方法
var connection = $.connection('http://fbcs101.fbox360.com/push/signalr', {querystring:'at=zvn0XL&cid=xxxx'}); 
connection.start().done(function() { 
 console.log("connection started!"); 
 }); 
 connection.received(function (message) {
 console.log(message); 
 }); 
 connection.error(function (error) { 
 console.warn(error);
 });
二、Hub/非生成Proxy模式 方法
// 创建连接 
 const connection = $.hubConnection(); 
 connection.url = "http://fbcs101.fbox360.com/push/signalr"; 
 // 设置查询字符串 
 connection.qs = {at:data.access_token, cid: 'shmk'}; 
 var connected = false; connection.logging = true; console.log(connection); 
 // 获取代理 
 var proxy = connection.createHubProxy("clientHub"); 
 console.log(proxy); 
 // 设置state的值 
 proxy.state.ClientType = "HubNonAutoProxy"; 
 // 实时数据推送 
 proxy.on("dMonUpdateValue", function (message) { 
 console.log('实时数据推送:'); console.log(message); 
 }); 
 //报警触发推送 
 proxy.on("alarmTriggered", function (message) { 
 console.log('报警触发推送:'); console.log(message); 
 }); 
 //报警还原推送 
 proxy.on("alarmRecovered", function (message) { 
 console.log('报警还原推送:'); console.log(message); 
 }); 
 //FBox状态变更推送 
 proxy.on("boxConnStateChanged", function (message) { 
 console.log('FBox状态变更推送:'); console.log(message); 
 }); 
 // 开启连接 
 connection.start().done(function () { 
 connected = true; 
 }).fail(function () { 
 alert("连接失败"); 
 });


路过

雷人

握手

鲜花

鸡蛋
粉丝 阅读16 回复0
上一篇:
php 文件缓存类发布时间:2019-07-11
下一篇:
Nginx与tomcat组合的简单使用发布时间:2019-07-11

周一至周日9:00-18:00

反馈建议

service#bjjem.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! © 2001-2019