通过SignalR实现实时消息推送

2023-10-21 22:16:28

前言

由于项目中需要实现实时消息推送功能，查看了很多实现方式觉得两种方式比较合适,SignalR和WebSocket。由于开发时间紧，没有过多的时间去分析研究WebSocket，所以选择了SignalR.这个对于我个人来说实现更快。后面我会继续补充上SignalR学习心得和笔记。此篇博客只简单的介绍如何快速实现一个实时消息推送，和聊天室。

介绍SignalR

ASP.NET SignalR 是一个为 ASP.NET 开发人员的库，简化了将实时 web 功能添加到应用程序的过程。实时Web功能使服务端代码推送内容到链接可客服端并立即应用成为可能，而不需要服务端等待客户端去请求数据。

SignalR可用于任何你想添加实时Web功能到ASP.NET应用程序的情形，聊天室是一个常用的例子，用户可以刷新Web页面来获得新的数据，或者页面使用一个长轮询来取回数据，这都是SignalR可以应用的场景。比如说仪表盘和监视系统，实时游戏等。

SignalR支持以一种简单的API来创建服务器到客户端的远程调用客户端的Javascript方法，SignalR还包括用于用于连接管理的API和分组连接

第一步:新建一个空白的Web项目

第二步：添加OWIN Startup类，并修改映射内容。

修改代码如下：

 1 using System;
 2 using System.Threading.Tasks;
 3 using Microsoft.Owin;
 4 using Owin;
 5 
 6 [assembly: OwinStartup(typeof(Test2.SRStartup))]
 7 
 8 namespace Test2
 9 {
10     public class SRStartup
11     {
12         public void Configuration(IAppBuilder app)
13         {
14             // 有关如何配置应用程序的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkID=316888
15             app.MapSignalR();
16         }
17     }
18 }

第三步：添加Hub类，并修改代码内容。

修改代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;

namespace Test2
{
     [HubName("MsgChat")]
    public class MyHub : Hub
    {
         public void sendMess(string Msg)
        {
            Clients.All.BroadMsg(string.Format("消息接收时间：{0}，内容：{1}", DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), Msg));
        }
    }
}

第四步：新建一个admin.aspx页面，在建设一个User.aspx页面.　

admin.aspx代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="admin.aspx.cs" Inherits="Test2.admin" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

    <script src="Scripts/jquery-1.10.2.min.js"></script>

    <script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
     
    <script src="signalr/hubs"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="button" id="send" value="打卡" />
    </div>
    </form>
</body>
</html>
<script>
    $(function () {
        // 声明一个代理引用该集线器,记得$.connection.后面的方法首字母必须要小写,这也是我为什么使用别名的原因
        var chat = $.connection.MsgChat;
        //这里是监听消息，当服务端发送消息时可以监听到
        chat.client.BroadMsg = function (name) {
            alert(name);
        };
        // 启动连接,这里和1.0也有区别
        $.connection.hub.start().done(function () {
            $('#send').click(function () {
                var message = "打卡";
                // 这里是调用服务器的方法,同样,首字母小写
                chat.server.sendMess(message);

            });
        });
    });
</script>

User.aspx页面代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="User.aspx.cs" Inherits="Test2.User" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
    
    <script src="signalr/hubs"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>
<script>
    $(function () {
        // 声明一个代理引用该集线器,记得$.connection.后面的方法首字母必须要小写,这也是我为什么使用别名的原因
        var chat = $.connection.MsgChat;
        //这里是监听消息，当服务端发送消息时可以监听到
        chat.client.BroadMsg = function (name) {
            alert(name);
        };

        // 启动连接,这里和1.0也有区别
        $.connection.hub.start().done(function () {
           
        });
    });
</script>

到这里实时消息推送就实现了，如果需要项目中的每个页面上都能接收到推送的消息，只需要将接收消息推送的js代码放到一个共用的模板里面就可以了。然后管理员端发送消息，客户端就可以接收到了。

如果要实现聊天室的功能我们只需要改造一下前端js代码就可以了，代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>MSG</title>
    <link rel="shortcut icon" href="/favicon.ico"/>
    <link rel="bookmark" href="/favicon.ico"/>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
    
    <script src="signalr/hubs"></script>
    <script type="text/javascript">
        $(function () {
            // 声明一个代理引用该集线器,记得$.connection.后面的方法首字母必须要小写,这也是我为什么使用别名的原因
            var chat = $.connection.MsgChat;
            // 这里是注册集线器调用的方法,和1.0不同的是需要chat.client后注册,1.0则不需要
            chat.client.BroadMsg = function (name) {
                // HTML编码的显示名称和消息。
                var encodedMsg = $('<div />').text(name).html();
                // 将消息添加到该页。
                $('#messsagebox').append('<li>' + encodedMsg + '</li>');
            };
            // 获取用户名称。
            $('#username').html(prompt('请输入您的名称:', ''));
            // 设置初始焦点到消息输入框。
            $('#message').focus();

            // 启动连接,这里和1.0也有区别
            $.connection.hub.start().done(function () {
                $('#send').click(function () {
                    var message = $('#username').html() + ":" + $('#message').val()
                    // 这里是调用服务器的方法,同样,首字母小写
                    chat.server.sendMess(message);
                    // 清空输入框的文字并给焦点.
                    $('#message').val('').focus();
                });
            });
        });
    </script>
</head>

<body>
    <div>
        <div >名称:<p id="username"></p></div>
        <div style="border-color:red;border:double">
            <ul id="messsagebox">
                <li>聊天窗口</li>
                <li></li>
            </ul>
        </div>
        <input type="text" value="" placeholder="请输入消息" id="message" />
        <button id="send">发送</button>
    </div>
</body>
</html>

　　到此就可以实现聊天室，和实时消息推送了。

写在最后，SignalR是很强大的，博主目前也只是刚学习，说的有什么不对的地方，欢迎各位大侠指点，相互学习。在此我也会好好深入的学习SignalR，后续会将自己的学习心得，和笔记分享出来...

参考博客

http://www.cnblogs.com/xibei666/p/5927749.html

Demo下载地址：http://pan.baidu.com/s/1i52VVJB

码农公寓

前言

介绍SignalR

相关文章