在本教程中使用的软件版本

  • Visual Studio 2015
  • .NET 4.5
  • SignalR 版本 2

概述

本教程介绍了通过演示如何生成简单的基于浏览器的聊天应用程序的 SignalR 开发。 将 SignalR 库添加到空的 ASP.NET web 应用程序，创建一个中心类，用于将消息发送到客户端，并创建使用户能够发送和接收聊天消息的 HTML 页。 有关演示如何在 MVC 5 中创建的聊天应用程序使用 MVC 视图的类似教程，请参阅SignalR 2 和 MVC 5 入门。

SignalR 是构建 web 应用程序的需要实时用户交互或实时数据更新的开放源.NET 库。 示例包括社交应用程序、 多用户游戏、 业务协作和新闻、 天气或财务更新应用程序。 这些测试通常称为实时应用程序。
SignalR 简化了构建实时应用程序的过程。 它包括 ASP.NET 服务器库和 JavaScript 客户端库来轻松地管理客户端-服务器连接，并将内容更新推送到客户端。 您可以将 SignalR 库添加到现有 ASP.NET 应用程序以获取实时功能。
本教程演示以下的 SignalR 开发任务：

  • SignalR 库添加到 ASP.NET web 应用程序。
  • 创建用于将内容推送到客户端的中心类。
  • 创建配置应用程序的 OWIN 启动类。
  • 使用 SignalR jQuery 库在网页上发送消息并显示从中心的更新。
    以下屏幕截图显示在浏览器中运行的聊天应用程序。 每个新用户可以发表评论，并查看用户加入聊天后已添加注释。
    聊天实例

设置项目

本部分演示如何使用 Visual Studio 2013 和 SignalR 版本 2 创建空的 ASP.NET web 应用程序，将 SignalR 中，并创建聊天应用程序。
先决条件：

  • Visual Studio 2013+
    以下步骤使用 Visual Studio 2015 创建 ASP.NET 空 Web 应用程序并添加 SignalR 库：
  1. 在 Visual Studio 中创建 ASP.NET Web 应用程序。

  2. 在中新建 ASP.NET 项目窗口中，保留空选中然后单击创建项目。

  3. 在中解决方案资源管理器，右键单击项目，选择添加 |SignalR Hub 类 (v2)。 将类命名ChatHub.cs并将其添加到项目。 此步骤将创建ChatHub类，并将一组脚本文件和支持 SignalR 的程序集引用添加到项目。

您还可以将 SignalR 通过打开添加到项目工具 > NuGet 包管理器 > 程序包管理器控制台并运行命令：

install-package Microsoft.AspNet.SignalR

如果使用控制台来添加 SignalR，SignalR hub 类作为单独的步骤后创建将 SignalR 添加。

如果使用 Visual Studio 2012 中， SignalR Hub 类 (v2) 模板将不可用。 您可以添加纯类调用ChatHub相反。
在中解决方案资源管理器，展开脚本节点。 适用于 jQuery 和 SignalR 的脚本库将显示在该项目。
在新的代码替换为ChatHub用下面的代码的类。

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);

}

}

}
  1. 在中解决方案资源管理器，展开脚本节点。 适用于 jQuery 和 SignalR 的脚本库将显示在该项目。
  2. 在新的代码替换为ChatHub用下面的代码的类。 
    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();
    
}
    
}
    
}

  3. 在中解决方案资源管理器，右键单击项目，然后单击添加 |OWIN 启动类。 新类命名为Startup并单击确定。
    备注

  4. 如果使用 Visual Studio 2012 中， OWIN 启动类模板将不可用。 您可以添加纯类调用Startup相反。
    将新的启动类的内容更改为以下。

    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();
    
}
    
}
    
}
  5. 在中解决方案资源管理器，右键单击项目，然后单击添加 |HTML 页。 命名新页面index.html。

备注：可能需要更改对 JQuery 和 SignalR 库的引用的版本号

  1. 在中解决方案资源管理器，右键单击刚创建的 HTML 页，然后单击设为起始页。
    HTML 页中的默认代码替换为以下代码。

备注：可能通过程序包管理器安装 SignalR 脚本的更高版本。 验证以下脚本参考对应于版本的脚本文件在项目中 （它们将与此不同如果添加了使用 NuGet，而不是添加 hub 的 SignalR。）

<!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-3.1.1.min.js" ></script>

<!--Reference the SignalR library. -->

<script src="Scripts/jquery.signalR-2.2.1.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>

保存所有项目。

运行示例

按 F5 以在调试模式下运行该项目。 中的浏览器实例并提示输入用户名称的 HTML 页面加载。

  1. 输入用户名;输入用户名称。
  2. 从地址行中的浏览器复制 URL 并将其用于打开两个更多的浏览器实例。 在每个浏览器实例中，输入唯一的用户名称。
    在每个浏览器实例中，添加注释并单击发送。 注释应显示在浏览器的所有实例。

下面的屏幕截图显示了在三个浏览器情况下，所有这些更新一个实例发送消息时运行的聊天应用程序：

  1. 在中解决方案资源管理器，检查脚本文档节点运行的应用程序。 没有名为的脚本文件中心在运行时动态生成 SignalR 库。 此文件管理的 jQuery 脚本和服务器端代码之间的通信。

检查代码检查代码

SignalR 聊天应用程序演示了两个基本的 SignalR 开发任务： 在服务器上的主要协调对象为创建中心和使用 SignalR jQuery 库来发送和接收消息。
SignalR 集线器
中的代码示例ChatHub类派生自Microsoft.AspNet.SignalR.Hub类。 派生自中心类是一种有用的方式来构建 SignalR 应用程序。 可以在中心类上创建的公共方法，然后通过调用从网页中的脚本中访问这些方法。
在聊天代码中，客户端调用ChatHub.Send方法发送一封新邮件。 在中心反过来将消息发送给所有客户端，通过调用Clients.All.broadcastMessage。
发送方法演示了多个中心概念：
集线器上声明的公共方法，以便客户端可以调用它们。
使用Microsoft.AspNet.SignalR.Hub.Clients动态属性来访问所有客户端连接到此中心。
在客户端上调用的函数 (如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

HTML 页中的代码示例演示如何使用 SignalR jQuery 库与 SignalR 中心进行通信。 在代码中的基本任务声明的代理服务器能够引用中心，声明服务器可以将内容推送到客户端，调用的函数和启动的连接将消息发送到中心。
下面的代码声明对集线器代理的引用。

var chat = $.connection.chatHub;

下面的代码是如何在脚本中创建一个回调函数。 在服务器上的中心类会调用此函数可将内容更新推送到每个客户端。 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>');

};

下面的代码演示如何在中心打开的连接。 代码启动连接，然后将其传递函数来处理单击事件上发送HTML 页中的按钮。

$.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();

});

});

GitHub：https://github.com/net-yuan-Moo/SignalR

原文链接：https://docs.microsoft.com/zh-cn/aspnet/signalr/overview/getting-started/tutorial-getting-started-with-signalr

http://net-yuan.com

SignalR 2 入门的更多相关文章

  1. SignalR快速入门 ~ 仿QQ即时聊天，消息推送，单聊，群聊，多群公聊（基础=》提升）

     SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/si ...

  2. [Asp.net 开发系列之SignalR篇]专题一：Asp.net SignalR快速入门

    一.前言 之前半年时间感觉自己有点浮躁,导致停顿了半年多的时间没有更新博客,今天重新开始记录博文,希望自己可以找回初心,继续沉淀.由于最近做的项目中用到SignalR技术,所以打算总结下Asp.net ...

  3. SignalR系列教程：SignalR快速入门

    ---恢复内容开始--- 本篇是SignalR系列教程的第一篇,本篇内容介绍了如何创建SignalR应用,如何利用SignalR搭建简易的聊天室等,本篇内容参考自:http://www.asp.net ...

  4. SignalR快速入门

    本篇是SignalR系列教程的第一篇,本篇内容介绍了如何创建SignalR应用,如何利用SignalR搭建简易的聊天室等,本篇内容参考自:http://www.asp.net/signalr/over ...

  5. Signalr简单入门，使用注意点

    注意点:1,创建proxy代理时候,继承了hub的类,方法名在js中,同名,但是默认首字母是小写,2,js中代理毁掉方法的名称和继承了hub的类的方法中的Clients.All.的对象名称要一致(名称 ...

  6. Asp.net SignalR 初试和应用笔记一 认识和使用 SignalR

    如果你在用QQ,微信.你会知道,广告和消息无处不在.也有好的一面,比如通过QQ或微信,微博等及时聊天功能,你找到了你的初恋,你找到了小学的班级等等. 这里的及时通信在很多应用场所能用到,比如: 1.球 ...

  7. SignalR技术

    Asp.net SignalR快速入门 一.前言 之前半年时间感觉自己有点浮躁,导致停顿了半年多的时间没有更新博客,今天重新开始记录博文,希望自己可以找回初心,继续沉淀.由于最近做的项目中用到Sign ...

  8. Asp.net SignalR 让实时通讯变得简单

    巡更项目中,需要发送实时消息,以及需要任务开始提醒,于是便有机会接触到SignalR,在使用过程中,发现用SignalR实现通信非常简单,下面我思明将从三个方面分享一下: 一.SignalR是什么 A ...

  9. 第六节：SignalR完结篇之依赖注入和分布式部署

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

随机推荐

  1. Spring 注解（一）Spring 注解编程模型

    Spring 注解(一)Spring 注解编程模型 Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) Spring 注解系列 ...

  2. [Hbase]Hbase章３　Hbase单点故障

    很长一段时间以来,一个region同一时间只能在一台RS(Region Server)中打开.如果一个region同时在多个RS上打开,就是multi-assign问题,会导致数据不一致甚至丢数据的情 ...

  3. JS原型与原型链

    1.原型(公用属性) 首先,我们来讲讲浏览器的初始状态,就是在无代码的情况下,浏览器所分配到的内存的使用情况,首先浏览器会创建一个全局对象global,而在这个全局对象global内含有许多的全局函数 ...

  4. Windows server 2008 被ntlmssp安装攻击 解决

    进行NTLM策略控制,彻底阻止LM响应

  5. java中排序函数sort()使用，Arrays.sort（）和Collections.sort()

    Java中常用的数组或集合排序的方法有两个,一个是java.util.Arrays中的静态方法Arrays.sort(),还有一个是java.util.Collections中的静态方法的Collec ...

  6. 《MinDoc 接口文档在线管理系统》

    项目简介 MinDoc 是一款针对IT团队开发的简单好用的文档管理系统. MinDoc 的前身是 SmartWiki 文档系统.SmartWiki 是基于 PHP 框架 laravel 开发的一款文档 ...

  7. delphi 中如何访问另一个类中到私有方法？（转载）

    原始连接 http://rvelthuis.blogspot.tw/2018/01/accessing-private-methods-of-another.html Accessing privat ...

  8. ubunut下安装ibus_pinyin中文输入法

    ubuntu安装中文输入法,,此处一ibus-pinyin为例为其安装中文输入法,,, 1. 设置(setting)---语言支持(language support)---汉语(chinese),,, ...

  9. 2018.12.31 NOIP训练 czy的后宫5（树形dp）

    传送门 题意:给一棵有根树,树有点权,最多选出mmm个点,如果要选一个点必须先选其祖先,问选出来的点权和最大值是多少. 直接背包转移就行了. 代码

  10. 2018.06.27 NOIP模拟 节目（支配树+可持久化线段树）

    题目背景 SOURCE:NOIP2015-GDZSJNZX(难) 题目描述 学校一年一度的学生艺术节开始啦!在这次的艺术节上总共有 N 个节目,并且总共也有 N 个舞台供大家表演.其中第 i 个节目的 ...