使用vs2013新建一个空的asp.net 工程

添加SignalR集线器类MyHub.cs

 using System;

 using System.Collections.Generic;

 using System.Linq;

 using System.Web;

 using Microsoft.AspNet.SignalR;

 namespace SignalRDemo.Web

 {

     public class MyHub : Hub

     {

         public void Hello()

         {

             Clients.All.hello();

         }

         public void Send(string name, string message) {

             // call the broadcastmessage method to update clients.

             Clients.All.broadcastMessage(name, message);

         }

     }

 }

添加OWIN Startup类

 using System;

 using System.Threading.Tasks;

 using Microsoft.Owin;

 using Owin;

 [assembly: OwinStartup(typeof(SignalRDemo.Web.Startup))]

 namespace SignalRDemo.Web

 {

     public class Startup

     {

         public void Configuration(IAppBuilder app)

         {

             // 有关如何配置应用程序的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkID=316888

             // Any connection or hub wire up and configuration should go here.

             app.MapSignalR();

         }

     }

 }

添加index.html页面：

 <!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-1.10.2.js"></script>

     <!--Reference the SignalR library. -->

     <script src="Scripts/jquery.signalR-2.0.0.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.myHub;

             // 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>

运行效果：

f5后，需要账户登录框：

登录后，发送信息效果：

这里有一个比较好的应用：

http://bbs.csdn.net/topics/390933064

SignalR实时聊天功能的更多相关文章

  1. SignalR实现网页实时聊天功能

    SignalR是利用html5 sokit方式实现网页的实时性,在客户端不支持html5的情况下通过轮询实现 实现原理是客户端发送的消息先去服务器,然后服务器根据需要将消息广播到需要接收信息的客户群. ...

  2. 微信小程序实现即时通信聊天功能的实例代码

    项目背景:小程序中实现实时聊天功能 一.服务器域名配置 配置流程 配置参考URL:https://developers.weixin.qq.com/miniprogram/dev/api/api-ne ...

  3. [Asp.net 开发系列之SignalR篇]专题二：使用SignalR实现酷炫端对端聊天功能

    一.引言 在前一篇文章已经详细介绍了SignalR了,并且简单介绍它在Asp.net MVC 和WPF中的应用.在上篇博文介绍的都是群发消息的实现,然而,对于SignalR是为了实时聊天而生的,自然少 ...

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

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

  5. 使用signalr实现网页和微信公众号实时聊天(上)

    最近项目中需要实现客户在公众号中和客服(客服使用后台网站系统)进行实时聊天的功能.折腾了一段时间,实现了这个功能.现在将过程记录下,以便有相同需求的同行可以参考,也是自己做个总结.这篇是上,用手机编辑 ...

  6. 利用SignalR实现实时聊天

    2018/10/10:博主第一次写原创博文而且还是关于C#的(博主是从前端转过来的),菜鸟一枚,如果有什么写的不对,理解错误,还望各位轻喷.,从SignalR开始! 首先先介绍一下关于SignalR的 ...

  7. SignalR入门一、通过 SignalR 2 进行实时聊天

    一:什么是signalR Asp.net SignalR是微软为实现实时通信的一个类库.一般情况下,signalR会使用JavaScript的长轮询(long polling)的方式来实现客户端和服务 ...

  8. [Asp.net 开发系列之SignalR篇]专题三：使用SignalR实现聊天室的功能

    一.引言 在前一篇文章中,我向大家介绍了如何实现实现端对端聊天的功能的,在这一篇文章中将像大家如何使用SignalR实现群聊这样的功能. 二.实现思路 要想实现群聊的功能,首先我们需要创建一个房间,然 ...

  9. 基于vs2015 SignalR开发的微信小程序使用websocket实现聊天功能

    一)前言 在微信小程上实现聊天功能,大致有三种方式:1)小程序云开发 2)购买第三方IM服务 3)使用自己的服务器自己开发. 这里重要讲使用自己的服务器自己开发,并且是基于vs的开发. 网上提供的解决 ...

随机推荐

  1. unity 环境增强

        早上过来解决两个问题: (1)VS2012 配置下 VA_X 插件,现在VS在字体颜色方面已经提高很多,但是在类成员实时显示方面还是不方便,或者我没找到吧 (2)安装unityVs插件,微软把 ...

  2. JQ+rotate插件实现图片旋转，兼容IE7+ \ CHROME等浏览器

    插件:/jquery.rotate.min.js CODE: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  3. checkbox 全選、取消全選、反選

    在寫一個全選.取消全選.反選的功能時. 未來元素[type='checkbox'],在使用了jquery-1.11.1.min.js版本的jquery時: 功能版本1: 存在的問題,當使用了attr時 ...

  4. C#创建Excel

    创建Workbook说白了就是创建一个Excel文件,当然在NPOI中更准确的表示是在内存中创建一个Workbook对象流. 本节作为第2章的开篇章节,将做较为详细的讲解,以帮助NPOI的学习者更好的 ...

  5. 数据库MySql阶段总结

    S1数据库中最重要的是查询,对于查询要有一个好的理解模型是很关键的: 1. 每一个查询都会返回一个结果集,这个结果集可能是一个值,一个字段或者一个记录,甚至可能是一个表 返回一个值 SELECT * ...

  6. laravel paginate动态分页

    1.router Route::get('product', function(){ $products = App\Product::paginate(10); return view('produ ...

  7. ASP.NET WebForm与ASP.NET MVC的不同点

    ASP.NET WebForm ASP.NET MVC ASP.NET Web Form 遵循传统的事件驱动开发模型 ASP.NET MVC是轻量级的遵循MVC模式的请求处理响应的基本开发模型 ASP ...

  8. php项目域名绑定和替换

    ---恢复内容开始--- 在apache的httpd.conf里面找到 DocumentRoot "E:/xampp/htdocs"<Directory "E:/x ...

  9. PDO知识

    PDO: 一.含义: 数据访问抽象层 二.作用 :通过PDO能够访问其它的数据库 三. 用法: 1.造对象 ①$dsn="mysql:dbname=zz;host=localhost&quo ...

  10. yum-config-manager YUM安装遭遇: [Errno 256] No more mirrors to try CentOS yum之$releasever和$basearch

    YUM安装遭遇: [Errno 256] No more mirrors to try createrepo 有问题. CentOS yum之$releasever和$basearch分类: 操作系统 ...