• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

教程：通过 SignalR 2 进行实时聊天

当前位置：网站建设 > 技术支持

本教程介绍如何使用 SignalR 创建实时聊天应用程序。 将 SignalR 添加到空的 ASP.NET web 应用程序，并创建用于发送和显示消息的 HTML 页面。

在本教程中，你将了解：

• 设置项目
• 运行示例
• 检查代码

警告

本文档不适用于 SignalR 的最新版本。 请查看ASP.NET Core SignalR。

系统必备

• 带有 ASP.NET 和 Web 开发工作负荷的 Visual Studio 2017。

设置项目

本部分演示如何使用 Visual Studio 2017 和 SignalR 2 创建一个空的 ASP.NET web 应用程序，添加 SignalR，并创建聊天应用程序。

1. 在 Visual Studio 中，创建一个 ASP.NET Web 应用程序。

2. 在新的 ASP.NET 项目-SignalRChat窗口中，保留空的选中状态，然后选择 "确定" 。

3. 在解决方案资源管理器中，右键单击项目，然后选择 "添加 > 新项"。

4. 在 "添加新项-SignalRChat" 中，选择 "安装 > Visual C# > Web > " SignalR ，然后选择 " SignalR Hub 类（v2） "。

5. 将类命名为ChatHub ，并将其添加到项目。

   此步骤将创建ChatHub.cs类文件，并向项目中添加一组支持 SignalR 的脚本文件和程序集引用。

6. 将新的ChatHub.cs类文件中的代码替换为以下代码：

   C#

16. <!--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> 

17. 如果二者不匹配，则更新 .html文件。

18. 从菜单栏中选择 "文件" > "全部保存"。

运行示例

1. 在工具栏中，启用 "脚本调试"，然后选择 "播放" 按钮以调试模式运行该示例。

2. 当浏览器打开时，为聊天标识输入名称。

3. 从浏览器复制 URL，打开其他两个浏览器，然后将 Url 粘贴到地址栏中。

4. 在每个浏览器中，输入唯一名称。

5. 现在，请添加注释，然后选择 "发送"。 在其他浏览器中重复此操作。 注释会实时显示。

   备注

   这个简单的聊天应用程序不会在服务器上维护讨论上下文。 中心将注释广播给所有当前用户。 稍后加入聊天的用户将看到从他们加入的时间添加的消息。

   了解如何在三种不同的浏览器中运行聊天应用程序。 当 Tom、Anand 和 Susan 发送消息时，所有浏览器都将实时更新：

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

检查代码

SignalRChat 应用程序演示了两个基本 SignalR 开发任务。 其中介绍了如何创建中心。 服务器使用该集线器作为主协调对象。 中心使用 SignalR jQuery library 来发送和接收消息。

ChatHub.cs 中的 SignalR 中心

在上面的代码示例中，ChatHub 类派生自 Microsoft.AspNet.SignalR.Hub 类。 从 Hub 类派生是构建 SignalR 应用程序的一种有用方法。 可以在中心类上创建公共方法，并通过在网页中的脚本中调用这些方法来使用这些方法。

在聊天代码中，客户端调用 ChatHub.Send 方法来发送新消息。 然后，集线器通过调用 Clients.All.broadcastMessage将消息发送到所有客户端。

Send 方法演示了几个中心概念：

• 在中心声明公共方法，使客户端可以调用它们。

• 使用 Microsoft.AspNet.SignalR.Hub.Clients 动态属性与连接到此集线器的所有客户端通信。

• 在客户端上调用一个函数（如 broadcastMessage 函数）以更新客户端。

  C#

• 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 中心通信。 此代码将执行许多重要的任务。 它声明了一个代理来引用中心，并声明了一个函数，服务器可以调用该函数将内容推送到客户端，并启动一个连接将消息发送到中心。

var chat = $.connection.chatHub; 

备注

在 JavaScript 中，对服务器类及其成员的引用必须是 camelCase。 此代码示例引用 JavaScript C#中的ChatHub类作为 chatHub。

在此代码块中，你将在脚本中创建一个回调函数。

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 类调用此函数将内容更新推送到每个客户端。 在显示之前对内容进行 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();
        });
    }); 

备注

此方法可确保代码在事件处理程序执行之前建立连接。

该代码启动连接，然后将其传递给 HTML 页面的 "发送" 按钮上的 click 事件。

获取代码

下载完成的项目

其他资源

有关 SignalR 的详细信息，请参阅以下资源：

• SignalR 项目

• SignalR Github 和示例

• SignalR Wiki

后续步骤

在本教程中，你将：

• 设置项目
• 运行示例
• 检查代码

转到下一篇文章，了解如何使用 SignalR 和 MVC 5。

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

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

        .container {
            background-color: #99CCFF;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }
    

								

								
									
									
										   
										

											
										

									

    


        .container {
            background-color: #99CCFF;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }
    
											
											
												
													   
													

													
												

    





"><!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>  
													

														

															在解决方案资源管理器中，展开 "脚本"。
														
														

															JQuery 和 SignalR 的脚本库在项目中可见。
														
														
															

																 重要
															
															

																程序包管理器可能已安装了更高版本的 SignalR 脚本。
															
														
													
													

														

															检查代码块中的脚本引用是否对应于项目中的脚本文件的版本。
														
														

															从原始代码块编写引用脚本：
														
														
															HTML
														
													
                    

	  

	  
	  版权说明：

	  本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！

	  本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！

	  欢迎扫描右侧微信二维码与我们联系。
	  
	  
	  
相关主题：
	    
监利网页美工设计
	    
	    
ai音乐网页设计
	    
	    
东至网页设计怎么选
	    
	    
资阳怎么设计返利网页
	    
	    
网页动态php设计背景
	    
	    
黄陂区网页设计
	    
	    
匠心匠魂网页设计
	    
	    
网页设计最快的方法
	    
	    
网页设计怎么确定栏目
	    
	    
网页设计像素的符号
	    
	  

	 ·上一条：Signalr实现消息推送 | ·下一条：教程：ASP.NET Core SignalR 入门