使用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. extjs文件上传

    EXT学习教程:http://www.cnblogs.com/iamlilinfeng/category/385121.html Ext文件上传: 例子用到的jar:   1.upload.js /* ...

  2. javascript Math.pow 函数 详解

    语法 Math.pow(x,y) 定义和用法 pow() 方法可返回 x 的 y 次幂的值. 处理简单数学问题 6的4次方等于1296,记作:64=1296; 求值: Math.pow(6,4)=12 ...

  3. Bootstrap页面布局13 - BS按钮

    bootstrap中的按钮类 一般可以作为按钮的标签有:<a></a>  <button></button>  <input type='butt ...

  4. [转]20个高级Java面试题汇总

    http://saebbs.com/forum.php?mod=viewthread&tid=37567&page=1&extra= 这是一个高级Java面试系列题中的第一部分 ...

  5. w-WAITING---

    <p id="w_last" style="color: red; font-size: 6em;">w-WAITING---</p>& ...

  6. VC 中 UpdateData() 函数的使用

    UpdateData(FALSE)与UpdateData(TRUE)是相反的过程 UpdateData(FALSE)是把程序中改变的值更新到控件中去 UpdateData(TRUE)是把在控件中输入的 ...

  7. membership 在web.config中配置信息

    <?xml version="1.0" encoding="utf-8"?><configuration> <configSect ...

  8. hive运行的相关配置

    一:执行SQL的方式 1.配置的键值 2.minimal下运行fetch 3.设定hive.fetch.task.conversion=more 4.在more下运行fetch 二:虚拟列 一共三个虚 ...

  9. Java Socket Option

    选项 public final static int TCP_NODELAY = 0x0001; public final static int SO_REUSEADDR = 0x04; public ...

  10. 在css中定义滚动条样式

    1,Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上三个属性设置 ...