使用SignalR+Asp.net创建实时聊天应用程序

一.概述:

使用 ASP.NET 那么 SignalR 2 创建一个实时聊天应用程序。将 SignalR 添加 MVC 5 应用程序中,并创建聊天视图发送并显示消息。

在Demo中,将学习SignalR 开发任务包括 ︰
向 MVC 5 应用程序添加那么 SignalR 图书馆。
创建集线器和浩然启动类,以将内容推送到客户端。
使用 web 页中的那么 SignalR jQuery 库发送邮件并显示更新从集线器。

下面的屏幕快照显示在浏览器中运行的已完成的聊天应用程序。

2.实现:

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

1>.在 Visual Studio 中,创建一个 C# ASP.NET 应用程序的目标.NET 框架 4.5,命名为 SignalRChat,并单击确定.

2>.在New ASP.NET Project对话框中,选择MVC和单击更改身份验证

注意:如果应用程序选择一个不同的身份验证提供程序,将创建Startup.cs类,这里选择无身份验证所有我们自己创建一个Startup类。

3>.安装SignalR
打开工具 |库包管理器 |程序包管理器控制台,然后运行以下命令。此步骤向项目中添加一组脚本文件和启用那么 SignalR 功能的程序集引用。

输入:install-package Microsoft.AspNet.SignalR

安装完成,Scripts文件夹下出现了这样的文件:

4>.创建Startup类:

在根目录下创建类,命名为Startup:

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

5.>在项目中添加Hubs文件夹,添加现有项:
鼠标右键单击Hubs文件夹,请单击添加|新项目,选择Visual C# |Web |那么 SignalR节点在已安装窗格中,从中心窗格中,选择那么 SignalR 集线器类 (v2)并创建名为ChatHub.cs。

修改代码:

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

6>.编辑HomeController类发现在Controllers/HomeController.cs中,将以下方法添加到类。此方法返回的聊天的视图,您将在后面的步骤中创建。

public ActionResult Chat()
{
    return View();
}

7>.在Chat()方法上右键>添加视图页

修改代码为:

 1 @{
 2     ViewBag.Title = "Chat";
 3 }
 4 <h2>Chat</h2>
 5 <div class="container">
 6     <input type="text" id="message" />
 7     <input type="button" id="sendmessage" value="Send" />
 8     <input type="hidden" id="displayname" />
 9     <ul id="discussion"></ul>
10 </div>
11 @section scripts {
12     <!--Script references. -->
13     <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
14     <!--Reference the SignalR library. -->
15     <script src="~/Scripts/jquery.signalR-2.0.3.min.js"></script>
16     <!--Reference the autogenerated SignalR hub script. -->
17     <script src="~/signalr/hubs"></script>
18     <!--SignalR script to update the chat page and send messages.-->
19     <script>
20         $(function () {
21             // 建立对应server端Hub class的对象,请注意ChatHub(Hubs文件夹下的类名)的第一个字母要改成小写
22             var chat = $.connection.chatHub;
23             // 定义client端的javascript function,供server端hub,通过dynamic的方式,调用所有Clients的javascript function
24             chat.client.addNewMessageToPage = function (name, message) { //这里的fuction(name,message)=>ChatHub.cs 中的Send(string name, string message)
25                 //当server端调用sendMessage时,将server push的message数据,呈现在wholeMessage中
26                 $(‘#discussion‘).append(‘<li><strong>‘ + htmlEncode(name)
27                     + ‘</strong>: ‘ + htmlEncode(message) + ‘</li>‘);
28             };
29             // Get the user name and store it to prepend to messages.
30             $(‘#displayname‘).val(prompt(‘Enter your name:‘, ‘‘));
31             // Set initial focus to message input box.
32             $(‘#message‘).focus();
33             //把connection打开
34             $.connection.hub.start().done(function () {
35                 $(‘#sendmessage‘).click(function () {
36                     //调用叫server端的Hub对象,将#message数据传给server
37                     chat.server.send($(‘#displayname‘).val(), $(‘#message‘).val());
38                     $(‘#message‘).val(‘‘).focus();
39                 });
40             });
41         });
42         // This optional function html-encodes messages for display in the page.
43         function htmlEncode(value) {
44             var encodedValue = $(‘<div />‘).text(value).html();
45             return encodedValue;
46         }
47     </script>
48 }

F5运行项目就可以实现上面的效果,可以有用户实时加入实时同步聊天。

时间: 2024-10-25 09:28:01

使用SignalR+Asp.net创建实时聊天应用程序的相关文章

【使用SignalR+Asp.net创建实时聊天应用程序】

一.概述: 使用 ASP.NET 那么 SignalR 2 创建一个实时聊天应用程序.将 SignalR 添加 MVC 5 应用程序中,并创建聊天视图发送并显示消息. 在Demo中,将学习SignalR 开发任务包括 ︰ 向 MVC 5 应用程序添加那么 SignalR 图书馆. 创建集线器和浩然启动类,以将内容推送到客户端. 使用 web 页中的那么 SignalR jQuery 库发送邮件并显示更新从集线器. 下面的屏幕快照显示在浏览器中运行的已完成的聊天应用程序. 2.实现: 创建一个 A

SignalR2实时聊天

SignalR2实时聊天 NuGet包中搜索SignalR添加引用 using Microsoft.AspNet.SignalR; 创建OWIN启动类 namespace SignalRChat { public class Startup { public void Configuration(IAppBuilder app) { app.MapSignalR(); } } } 创建SignalR Hub类 namespace SignalRChat { public class ChatHu

ASP.NET Web实时消息后台服务器推送技术---GoEasy

越来越多的项目需要用到实时消息的推送与接收,怎样用ASP.NET现最方便呢?我这里推荐大家使用GoEasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送! 浏览器兼容性:GoEasy推送 支持websocket 和polling两种连接方式,从而可以支持IE6及其以上的所有版本,同时还支持其它浏览器诸如Firefox, Chrome, Safari 等等. 支持不同的开发语言:    GoEasy推送 提供了Restful API接口,无论你的后台程序用的是哪种语言都可以通过

ASP.NET 使用application和session对象写的简单聊天室程序

ASP.Net中有两个重要的对象,一个是application对象,一个是session对象. Application:记录应用程序参数的对象,该对象用于共享应用程序级信息. Session:记录浏览器端的变量对象,用来存储跨网页程序程序的变量或者对象. 说实话,写了快一年的asp.net,application对象还真没怎么用过.看了看书,根据这两个对象的特性写了一个简单的聊天室程序.真的是非常的简陋. 我的思路是,有两个页面Default页和ChatRoom页,页面布局如图: Default

Node.js websocket 使用 socket.io库实现实时聊天室

认识websocket WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duple).一开始的握手需要借助HTTP请求完成. 其实websocket 并不是很依赖Http协议,它也拥有自己的一套协议机制,但在这里我们需要利用的socket.io 需要依赖到http . 之前用java jsp写过一个聊天,其实实现逻辑并不难,只是大部分时间都用在UI的设计上,其实现原理就是一个基于websocket的通信,要想做一个好的聊天室,我觉得大部

基于comet服务器推送技术(web实时聊天)

http://www.cnblogs.com/zengqinglei/archive/2013/03/31/2991189.html Comet 也称反向 Ajax 或服务器端推技术.其思想很简单:将数据直接从服务器推到浏览器,而不必等到浏览器请求数据. 主要思想:服务器端将数据推送到客户端(浏览器) 本人做了简单的web实时聊天系统:服务器推送(聊天).zip 系统简单说明如下: { 系统所用数据库:sqlite数据库 UserInfo:用户信息表 UserRelation:用户关系表 Mes

WEB实时聊天 comet推技术

转自:http://www.cnblogs.com/wodemeng/archive/2012/04/06/2435302.html 今天晚上朋友遇到web服务端推技术的问题,自己就查了下资料,学习了下 源代码:http://files.cnblogs.com/wodemeng/AspNetComet.zip Comet 有时也称反向 Ajax 或服务器端推技术(server-side push).其思想很简单:将数据直接从服务器推到浏览器,而不必等到浏览器请求数据. =============

Asp.net创建伪静态页面

下面是我研究了好几天和同事一起才研究出来的,原创. 1伪静态的定义: 伪静态是相对真实静态来讲的,通常我们为了增强搜索引擎的友好面,都将文章内容生成静态页面,但是有的朋友为了实时的显示一些信息.或者还想运用动态脚本解决一些问题.不能用静态的方式来展示网站内容.但是这就损失了对搜索引擎的友好面.怎么样在两者之间找个中间方法呢,这就产生了伪静态技术.就是展示出来的是以html一类的静态页面形式,但其实是用ASP一类的动态脚本来处理的. 2伪静态的实现: 2.1创建URL重写类URLRewiter.c

Python项目实战教程:web实时聊天室项目

新课强力来袭:基于Node.js的web实时聊天室项目! 麦子学院新课以马踏飞燕般的速度生粗来啦(*^__^*) .小伙伴们你萌确定不来一发吗? 啦啦啦--上图镇楼↓↓↓ 那些神奇的传送门→_→ 本课程:http://www.maiziedu.com/course/others/597-8698/ 李大大主页:http://www.maiziedu.com/group/common/course/59404/ 这里是正儿八经的课程介绍(快看快看o( ̄ヘ ̄o#)): 网站实时通讯一体化解决方案,采