原文链接 : 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. Cassandra中的数据一致性

       Cassandra中数据一致性指的是数据行在各个复制节点(replicas)上的更新和同步程度.通过提供tunable consistency,Cassandra扩展了eventual cons ...

  2. [ACM_动态规划] Palindrome

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=28415#problem/D 题目大意:给一个长为n的字符串,问最少插入几个字符成回文串 ...

  3. 浅谈 MVVM 设计模式在 Unity3D 中的设计与实施

    初识 MVVM 谈起 MVVM 设计模式,可能第一映像你会想到 WPF/Sliverlight,他们提供了的数据绑定(Data Binding),命令(Command)等功能,这让 MVVM 模式得到 ...

  4. 如何在施工物料管理Web系统中处理大量数据并显示

    最近在开发施工物料管理系统,其中涉及大量的物料信息需要管理和汇总,数据量非常庞大.之前尝试自己通过将原始数据,加工处理建模,在后台代码中通过分组.转置再显示到 Web 页面中,但自己编写的代码量非常大 ...

  5. nginx1

    简介: Nginx全程是什么? Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. 安装 配 ...

  6. Atitit 视频编码与动画原理attilax总结

    Atitit 视频编码与动画原理attilax总结 1.1. 第一步:实现有损图像压缩和解压1 1.2. 接着将其量化,所谓量化,就是信号采样的步长,1 1.3. 第二步:实现宏块误差计算2 1.4. ...

  7. Atitit.java图片图像处理attilax总结

    Atitit.java图片图像处理attilax总结 BufferedImage extends java.awt.Image 获取图像像素点 image.getRGB(i, lineIndex); ...

  8. exe文件添加为服务

    首先,去下载一个叫rktools.exe的工具(我提供个下载地址Windows 2003 Resource Kits),下载完后安装该资源包,里面有个instsrv.exe和srvany.exe的工具 ...

  9. 阿里云配置mysql navcat远程连接

    默认是不能用客户端远程连接的,阿里云提供的help.docx里面做了设置说明,mysql密码默认存放在/alidata/account.log 首先登录: mysql -u root -h local ...

  10. C# XmlReader

    一个非常全面的XML解析类 using System; using UnityEngine; using System.Xml; using System.Collections; using Uni ...