文档章节

【译】教程: SignalR 2入门

Knixly
 Knixly
发布于 2015/03/11 17:24
字数 2679
阅读 320
收藏 4

作者:Patrick Fletcher 发表于:June 10, 2014

下载完整的项目

这篇文章介结了如何利用SignalR创建一个实时的聊天应用。此应用从一个空白的ASP.NET项目中加入SignalR功能来创建一个能够发送和显示消息的网页。

这篇文章通过如何建立一个简单的基于浏览器的应用来介绍SignalR的开发。在一个空的ASP.NET项目中,引入SignalR库,创建一个为客户端发送消息的hub 类,创建一个让用户发送和接收聊天消息的网页。如何用MVC5中的MVC视图来开发一个聊天应用的简单介绍,参见在MVC 5中使用SignalR 2.

SignalR是一个开源的.NET库,用于创建有着用户交互或实时数据更新需求的web项目。像社交应用,多用户游戏,商务合作,新闻,天气,金融等领域中需要刷新数据的地方。通常这些都称为实时应用。

SignalR简化了实时应用的创建过程。它包括一个ASP.NET服务端库和一个JavaScript脚本库,很容易的管理CS服务器与客户端的连接,很方便的向客户端发送更新数据内容。向一个ASP.NET应用中加上SignalR库就为这个应用增加了实时功能。

这篇文章示范了下面的SigalR开发任务:

  • 向一个空的ASP.NET web应用中加入SignalR库

  • 创建一个用于向客户端发送内容的hub类

  • 创建一个OWIN启动类用于配置此应用

  • 在网页中使用Signal jQuery 库发送和显示来自hub的更新数据

下图显示了一个运行着聊天应用的浏览器。每个用户都可以发送消息,都能看到有用户加入聊天的消息。

Chat instances

设置项目

这一部分显示了如何使用VS2013和SignalR第2版创建一个空的ASP.NET web应用并加入SignalR实现聊天功能。

先决条件:

  • VS2013。如果你还没有VS,从 ASP.NET Downloads 获得一个免费的VS2013快速开发工具

下面这一步使用VS2013创建一个空的ASP.NET web应用并加入SignalR库:

  1. 在VS中,创建一个ASP.NET Web应用。

    Create web

  2. 在 New ASP.NET Project 窗口中,选择  Empty 然后点击 OK 创建项目。

    Create empty web

  3. 解决方案管理器中,右击项目名称,选择添加,选择SignalR Hub类(v2),类名为ChatHub.cs,这一步创建了一个ChatHub类并加入了用于支持SignalR的脚本和引用集。

  4. 注意:你也可以通过工具 | 包管理器 | 包管理控制台,运行一个命令来向项目中加入SignalR:

  5. install-package Microsoft.AspNet.SignalR

    如果你使用控制台来加入SignalR,那么创建SignalR hub类就成了加入SignalR之后的单独的一步了。

    注意:如果你使用的是VS2012,并没有SignalR Hub类(v2)可以用。你需要自行加入一个名为ChatHub的原始类。

  6. 解决方案管理器,展开脚本节点,就能看到项目中用到的jQuery和SignalR脚本库。

  7. 用下面的代码替换ChatHub类的代码:

  8. using System; 
    using System.Web; 
    using Microsoft.AspNet.SignalR; 
    namespace SignalRChat { 
    	public class ChatHub : Hub { 
    		public void Send(string name, string message) { 
    			// Call the broadcastMessage method to update clients. 
    			Clients.All.broadcastMessage(name, message);
    		} 
    	} 
    }
  9. 解决方案管理器中,右键点击项目,依次点击 添加 | OWIN启动类,命名类名为Startup,点击OK。

  10. 注意:如果你使用VS2012,并没有OWIN 启动类模板,你需要自行添加Startup原始类。

  11. 照下面修改这个新的Startup类的内容:

  12. using Microsoft.Owin; 
    using Owin; 
    [assembly: OwinStartup(typeof(SignalRChat.Startup))] 
    namespace SignalRChat { 
    	public class Startup { 
    		public void Configuration(IAppBuilder app) { 
    			// Any connection or hub wire up and configuration should go here             
    			app.MapSignalR(); 
    		} 
    	} 
    }
  13. 解决方案管理器中,右击项目,点击 添加| HTML页面,新页面命名为 index.hmtl。

  14. 在解决方案管理器中,右击这个HTML页面并点击“设为启动页”。

  15. 用下面的代码替换HTML页面中的代码:

  16. 注意:后续版本的SignalR脚本可能会被包管理代替。检查一下面的脚本引用是否和项目中的脚本版本一致(使用NuGet方式加入的SignalR可能会与手动加入hub方式的不同)。


  17. <!DOCTYPE html>
    <html> 
    <head> 
    <title>SignalR Simple Chat
    </title> 
    <style type="text/css"> .container { background-color: #99CCFF; border: thick solid #808080; padding: 20px; margin: 20px; } 
    </style> 
    </head> 
    <body> 
    	<div class="container"> 
    	<input type="text" id="message" /> 
    	<input type="button" id="sendmessage" value="Send" /> 
    	<input type="hidden" id="displayname" /> 
    	<ul id="discussion"> 
    	</ul> 
    </div> 
    <!--Script references. --> 
    <!--Reference the jQuery library. --> 
    <script src="Scripts/jquery-1.6.4.min.js" ></script> 
    <!--Reference the SignalR library. --> 
    <script src="Scripts/jquery.signalR-2.1.0.min.js"></script> 
    <!--Reference the autogenerated SignalR hub script. --> 
    <script src="signalr/hubs"></script> 
    <!--Add script to update the page and send messages.--> 
    <script type="text/javascript">
    	$(function () { 
    	// Declare a proxy to reference the hub.  var chat = $.connection.chatHub; 
    	// Create a function that the hub can call to broadcast messages.             
    	chat.client.broadcastMessage = function (name, message) { 
    		// Html encode display name and message.  
    		var encodedName = $('<div />').text(name).html(); 
    		var encodedMsg = $('<div />').text(message).html(); 
    		// Add the message to the page.                  
    		$('#discussion').append('<li><strong>' + encodedName+ '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>'); }; 
    		// Get the user name and store it to prepend to messages.             
    		$('#displayname').val(prompt('Enter your name:', '')); 
    		// Set initial focus to message input box.               
    		$('#message').focus(); // Start the connection.             
    		$.connection.hub.start().done(function () {                 
    			$('#sendmessage').click(function () { 
    				// Call the Send method on the hub.
    				chat.server.send($('#displayname').val(), $('#message').val()); // Clear text box and reset focus for next comment.
    				$('#message').val('').focus(); 
    			}); 
    		}); 
    	}); 
    </script> 
    </body> 
    </html>
  18. 保存项目中的所有文件。

运行此例

  1. 按F5键以debug方式运行此项目。在浏览器中会打开网页,并提示输入用户名。

  2. Enter user name

  3. 输入用户名。

  4. 复制浏览器地址栏中的URL,并用更多的浏览器实例打开此网址。每个浏览器实例都要输入一个聊天者唯一的名字。

  5. 每个浏览器实例中,都写上一条消息,并点击“发送”,这条消息会显示到所有的浏览器实例中。

  6. 注意:这个简单的聊天应用并不会在服务器上保存上下文。hub把当前的消息广播到所有在线用户。后加入聊天的用户只能看到他加入之后的相关消息。

  7. 下图显示了三个浏览器开启聊天应用的示例,当一个浏览器发送了一个消息后,所有的浏览器都显示了这个消息。

  8. Chat browsers

  9. 解决方案管理器,在此应用运用时检查一下脚本文档这个节点,此时会动态产生一个叫hubs的脚本文件。这个文件管理着jQuery脚本和服务器端代码的通讯。

解释代码

SignalR聊天应用示范了SignalR开发中的两个基本任务:创建一个hub用做服务器端的主要协作目标,使用Siganl jQuery脚本库发送和接收消息。

SignalR Hubs

在示例中,ChatHub类派生于Microsoft.AspNet.SignalR.Hub类,使用Hub类是创建SignalR应用的有效途径。你可以在hub类中创建一个公开的方法,然后在网页中用脚本访问这些方法。

在聊天的代码中,客户端调用ChatHub.Send方法来发送一条新的消息。hub会通过调用Clients.All.BroadcastMessage来向所有客户端转发此消息。

发送方法演示了hub的几个概念:

  • Declare public methods on a hub so that clients can call them.

  • 在hub中声明的公开的方法客户端就可以直接调用

  • 使用Microsoft.AspNet.SignalR.Hub.Clients动态属性就可以访问到连接到此hub的所有客户端

  • 调用客户端的函数(例如broadcastMessage函数)就可以更新客户端的内容。

  • public class ChatHub : Hub { 
    	public void Send(string name, string message) { 
    		// Call the broadcastMessage method to update clients. 
    		Clients.All.broadcastMessage(name, message); 
    	} 
    }

SignalR 与 jQuery

网页中简单的代码说明了SignalR jQuery库如何与SignalR hub进行通信.代码中一个必要的任务就是声明一个代理来引用hub,声明一个服务器端能够调用的向客户端推送消息的函数,然后开始连接到hub进行消息发送。

下面的代码声明的一个hub代理的引用。

var chat = $.connection.chatHub;

注意:在脚本里引用服务器的成员时要使用驼峰格式。代码中引用C#的ChatHub类,要写成chatHub


The following code is how you create a callback function in the script. The hub class on the server calls this function to push content updates to each client. The two lines that HTML encode the content before displaying it are optional and show a simple way to prevent script injection.

下面的代码显示了如何在脚本中创建一个回调函数。服务器端的hub类调用这个函数向每一个客户端推送刷新的消息,下面这两行代码提供了一个可选的简单的预防脚本注入的方法,就是在显示文本之前内容要经过HTML编码。

    chat.client.broadcastMessage = function (name, message) { /
	/ Html encode display name and message.  
	var encodedName = $('<div />').text(name).html(); 
	var encodedMsg = $('<div />').text(message).html(); 
	// Add the message to the page.          
	$('#discussion').append('<li><strong>' + encodedName+ '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>'); 
};

下面的代码显示了如何打开一个与hub的连接。下面代码启动了一个连接并且通过一个方法处理网页中发送按钮的点击事件。

注意: 要确保事件处理程序执行之前要建立连接。

    $.connection.hub.start().done(function () {         
	$('#sendmessage').click(function () { 
		// Call the Send method on the hub.              
		chat.server.send($('#displayname').val(), $('#message').val()); 
		// Clear text box and reset focus for next comment.              
		$('#message').val('').focus(); 
	}); 
});

下一步

你学到的SiganlR只是创建实时web应用的一个框架。你还会学到了SignalR开发的其他几个任务:如何将SignalR添加到ASP.NET应用中,如何创建一个hub类,和如何从hub中发送和接收消息。

You can make the sample application in this tutorial or other SignalR applications available over the Internet by deploying them to a hosting provider. Microsoft offers free web hosting for up to 10 web sites in a free Windows Azure trial account. For a walkthrough on how to deploy the sample SignalR application, see Using SignalR with Windows Azure Web Sites. For detailed information about how to deploy a Visual Studio web project to a Windows Azure Web Site, see Deploying an ASP.NET Application to a Windows Azure Web Site.

你可以将本教程中和互联网上其他可用的SignalR应用程序部署到提供商的主机中。微软提供的Windows Azure试用账号可以免费使用网络托管主机,最多可部署十个网站。如何部署SignalR应用程序的演练,请参阅在Windows Azure网站中使用SignalR。关于如何部署一个VS web项目到Windows Azure网站,查参阅在Windows Azure中部署ASP.NET应用。学习更多的关于SignalR开发的内容,请方问下面的有关SignalR代码和资源的网站:

这篇文章最初创建于 June 10, 2014

作者信息

Patrick Fletcher

Patrick Fletcher – Patrick Fletcher 是ASP.NET组中著名的代码写手.


本文转载自:http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr

Knixly
粉丝 2
博文 5
码字总数 1275
作品 0
海淀
私信 提问
MVC中使用signalR入门教程

一.前言:每次写总要说一点最近的感想 进入工作快半年了,昨天是最郁闷的一天,我怀疑我是不是得了"星期一综合征",每个星期一很没有状态。全身都有点酸痛,这个可能一个星期只有周末才打一次...

操张林
2016/11/15
0
0
SignalR第一节-在5分钟内完成通信连接和消息发送

前言 首先声明,这又是一个小白从入门到进阶系列。 SignalR 这个项目我关注了很长时间,中间好像还看到过微软即将放弃该项目的消息,然后我也就没有持续关注了,目前的我项目中使用的是自己搭...

Ron.Liang
03/14
0
0
常见的Web实时消息交互方式和SignalR

原文:常见的Web实时消息交互方式和SignalR 标签: WebSocket SignalR 前言 1. Web消息交互技术 1.1 常见技术 1.2 WebSocket介绍 1.3 WebSocket示例 2. Signal 2.1 SignalR是什么 2.2 默认传输...

杰克.陈
2018/06/08
0
0
第六节:SignalR完结篇之依赖注入和分布式部署

一. SignalR中DI思想的应用   DI,即依赖注入,它是一种不负责创建其自己的依赖项对象的一种模式,通常用来降低代码之间的耦合性,广泛应用于架构设计,是必不可少的一种思想。   下面结...

Yaopengfei
2018/07/24
0
0
ASP.NET SignalR 2.4.0 Preview 2 发布

ASP.NET SignalR 2.4.0 的第二个预览版已发布。其中包括对 Azure SignalR Service 的支持,以及一些错误修复和次要功能。 官方表示,即便你对采用 Azure SignalR Service 不感兴趣,也建议尝...

局长
2018/10/23
906
1

没有更多内容

加载失败,请刷新页面

加载更多

思维导图XMind 8 Pro 绿化方法(附序列号)

按部就班: Step 1 -全新下载最新版本的 Xmind 8(注必须是英文官方的版本,中文代{过}{滤}理网站的版本修改过,无法使用pj); Step 2 -安装完毕后,点击文末的下载按钮下载pj补丁文件包,将...

一只小青蛙
16分钟前
0
0
数据结构(ER数据库)设计规范

表命名规范 表命名的规则分为3个层级,层级之间通过_分割,例如b_r_identity、d_l_identity。规约为: [leavel]_[type]_[name] [leavel] 表示数据库表的层级和功能,分为: s:业务无关的系统...

随风溜达的向日葵
40分钟前
1
0
阿里Sentinel控制台源码修改-对接Apollo规则持久化

https://github.com/alibaba/Sentinel/wiki/%E5%9C%A8%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8-Sentinel 动态规则扩展 https://github.com/alibaba/Sentinel/wiki......

jxlgzwh
昨天
3
0
在Linux系统中创建SSH服务器别名

如果你经常通过 SSH 访问许多不同的远程系统,这个技巧将为你节省一些时间。你可以通过 SSH 为频繁访问的系统创建 SSH 别名,这样你就不必记住所有不同的用户名、主机名、SSH 端口号和 IP 地...

老孟的Linux私房菜
昨天
5
0
高德API入门教程

项目需求 1、实现打开地图就能定位到中心显示标注点 2、点击标注显示保利可爱岛的详细信息 3、实现导航功能 <!doctype html><html><head> <meta charset="utf-8"> <meta http-......

我叫小糖主
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部