因为项目需要，需要在网页上实现消息的推送。在百度上搜索了一下，发现实现网页上的消息推送，可以使用asp.net 中的SignalR类库，当然也可以使用H5的WebSocket  Ajax的轮回。当然此处我们使用asp.net 中的SignalR类库。因为它可以实现网页上消息的实时推送。什么是实时推送呢，我简单的说一下我个人的理解吧。实时：在同一时间类发生的事情，当然在计算机中并不是绝对的实时，因为CPU在同一时间片只能处理一个任务，那么这个时候疑问又来了？我们平时使用电脑又上网，又听音乐是如何实现的呢，因为现在的CPU的计算速度很快。CPU会把处理不同的任务的时间片，CPU会把时间片划到很小，很小，小到我们人类感知不到。比如在现在这个时间片上，CPU正在处理音乐任务,在下一个时间片的时候,CPU又在处理上网任务。所以我认为在计算机并没有绝对的实时，只是我们人类感知不到罢了。推送：在此处的推送是指在网页消息推送。例如：用户A和B分别在各自的电脑打开打开一个相同的消息推送网页。假设用户A现在向用户B发送消息。就要经历一个这样的过程 用户A->Server->用户B。当然具体的底层实现过程，我就不在些探讨了哈。因为这个不是现在所要探讨的主题。因为Server有地址一般是固定不变的。所以客户端向服务器发送消息比较容易，因为目的地址固定。那服务器如何向客户端发送消息呢，这个就有点难道了因为客户端的地址不固定的，并且http是无状态的是不能记住用户的地址的。所以为了解决这一个问题。计算机的先辈们用到了几个方法，1、客户端"心跳"。每隔一段时间去访问服务器，看看服务器有没有任务给其客户端。Ajax的轮回就是使用的这个方法。缺点就是实时性不太高。2、服务端和客户端的长连接，本文所要谈到的SignalR就是用的这种思想。缺点：服务器的压力大。

好了，现在就说一下什么是SignalR吧。SignalR 是为 ASP.NET 开发人员提供的一个库，可以简化开发人员将实时 Web 功能添加到应用程序的过程。实时 Web 功能是指这样一种功能：当所连接的客户端变得可用时服务器代码可以立即向其推送内容，而不是让服务器等待客户端请求新的数据。这个也就实现消息的实时推送。我个人理解的实现原理是首先由服务器定制一个函数用于一个客户端调用将消息发送给另一个客户端。当然客户端也需要定抽一个函数。因为服务器需要调用客户端的这个函数。

下面就说下具体的操作方法吧。

1、环境：win 10+VS2015 社区版

我使用asp.net mvc。首先打开VS 2015|文件|新建|项目（SignalRMvc）|asp.net Web应用程序|空模板，MVC，平台大概就是这样了。

现在说下具体需要包含的文件吧。

1、SignalR集线器类。用于写一个访求调用客户段的函数。

2、OWIN类。用于注册服务器的函数。

3、前台的页面(包括前台的消息框的编写，函数的编写)当然前台需要一些文件。

一般VS没有自带SignalR类，需要我们在开始任务之前去添加这个功能。选择VS的工具|Nuget包管理器|Nuget包管理器控制台|Install-Package Microsoft.Aspnet.SignalR去安装SignalR。安装完成后，1、我们在改项目中新建一个文件夹为ChatHubs|新建一个SignalR集线器类，并写上如下代码：

using Microsoft.AspNet.SignalR;

namespace SignalRMvc.ChatHubs

{

    public class ChatHub : Hub

    {

        public void SendMessage(string name,string message)

        {

            //  Clients.All.hello();

            Clients.All.receiveMessage(name, message);

            //用户调用客户端的函数

        }

    }

}

2、在ChatHubs文件夹下新建一个OWIN类。并写上如下代码：

using Microsoft.Owin;

using Owin;

[assembly: OwinStartup(typeof(SignalRMvc.ChatHubs.Startup))]

namespace SignalRMvc.ChatHubs

{

    public class Startup

    {

        public void Configuration(IAppBuilder app)

        {

            app.MapSignalR();

            //服务器的hub注册

        }

    }

}

3、在Controllers新建一个Home控制器。并写上如下代码：

using System.Web.Mvc;

namespace SignalRMvc.Controllers

{

    public class HomeController : Controller

    {

        // GET: Home

        public ActionResult ClientChat()

        {

            return View();

        }

    }

}

4、在控制器的方法上右击添加视图(不使用模板，也不使用布局页)后。并写上如下代码:

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />

    @* BootStarp的引入*@

    <style>

        #message_box {

            height: 400px;

            overflow-y: scroll;

        }

    </style>

    @* 呈现消息 *@

</head>

<body>

    <div class="container">

        <div class="row">

            <div class="jumbotron">

                <ul id="message_box"></ul>

            </div>

            发送者名称:<input id="text_name" class="form-control" /><br />

            消息内容:

            <textarea id="text_message" class="form-control" rows=""></textarea>

            <br />

            <button id="btn_send" class="btn btn-block btn-success">Send</button>

        </div>

    </div>

    <script src="~/scripts/jquery-3.1.0.min.js"></script>

    <script src="~/scripts/jquery.signalR-2.2.1.min.js"></script>

    @* 上述引入的两个文件的顺序不以交换，因为下面这个文件依赖于上面那个文件 *@

    <script src="~/signalr/hubs"></script>

    <!-- 本地没有，动态生成 -->

    <script>

        $(function () {

            var $messageBox = $('#message_box');

            var $textMessage = $('#text_message');

            var $textName = $('#text_name');

            //客户端先与服务器连接起来，拿到服务器的代理操作对象

            var hubConnection = $.connection.chatHub;

            //注册客户端函数

                hubConnection.client.receiveMessage = function (name, message) {

                $messageBox.append('<li><b>' + name + '</b> say:' + message + '</li>')

            }

            //启动连接到服务器

            $.connection.hub.start().done(function () {

                $('#btn_send').bind('click', function () {

                    //调用服务端的函数

                    hubConnection.server.sendMessage($textName.val(), $textMessage.val());

                });

            });

        });

    </script>

</body>

</html>

如果直接复制使用。要注意前台的代码引入的文件的目录及版本。前台代码的命名的首字母最好使用小写，后台代码的首字母最好使用大写。因为js默认使用的是驼峰命名法，C Sharp使用帕斯卡命名方式。如果没有注重这个细节就会很容易出错。因为后台代码在执行的时候会动态的生成一些JS代码,JS代码的默认使用的驼峰命名法。如果你在前台的代码用了帕斯卡命名方式就很容易出错了。并且还不好找。我是有过亲身经历的。

下面我们在本地测试下：分别使用FireFox和Chrome来模拟两个客户端，当然自身的电脑也就服务端。效果图如下：

当然我是一个菜鸟中的菜鸟哈。肯定有许多理解的不对的地方。希望各位大神们指出哈。

补充一下，大家可以参考asp.net的官网哈。http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr-and-mvc。当然也可以看一下相关的视频哈，我看就是传智播客上的视频哈，代码也是跟视频一步一步走的。不是打广告哈，只是单纯的技术分享。写篇博客出来就是为了具体的方法思路整理出来，当然也是为了写一下自己对这个东西的理解吧。

asp.net mvc 实现简单的实时消息推送的更多相关文章

  1. C# ASP.NET MVC 之 SignalR 学习 实时数据推送显示 配合 Echarts 推送实时图表

    本文主要是我在刚开始学习 SignalR 的技术总结,网上找的学习方法和例子大多只是翻译了官方给的一个例子,并没有给出其他一些经典情况的示例,所以才有了本文总结,我在实现推送简单的数据后,就想到了如何 ...

  2. 未读消息（小红点），前端与 RabbitMQ实时消息推送实践，贼简单~

    前几天粉丝群里有个小伙伴问过:web 页面的未读消息(小红点)怎么实现比较简单,刚好本周手头有类似的开发任务,索性就整理出来供小伙伴们参考,没准哪天就能用得上呢. 之前在 <springboot ...

  3. 开源实时消息推送系统 MPush

    系统介绍 mpush,是一款开源的实时消息推送系统,采用java语言开发,服务端采用模块化设计,具有协议简洁,传输安全,接口流畅,实时高效,扩展性强,可配置化,部署方便,监控完善等特点.同时也是少有的 ...

  4. 基于socket.io的实时消息推送

    用户访问Web站点的过程是基于HTTP协议的,而HTTP协议的工作模式是:请求-响应,客户端发出访问请求,服务器端以资源数据响应请求. 也就是说,服务器端始终是被动的,即使服务器端的资源数据发生变化, ...

  5. 我有 7种 实现web实时消息推送的方案，7种！

    技术交流,公众号:程序员小富 大家好,我是小富- 我有一个朋友- 做了一个小破站,现在要实现一个站内信web消息推送的功能,对,就是下图这个小红点,一个很常用的功能. 不过他还没想好用什么方式做,这里 ...

  6. Worktile中百万级实时消息推送服务的实现

    Worktile中百万级实时消息推送服务的实现 出自:http://blog.jobbole.com/81125/

  7. 【js学习】js连接RabbitMQ达到实时消息推送

    js连接RabbitMQ达到实时消息推送 最近在自己捯饬一个网站,有一个功能是需要后端处理完数据把数据发布到MQ中,前端再从MQ中接收数据.但是前端连接MQ又成了一个问题,在网上搜了下资料,点进去一篇 ...

  8. node.js中使用socket.io + express进行实时消息推送

    socket.io是一个websocket库,包含客户端的js和服务端的node.js,可以在不同浏览器和移动设备上构建实时应用. 一.安装 socket.io npm install socket. ...

  9. 用图解&&实例讲解php是如何实现websocket实时消息推送的

    WebSocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. 以前的推送技术使用 Ajax 轮询,浏览器需要不断地向服务器发送http请求来获取最新的数据,浪费很多的带 ...

随机推荐

  1. ACM基础(一)

    比较大的数组应尽量声明在main函数外,否则程序可能无法运行. C语言的数组并不是“一等公民”,而是“受歧视”的.例如,数组不能够进行赋值操作: 在程序3-1中,如果声明的是“int a[maxn], ...

  2. 创建springboot的聚合工程（二）

    前篇已经成功创建了springboot的聚合工程并成功访问,下面就要开始子工程木块之间的调用: springboot项目的特点,一个工程下面的类必须要放在启动类下面的子目录下面,否则,启动的时候会报错 ...

  3. python- Socket & Mysql 重要知识点

    socket :           解决粘包 并发编程          生产者消费者模型          进程池和线程池          回调函数          GIL全局解释器锁(理论) ...

  4. leetcode-algorithms-11 Container With Most Water

    leetcode-algorithms-11 Container With Most Water Given n non-negative integers a1, a2, ..., an , whe ...

  5. sqlite3 查询表

    cx = sqlite3.connect("c:/数据库地址") # 打开数据库cu = cx.cursor()# query the tablerows = cu.execute ...

  6. MySQL-1236问题处理

      2018年9月26日 9:25 现象:192.168.7.206.192.168.7.207互为双主,同步报错  1236   7.206现象如下 root@mysqldb 09:15  [mys ...

  7. PAT 1035 Password

    1035 Password (20 分)   To prepare for PAT, the judge sometimes has to generate random passwords for ...

  8. CSS知识点（二）

    七.CSS的继承性和层叠性 继承性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设置属性的.不会牵扯到方法的层面. 继 ...

  9. volatile原理解析

    Java并发编程:volatile关键字解析 volatile 有序性.可见性 volatile可以保证一定程度上有序性,即volatile前面的代码先于后面的代码先执行. 但是前.后代码,各自里面的 ...

  10. 线程池 execute 和 submit 的区别

    代码示例: public class ThreadPool_Test { public static void main(String[] args) throws InterruptedExcept ...