一步一步学习SignalR进行实时通信_4_Hub

标签（空格分隔）： SignalR

一步一步学习SignalR进行实时通信_4_Hub

前言

之前我们介绍了SignalR有2级抽象,前2篇文章我们讲的是较底层PersistentConnection，从这篇文章开始我们学习下较高一层的Hub。

创建Hub

创建Hub的方法和创建PersistentConnection非常类似

 public class EchoHub:Hub
{
    //这是Hub
}

 public class EchoPersistentConnection:PersistentConnection
{
    //这是PersistentConnection
}

配置Hub

学过了PersistentConnection,那么Hub更加不是难事

 public void Configuration(IAppBuilder app)
{ 
    // 映射 persistent connections 到/myconnection
    app.MapSignalR<MyPersistentConnection>("/myconnection");
    // 映射 hubs 默认为"/signalr"
    app.MapSignalR();
    //映射Hubs到"/realtime",同时还可以配置HubConfiguration,比如我们uxyao跨域,和上一讲用法是一致
    app.MapSignalR("/realtime", new HubConfiguration());
}

创建Hubs服务

接下来我们进入正题,如何来创建基于Hub的实时通信服务,这里与PersistentConnection有一点差别,前面我们在服务器通过OnReceived()来接受客户端的服务并进行处理,在Hub中我们可以实现我们自己需要的方法来进行处理信息。

新建一个Hub类取名为MyFirstHub
默认会生成这样的代码,有一个默认的方法,应该能看得出来这个Hello()方法的功能是发送给有客户端信息,说的更直白一点是所有连接了此Hub的客户端即为Clients,服务器会发送请求调用客户端的hello()方法,类似于PersistentConnection的广播Broadcast()。
创建一个客户端连接

我创建一个html页面名为Hub,引入jquery和signalr的js
在页面载入的时候连接Hub服务,并调用Hello,向所有客户端打招呼

详细代码

startup映射

 using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalR_3_Hubs.Startup))]
namespace SignalR_3_Hubs
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

MyFirstHub

 using Microsoft.AspNet.SignalR;
namespace SignalR_3_Hubs.Models
{
    public class MyFirstHub : Hub
    {
        public void Hello(string name)
        {
            Clients.All.hello(name);
        }
    }
}

hub.html

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<ul id="chat"></ul>
<button id ="sayHello">发送</button>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
    <script src="/signalr/js"></script>
    <script type="text/javascript">
        $(function () {
            //创建一个hub服务
            var hub = $.connection.myFirstHub;
            $.connection.hub.start()
                .done(function () {
                    alert("连接成功!");
                })
                .fail(function () {
                    alert("连接失败!");
                });
            hub.client.hello = function (name) {
                $('#chat').append('<li><strong>' + name + '</strong>:Hi!</li>');
            }
            $("#sayHello").click(function () {
                console.log(1);
                hub.server.hello("Jack");
                console.log(2);
            });
        });
    </script>
</body>
</html>

代码解析

这3端代码非常简短也很简单,但是有一点特别要注意的是,我们用PersistentConnetcion在startup中配置SignalR映射时

startup中映射的代码为app.MapSignalR("/echo");

在html客户端js代码中我们是这样写的
var connection = $.connection("/echo");

若通过跨域其他客户端连接则为var connection = $.connection("127.0.0.1：8083/echo");(假设signalR部署在127.0.0.1：8083端口)

这在前面2章我都讲到过,Hub与PersistentConnection有所不同,Hub的默认服务是映射在__/signalr/js__或__/signalr/hubs__

因此如果我们默认hub映射代码为app.MapSignalR();
那么我们需要在html引入<script src="/signalr/js"></script>或者<script src="/signalr/hubs"></script>,否则服务将无法开启

我改为<script src="/signalr/></script>那么就报了404错误并提示你是否引用正确。
如果我将映射改为app.MapSignalR("/realtime");
那么引入的代码就应该是<script src="/realtime/signalr/js"></script>或者<script src="/realtime/signalr/hubs"></script>

这下应该明白了吧,前面的映射代表的是映射的根目录。同时你不用奇怪这个路径,这只是个虚拟路径,服务开启后生成的代理(在后面我会讲到代理和非代理的使用),可以看到下载下来的脚本资源文件

到此Hub的整个过程应该有些了解了

效果展示

进入页面
点击按钮触发

结束语

这里简单的介绍了下Hub,并通过与PersisentConnection进行了比较。下一节将具体的介绍Hub。

源码下载
本文发布至作业部落

参考文献

SignalR Programming in Microsoft ASP.NET pdf 下载

posted @ 2015-08-28 01:43 杰哥很忙阅读(1927) 评论(10) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

公告

昵称：杰哥很忙
园龄： 11年4个月
粉丝： 105
关注： 15

+加关注

2025年3月

日

一

二

三

四

五

六

Jake

一步一步学习SignalR进行实时通信_4_Hub

一步一步学习SignalR进行实时通信_4_Hub

前言

创建Hub

配置Hub

创建Hubs服务

详细代码

代码解析

效果展示

结束语

参考文献

公告

搜索

常用链接

最新随笔

我的标签

随笔分类

随笔档案

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	public class EchoPersistentConnection:PersistentConnection
	{
	//这是PersistentConnection
	}

	public void Configuration(IAppBuilder app)
	{
	// 映射 persistent connections 到/myconnection
	app.MapSignalR<MyPersistentConnection>("/myconnection");
	// 映射 hubs 默认为"/signalr"
	app.MapSignalR();
	//映射Hubs到"/realtime",同时还可以配置HubConfiguration,比如我们uxyao跨域,和上一讲用法是一致
	app.MapSignalR("/realtime", new HubConfiguration());
	}

	using Microsoft.Owin;
	using Owin;
	[assembly: OwinStartup(typeof(SignalR_3_Hubs.Startup))]
	namespace SignalR_3_Hubs
	{
	public class Startup
	{
	public void Configuration(IAppBuilder app)
	{
	app.MapSignalR();
	}
	}
	}

	using Microsoft.AspNet.SignalR;
	namespace SignalR_3_Hubs.Models
	{
	public class MyFirstHub : Hub
	{
	public void Hello(string name)
	{
	Clients.All.hello(name);
	}
	}
	}

	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title></title>
	</head>
	<body>
	<ul id="chat"></ul>
	<button id ="sayHello">发送</button>
	<script src="Scripts/jquery-1.10.2.min.js"></script>
	<script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
	<script src="/signalr/js"></script>
	<script type="text/javascript">
	$(function () {
	//创建一个hub服务
	var hub = $.connection.myFirstHub;
	$.connection.hub.start()
	.done(function () {
	alert("连接成功!");
	})
	.fail(function () {
	alert("连接失败!");
	});
	hub.client.hello = function (name) {
	$('#chat').append('<li><strong>' + name + '</strong>:Hi!</li>');
	}
	$("#sayHello").click(function () {
	console.log(1);
	hub.server.hello("Jack");
	console.log(2);
	});
	});
	</script>
	</body>
	</html>