使用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. prior knowledge

    https://en.wikipedia.org/wiki/Bayes'_theorem For example, if cancer is related to age, then, using B ...

  2. javaee基本环境搭建

    安装包 安装jdk :D:\Program Files\Java\jdk1.7.0_17 下载tomcat:E:\apache-tomcat-6.0.36 下载maven:E:\apache-mave ...

  3. php--纯静态和伪静态的区别与关系

    先前说了什么是纯静态和伪静态,现在介绍一下他们的区别? 首先肯定的是纯静态和伪静态都是SEO的产物,但纯静态和伪静态还是有很大区别的.纯静态是生成真实的HTML页面保存到服务器端,用户访问时直接访问这 ...

  4. SQL SERVER中非聚集索引的覆盖，连接，交叉，过滤

    1.覆盖索引:select和where中包含的结果集中应存在“非聚集索引列”,这样就不用查找基表了,索引表即可搞定:   2.索引交叉:索引的交叉可以理解成建立多个非聚集索引之间的join,如表实体一 ...

  5. 简单的form表单

    效果 html <ul class="edit_list"> <li><em>*</em><span class=" ...

  6. Top Five Communication Skills for Project Managers

    Research among project managers globally identifies top communication skills for leading teams. Lead ...

  7. Java学习-023-Properties 类 XML 配置文件读取及写入源代码

    之前的几篇 Properties 文章已经讲述过了 Java 配置文件类 Properties 的基本用法,查看 JDK 的帮助文档时,也可看到在 Properties 类中还有两个方法 loadFr ...

  8. JDK version

    Java 1.2 uses major version 46 Java 1.3 uses major version 47 Java 1.4 uses major version 48 Java 5 ...

  9. 微信支付开发(4) 动态链接Native支付

    关键字:微信支付 微信支付v3 动态native支付 统一支付 Native支付 prepay_id 作者:方倍工作室原文: http://www.cnblogs.com/txw1958/p/wxpa ...

  10. django工作原理