Asp.net信号创建实时聊天应用程序

一.概述

使用ASP.NET然后信号2创建一个实时聊天应用程序。向MVC 5应用程序添加SignalR，并创建聊天视图来发送和显示消息。

在演示中，您将了解到信号员开发任务包括：

将信号库添加到MVC 5应用程序中。创建集线器和浩然启动类，将内容推送到客户端。使用网页中的SignalR jQuery库从集线器发送邮件和显示更新。

下面的屏幕截图显示了浏览器中运行的完整聊天应用程序。

二.实现

创建一个ASP.NET MVC 5应用程序，安装信号库，添加和创建聊天应用程序。

1).在Visual Studio中，创建一个目标。NET框架4.5的c# ASP.NET应用程序，将其命名为SignalRChat，然后单击确定。

2).在“新ASP.NET项目”对话框中，选择“MVC”，然后单击“更改身份验证”

注意：如果应用程序选择不同的身份验证提供程序，将创建Startup.cs类。如果您在这里选择不验证，我们将自己创建一个启动类。

3).安装SignalR以打开工具|库包管理器|包管理器控制台，然后运行以下命令。这一步将一组脚本文件和程序集引用添加到项目中，以启用SignalR函数。

输入：安装包微软。aspnet.signalr。

安装完成后，脚本文件夹中会出现如下文件：

4).创建启动类：

在根目录下创建一个类，并将其命名为启动：

使用Owin使用微软。Owin[assembly : OwInstarTop(type of(SignalChat。Startup))]命名空间signal chart { public class Startup { public void Configuration(IAppBuilder app){//任何连接或集线器连线和配置都应该到这里app。mapsignor()；} }}5).在项目中添加集线器文件夹并添加现有项目：右键单击集线器文件夹，单击添加|新建项目，然后在已安装的窗格中选择Visual C# |Web |然后选择Signaler节点。从中间窗格中，选择然后选择信号中枢类(v2)并创建ChatHub.cs

修改代码：

使用系统；使用系统。Web使用微软。信号员；命名空间signal chart { public class ChatHub : Hub { public void Send(字符串名称，字符串消息){ //调用addNewMessageToPage方法更新客户端。客户。All.addNewMessageToPage(名称，消息)；} }}6).编辑家庭控制器类。在controller/homecontroller . cs中，将下列方法添加到类中。此方法返回聊天视图，您将在以下步骤中创建该视图。

公共操作结果聊天(){返回视图()；}7).右键单击聊天()方法以添加视图页面

修改后的代码为：

@{ ViewBag .标题='聊天；}h2Chat/h2div class='container '输入类型='text' id='message' /输入类型='button' id='sendmessage '值='发送'/输入类型=' hidden ' id=' display name '/ul id=' discussion '/ul/div @ section scripts {！-脚本引用。- !jQuery库是必需的，默认情况下在_Layout.cshtml中引用。-参考信号库. script-src=' http : ~/Scripts/jquery。二号先生。0 .3 .量滴js '/脚本！-参考自动生成的信号中枢脚本. script-src=' http : ~/signor/hubs '/script！-更新聊天页面和发送消息的信号脚本- script $(function () { //建立对应计算机网络服务器端集线器类的对象，请注意聊天中心（中心文件夹下的类名)的第一个字母要改成小写var chat=$ .connection.chatHub//定义客户端的java描述语言函数，供计算机网络服务器端轮毂，通过动态的的方式，调用所有客户的java描述语言函数聊天。客户。addnewmessagetopage=函数（名称，消息){ //这里的功能（名称、消息)=ChatHub.cs中的发送（字符串名称，字符串消息)//当计算机网络服务器端调用发送消息时，将服务器推送的消息数据，呈现在完整消息中$(' #讨论').追加(“listrong”HTMlencode(name)'/strong :“HTMlencode(message)'/Li ')；};//获取用户名并将其存储在消息前面$('#displayname ').val(提示('输入您的姓名： ',' ');//将初始焦点设置到消息输入框$('#message ').焦点();//把关系打开$.connection.hub.start().done(function(){ $(' # send message ')).单击(函数(){ //调用叫计算机网络服务器端的中心对象，将#消息数据传给服务器聊天。服务器。发送($(“#显示名称”).val()，$('#message ').val())；$('#message ').val(" ")。焦点();});});});//这个可选函数对消息进行超文本标记语言编码，以便在页面中显示。函数htmlEncode(value){ var encodedValue=$(' div/').文本（值)。html()；返回编码值；} /script}F5运行项目就可以实现上面的效果，可以有用户实时加入实时同步聊天。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。