服务器推送消息到客户端 SignalR 弹出消息

最新推荐文章于 2020-10-08 23:45:59 发布

xuanwuziyou

最新推荐文章于 2020-10-08 23:45:59 发布

阅读量2.8k

点赞数

分类专栏： .Net技术文章标签：服务器前端消息推送

本文链接：https://blog.csdn.net/xuanwuziyou/article/details/37660061

版权

.Net技术专栏收录该内容

26 篇文章 3 订阅

订阅专栏

1.先来看一下成果：

打开多个客户端，输入不同的用户名：

用xuanwuziyou用户给pet用户发送消息，点击发送之后，pet用户即收到新消息弹出提示：

2.技术：Asp.net的SignalR,详情见官网 http://www.asp.net/signalr
http://www.asp.net/signalr/overview/signalr-20/getting-started-with-signalr-20/tutorial-getting-started-with-signalr-20
使用环境：VS2013 WebForm项目。
3.新建一个WebApplication的空项目，项目结构：

4.步骤1：添加ChatHub.cs类，如下：

ChatHub.cs代码：

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

namespace SignalRChat
{
    public class ChatHub : Hub
    {

        public void SendEmail(string receiver, string sender, string message)
        {
            //调用广播方法推送消息到客户端
            Clients.All.broadcastMessage(receiver, sender, message);
        }
    }
}

步骤2：添加Startup.cs类，如下：

Startup.cs代码：

using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(SignalRChat.Startup))]

namespace SignalRChat
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            // Any connection or hub wire up and configuration should go here
            app.MapSignalR();
        }
    }
}

添加上这两个类，那么项目所需要的Scripts文件和引用就会自动添加进来。

步骤3：添加一个Html页叫做“邮件通知.html”，内容如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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.js"></script>
    <script src="/signalr/hubs"></script>
    <script>
        var username;
        $(function () {
            $("#notify").hide();

            $("#submit").click(function () {
                username = $("#username").val();
                $("#tishi").html("当前用户： " + username);
                $("#shuru").hide();
                $("#username").hide();
                $("#submit").hide();
            });

            var chat = $.connection.chatHub;
            chat.client.broadcastMessage = function (receiver, sender, message) {//显示从服务端收到的信息
                if (username == receiver) {
                    $("#sender").text(sender);
                    $("#receiveMsg").text(message);
                    $("#notify").slideDown();
                }
            };

            $.connection.hub.start().done(function () {//发送信息到服务端

                $('#sendmsg').click(function () {
                    chat.server.sendEmail($("#receiver").val(), username, $("#msg").val());
                });

            });

            $("#cancle").click(function () {
                $("#notify").slideUp();
            });
        });
    </script>
</head>
<body>
    <h1>邮件通知</h1>
    <label id="shuru">请输入用户名：</label>
    <input type="text" id="username" />
    <input type="button" id="submit" value="确定" />
    <br /><label id="tishi"></label>
    <hr />
<div>
    收件人：<input type="text" id="receiver" />
    <br />内容：<input type="text" id="msg" />
    <br /><br /><input type="button" id="sendmsg" value="发送"/>
</div>

    <p></p>
    <div id="notify" style="width:300px;height:140px;float:right;margin-bottom:10px;border:solid;background-color:yellow;">
        <br />
        <br />
        新消息来自:  <span id="sender"></span><br />
        内容：<span id="receiveMsg"></span>
        <br /><br /><br />
        <input type="button" id="cancle" value="我知道啦" style="float:right"/>
    </div>

</body>
</html>

5.然后就可以生成项目并运行了。

6.讲解：ChatHub.cs中的SendEmail(string receiver, string sender, string message)方法由我们自己编写，

这个方法在前端的javascript中被调用了：

$.connection.hub.start().done(function () {//发送信息到服务端

                $('#sendmsg').click(function () {
                    chat.server.sendEmail($("#receiver").val(), username, $("#msg").val());
                });

            });

只是把SendEmail调用时写作sendEmail,即第一个字母小写。这个方法在当singalr准备好之后，
在前端调用后台的方法把数据广播出去。

chat.client.broadcastMessage = function (receiver, sender, message) {//显示从服务端收到的信息
                if (username == receiver) {
                    $("#sender").text(sender);
                    $("#receiveMsg").text(message);
                    $("#notify").slideDown();
                }
            };

这个方法，正是客户端收到了服务器广播发来的数据之后调用的方法，收到的参数正是我们在
SendEmail中规定传送的参数。本程序中把收到的信息弹出给相应的用户。

就这样，实现了信息的实时推送，也就是服务器端主动向客户端推送消息的方式。结束。