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

  • 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. 后期生成事件命令copy /y

    copy /y $(TargetDir)7z.dll ..\..\..\..\webapp\bin copy /y $(TargetDir)7z64.dll ..\..\..\..\webapp\bi ...

  2. The prefix "mvc" for element "mvc:annotation-driven" is not bound 异常

    https://www.cnblogs.com/maodot/p/7531042.html The prefix "mvc" for element "mvc:annot ...

  3. phantomjs问题收集

    1. phantomjs如果遇到重定向的url,两个页面都会加载,onInitialized只会执行一次,onResourceReceived会执行两次.我试过在onInitialized加一段代码, ...

  4. jquery plugin 之 form表单验证插件

    基于h5表单验证系统.扩展了对easyui组件的支持 先上图: 提示样式用到了伪对象的 {content: attr(xxx)}函数方法,实现提示信息能动态切换. 1.关键属性说明: type: 表单 ...

  5. JAVA钩子方法+模板方法

    模板方法: 写一个抽象类,这个抽象类有多个抽象方法,里面设立一个模板方法,这个模板方法也可以称之为模板算法,设立不同方法的执行顺序,封装业务流程,暴露出去: 模板方法模式的特点很好总结,它将一般性的可 ...

  6. spring学习 十二 AspectJ-based的通知入门 带参数的通知

    第一步:编写通知类 package com.airplan.pojo; import org.aspectj.lang.ProceedingJoinPoint; public class Advice ...

  7. 2019.01.23 hdu1693 Eat the Trees（轮廓线dp）

    传送门 题意简述:给一个有障碍的网格图,问用若干个不相交的回路覆盖所有非障碍格子的方案数. 思路:轮廓线dpdpdp的模板题. 同样是讨论插头的情况,只不过没有前一道题复杂,不懂的看代码吧. 代码: ...

  8. 2018.11.01 NOIP训练 cost数（搜索+容斥原理）

    传送门 唉考试的时候忘记剪倍数的枝了666666分滚粗. 其实就是一直取lcmlcmlcm搜索,然后容斥原理统计就行了. 代码

  9. 2018.10.25 洛谷P4187 [USACO18JAN]Stamp Painting（计数dp）

    传送门 其实本来想做组合数学的2333. 谁知道是道dpdpdp. 唉只能顺手做了 还是用真难则反的思想. 这题我们倒着考虑,只需要求出不合法方案数就行了. 这个显然是随便dpdpdp的. f[i]f ...

  10. java正则表达式笔记

    import java.util.regex.Matcher; import java.util.regex.Pattern; import java.util.regex.PatternSyntax ...