原文链接 : http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr-and-mvc

中文链接: http://www.cnblogs.com/humble/p/3857900.html

官方demo下载地址: demo下载

原文粘个过来,方便查询

This tutorial shows how to use ASP.NET SignalR 2 to create a real-time chat application. You will add SignalR to an MVC 5 application and create a chat view to send and display messages.

Software versions used in the tutorial

Using Visual Studio 2012 with this tutorial

Tutorial Versions

Questions and comments

Overview

This tutorial introduces you to real-time web application development with ASP.NET SignalR 2 and ASP.NET MVC 5. The tutorial uses the same chat application code as the SignalR Getting Started tutorial, but shows how to add it to an MVC 5 application.

In this topic you will learn the following SignalR development tasks:

  • Adding the SignalR library to an MVC 5 application.
  • Creating hub and OWIN startup classes to push content to clients.
  • Using the SignalR jQuery library in a web page to send messages and display updates from the hub.

The following screen shot shows the completed chat application running in a browser.

Sections:

Set up the Project

Prerequisites:

  • Visual Studio 2013. If you do not have Visual Studio, see ASP.NET Downloads to get the free Visual Studio 2013 Express Development Tool.

This section shows how to create an ASP.NET MVC 5 application, add the SignalR library, and create the chat application.

  1. In Visual Studio, create a C# ASP.NET application that targets .NET Framework 4.5, name it SignalRChat, and click OK.

  2. In the New ASP.NET Project dialog, and select MVC, and click Change Authentication.

  3. Select No Authentication in the Change Authentication dialog, and click OK.

    Note: If you select a different authentication provider for your application, a Startup.cs class will be created for you; you will not need to create your own Startup.cs class in step 10 below.

  4. Click OK in the New ASP.NET Project dialog.

  5. Open the Tools | Library Package Manager | Package Manager Console and run the following command. This step adds to the project a set of script files and assembly references that enable SignalR functionality.

    install-package Microsoft.AspNet.SignalR

  6. In Solution Explorer, expand the Scripts folder. Note that script libraries for SignalR have been added to the project.

  7. In Solution Explorer, right-click the project, select Add | New Folder, and add a new folder named Hubs.

  8. Right-click the Hubs folder, click Add | New Item, select the Visual C# | Web | SignalR node in the Installedpane, select SignalR Hub Class (v2) from the center pane, and create a new hub named ChatHub.cs. You will use this class as a SignalR server hub that sends messages to all clients.

  9. Replace the code in the ChatHub class with the following code.

     using System;
     using System.Web;
     using Microsoft.AspNet.SignalR;
     namespace SignalRChat
     {
         public class ChatHub : Hub
         {
             public void Send(string name, string message)
             {
                 // Call the addNewMessageToPage method to update clients.
                 Clients.All.addNewMessageToPage(name, message);
             }
         }
     }
  10. Create a new class called Startup.cs. Change the contents of the file to the following.

     using Owin;
     using Microsoft.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();
             }
         }
     }
  11. Edit the HomeController class found in Controllers/HomeController.cs and add the following method to the class. This method returns the Chat view that you will create in a later step.

     public ActionResult Chat()
     {
         return View();
     }
  12. Right-click the Views/Home folder, and select Add... | View.

  13. In the Add View dialog, name the new view Chat.

  14. Replace the contents of Chat.cshtml with the following code.

    Important: When you add SignalR and other script libraries to your Visual Studio project, the Package Manager might install a version of the SignalR script file that is more recent than the version shown in this topic. Make sure that the script reference in your code matches the version of the script library installed in your project.

     @{
         ViewBag.Title = "Chat";
     }
     <h2>Chat</h2>
     <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>
     @section scripts {
         <!--Script references. -->
         <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
         <!--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>
         <!--SignalR script to update the chat page and send messages.-->
         <script>
             $(function () {
                 // Reference the auto-generated proxy for the hub.
                 var chat = $.connection.chatHub;
                 // Create a function that the hub can call back to display messages.
                 chat.client.addNewMessageToPage = function (name, message) {
                     // Add the message to the page.
                     $('#discussion').append('<li><strong>' + htmlEncode(name)
                         + '</strong>: ' + htmlEncode(message) + '</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();
                     });
                 });
             });
             // This optional function html-encodes messages for display in the page.
             function htmlEncode(value) {
                 var encodedValue = $('<div />').text(value).html();
                 return encodedValue;
             }
         </script>
     }
  15. Save All for the project.

Run the Sample

  1. Press F5 to run the project in debug mode.

  2. In the browser address line, append /home/chat to the URL of the default page for the project. The Chat page loads in a browser instance and prompts for a user name.

  3. Enter a user name.

  4. Copy the URL from the address line of the browser and use it to open two more browser instances. In each browser instance, enter a unique user name.
  5. In each browser instance, add a comment and click Send. The comments should display in all browser instances.

    Note: This simple chat application does not maintain the discussion context on the server. The hub broadcasts comments to all current users. Users who join the chat later will see messages added from the time they join.

  6. The following screen shot shows the chat application running in a browser.

  7. In Solution Explorer, inspect the Script Documents node for the running application. This node is visible in debug mode if you are using Internet Explorer as your browser. There is a script file named hubs that the SignalR library dynamically generates at runtime. This file manages the communication between jQuery script and server-side code. If you use a browser other than Internet Explorer, you can also access the dynamichubs file by browsing to it directly, for example http://mywebsite/signalr/hubs.

Examine the Code

The SignalR chat application demonstrates two basic SignalR development tasks: creating a hub as the main coordination object on the server, and using the SignalR jQuery library to send and receive messages.

SignalR Hubs

In the code sample the ChatHub class derives from the Microsoft.AspNet.SignalR.Hub class. Deriving from theHub class is a useful way to build a SignalR application. You can create public methods on your hub class and then access those methods by calling them from scripts in a web page.

In the chat code, clients call the ChatHub.Send method to send a new message. The hub in turn sends the message to all clients by calling Clients.All.addNewMessageToPage.

The Send method demonstrates several hub concepts :

  • Declare public methods on a hub so that clients can call them.
  • Use the Microsoft.AspNet.SignalR.Hub.Clients property to access all clients connected to this hub.
  • Call a function on the client (such as the addNewMessageToPage function) to update clients.

     public class ChatHub : Hub
     {
         public void Send(string name, string message)
         {
             Clients.All.addNewMessageToPage(name, message);
         }
     }

SignalR and jQuery

The Chat.cshtml view file in the code sample shows how to use the SignalR jQuery library to communicate with a SignalR hub. The essential tasks in the code are creating a reference to the auto-generated proxy for the hub, declaring a function that the server can call to push content to clients, and starting a connection to send messages to the hub.

The following code declares a reference to a hub proxy.

 var chat = $.connection.chatHub;

Note: In JavaScript the reference to the server class and its members is in camel case. The code sample references the C# ChatHub class in JavaScript as chatHub. If you want to reference the ChatHub class in jQuery with conventional Pascal casing as you would in C#, edit the ChatHub.cs class file. Add a using statement to reference the Microsoft.AspNet.SignalR.Hubs namespace. Then add the HubName attribute to the ChatHub class, for example [HubName("ChatHub")]. Finally, update your jQuery reference to the ChatHub class.

The following code shows how to create a callback function in the script. The hub class on the server calls this function to push content updates to each client. The optional call to the htmlEncode function shows a way to HTML encode the message content before displaying it in the page, as a way to prevent script injection.

 chat.client.addNewMessageToPage = function (name, message) {
     // Add the message to the page.
     $('#discussion').append('<li><strong>' + htmlEncode(name)
         + '</strong>: ' + htmlEncode(message) + '</li>');
 };

The following code shows how to open a connection with the hub. The code starts the connection and then passes it a function to handle the click event on the Send button in the Chat page.

Note: This approach ensures that the connection is established before the event handler executes.

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

Next Steps

You learned that SignalR is a framework for building real-time web applications. You also learned several SignalR development tasks: how to add SignalR to an ASP.NET application, how to create a hub class, and how to send and receive messages from the 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 a simple 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.

To learn more advanced SignalR developments concepts, visit the following sites for SignalR source code and resources :

This article was originally created on June 10, 2014

SingalR--demo的更多相关文章

  1. ASP.NET SingalR + MongoDB 实现简单聊天室(三):实现用户群聊,总结完善

    前两篇已经介绍的差不多了,本篇就作为收尾. 使用hub方法初始化聊天室的基本步骤和注意事项 首先确保页面已经引用了jquery和singalR.js还有对应的hubs文件,注意,MVC框架有时会将jq ...

  2. ASP.NET SingalR + MongoDB 实现简单聊天室(二):实现用户信息、聊天室初始化,聊天信息展示完善

    第一篇已经介绍了一大半了,下面就是详细业务了,其实业务部分要注意的地方有几个,剩下的就是js跟html互动处理. 首先在强调一下,页面上不可缺少的js:jquery,singalR.js,hubs . ...

  3. 通过一个demo了解Redux

    TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...

  4. 很多人很想知道怎么扫一扫二维码就能打开网站,就能添加联系人,就能链接wifi,今天说下这些格式,明天做个demo

    有些功能部分手机不能使用,网站,通讯录,wifi基本上每个手机都可以使用. 在看之前你可以扫一扫下面几个二维码先看看效果: 1.二维码生成 网址 (URL) 包含网址的 二维码生成 是大家平时最常接触 ...

  5. 在线浏览PDF之PDF.JS (附demo)

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#skill 下载地址:http://mozilla.gith ...

  6. 【微框架】Maven +SpringBoot 集成 阿里大鱼 短信接口详解与Demo

    Maven+springboot+阿里大于短信验证服务 纠结点:Maven库没有sdk,需要解决 Maven打包找不到相关类,需要解决 ps:最近好久没有写点东西了,项目太紧,今天来一篇 一.本文简介 ...

  7. vue双向数据绑定原理探究(附demo)

    昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与 ...

  8. Android Studio-—使用OpenCV的配置方法和demo以及开发过程中遇到的问题解决

    前提: 1.安装Android Studio(过程略) 2.官网下载OpenCV for Android 网址:http:opencv.org/downloads.html 我下载的是下图的版本 3. ...

  9. iOS之ProtocolBuffer搭建和示例demo

    这次搭建iOS的ProtocolBuffer编译器和把*.proto源文件编译成*.pbobjc.h 和 *.pbobjc.m文件时,碰到不少问题! 搭建pb编译器到时没有什么问题,只是在把*.pro ...

  10. 钉钉开放平台demo调试异常问题解决:hostname in certificate didn't match

    今天研究钉钉的开放平台,结果一个demo整了半天,这帮助系统写的也很难懂.遇到两个问题: 1.首先是执行demo时报unable to find valid certification path to ...

随机推荐

  1. [异常解决] virtualbox从.VDI备份文件新建/恢复虚拟机(包括恢复各个备份节点)

    一.前言: ubuntu上的virtualbox中的虚拟机如果关机不当会导致整个虚拟机坏掉,而且采用各种debug方式都难以让它重新启动.这时你只能用之前备份的各个VDI文件来恢复系统了.还有另一种场 ...

  2. jQuery.width()和jQuery.css('width')的区别

    [TOC] 问题描述 使用jQuery修改一个div的宽度时,发现$($0).width('10rem')总是修改成不正确的值,然后使用$($0).css('width', '10rem')时却能正确 ...

  3. SlipHover,能感知鼠标方向的图片遮罩效果jQuery插件

    接上一篇博文,介绍完jQuery插件开发后这里上一个自己的作品,也是初次实践,小有成就的感觉. 话说这个插件年前就写好了,然后挂到GitHub,然后就偷偷看着Google Analysis心中暗自激动 ...

  4. bitmap算法

    概述 所谓bitmap就是用一个bit位来标记某个元素对应的value,而key即是这个元素.由于采用bit为单位来存储数据,因此在可以大大的节省存储空间 算法思想 32位机器上,一个整形,比如int ...

  5. 跟我一起云计算(6)——openAPI

    介绍 Open API即开放API,也称开放平台. 所谓的开放API(OpenAPI)是服务型网站常见的一种应用,网站的服务商将自己的网站服务封装成一系列API(Application Program ...

  6. 七步,搭建基于Windows平台完美Jekyll博客环境

    最近,基于Jekyll新搭建了自己英文博客.整个过程搜索了不少资料,也尝试和过滤了不少工具和插件,最后的效果还是不错的.这里总结一下主要的七个步骤,感兴趣的朋友可以参考一下: 第一步,安装Ruby开发 ...

  7. C#入门基础二

    万物皆对象:对象是包含数据和操作的实体. 属性:名词     /  对象     \      方法:动词 ============================================== ...

  8. IOS Socket 04-利用框架CocoaAsyncSocket实现客户端/服务器端

    这篇文章,我们介绍CocoaAsyncSocket框架的使用,主要介绍实现客户端/服务器端代码,相信在网上已经很多这样的文章了,这里做一下自己的总结.这里介绍使用GCD方式 一.客户端 1.下载地址 ...

  9. java.logging的重定向?

    接着昨天的工作. 上面说要重定向java.util.logging.Logger的输出, 发现也不是不可能. package jmx; import java.util.logging.FileHan ...

  10. MyBatis入门学习(三)

    在实际开发中,我们希望文件配置是分类配置存放,需要的时候引入即可.如果多文件的配置混合配置使用,那么对项目的后期维护将增加难度. 一.对于连接数据库的配置单独放在一个properties文件中 1.对 ...