zoukankan      html  css  js  c++  java
  • 消息推送SignalR简单实例

    消息推送SignalR:一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信。

    功能:当所连接的客户端变得可用时服务器代码可以立即向其推送内容,而不是让服务器等待客户端请求新的数据。

    可参考:http://www.cnblogs.com/ssk-bak/p/5799976.html

    前台关键之处:

    1首先获取客户端页面的名字;

    2然后通过 $.connection.chat 建立对应服务器端 Hub 类的代理对象 chat;

    3服务器通过 dynamic 方式调用客户端的该方法以实现推送功能。在这里每当收到服务器推送来的消息,就在客户端页面的 discussion 列表追加该消息。

    4当点击发送所有用户按钮时,客户端通过代理对象调用服务器端的 send 方法以实现向服务器发送消息。当点击发送给指定用户按钮,并填写在线的用户时,客户端通过代理对象调用服务器端的 send 方法以实现向服务器发送消息给指定用户,可同时开启两个窗口测试。

    5通过 $.connection.hub.start(); 语句打开链接。

    实现代码:

    后台:

    1.先登录,登录后用户名会记录在一个Dictionary容器中:

            /// <summary>
            /// 用户的connectionID与用户名对照表
            /// </summary>
            private readonly static Dictionary<string, string> UserDictionary = new Dictionary<string, string>();
            /// <summary>
            /// 用户上线函数
            /// </summary>
            /// <param name="name"></param>
            public void sendLogin(string name)
            {
                if (!UserDictionary.Keys.Contains(name))
                {
                    //这里便是将用户名和连接ID存入
                    UserDictionary.Add(name, Context.ConnectionId);
                }
                else
                {
                    //每次登陆id会发生变化
                    UserDictionary[name] = Context.ConnectionId;
                }
            }

    2.将信息发送给所有用户或指定用户:

            //发送信息到指定用户
            public void Send(string fromName, string toName, string message)
            {
                if (UserDictionary[toName] != null)
                {
                    Clients.Client(UserDictionary[toName]).broadcastMessage(fromName, message);
                }
            }
            //广播所有信息
            public void Send(string name, string message)
            {
                Clients.All.broadcastMessage(name, message);
            }

    前台:

    <body>
        <div class="container">
            当前用户:<input type="text" id="displayname" hidden="hidden" /><label id="uName"></label>
            <br /><br />
            发送消息:<input type="text" id="message" />
            <input type="button" id="sendmessage" value="发送给所有用户" />&nbsp;&nbsp;
            <input type="text" id="toUser" name="toUser" />
            <input type="button" id="sendTouser" value="发送给指定用户" />
            <br />
            <div>
                接收信息:
            </div>
            <ul id="discussion"></ul>
        </div>
        <!--Script引用-->
        <script src="Scripts/jquery-1.6.4.min.js"></script>
        <script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
        <script src="signalr/hubs"></script>
        <!--更新页面并发送消息-->
        <script type="text/javascript">
            $(function () {
                //启用日志记录
                $.connection.hub.logging = true;
                // Declare a proxy to reference the hub.
                var chat = $.connection.chatHub;
                // 创建回调函数
                chat.client.broadcastMessage = function (name, message) {
                    // 显示namemessage.
                    var encodedName = $('<div />').text(name).html();
                    var encodedMsg = $('<div />').text(message).html();
                    //在页面中显示
                    $('#discussion').append('<li><strong>' + encodedName + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
                };

                // 页面开始时输入用户名,保存来显示该用户相关信息(实际用户登入系统是自动设置)
                $('#displayname').val(prompt('输入用户名:', ''));
                document.getElementById("uName").innerHTML = $('#displayname').val();
                // 将初始焦点设置为消息输入框。
                $('#message').focus();

                //开启客户端(web)与服务器端连接
                $.connection.hub.start().done(function () {
                    var username = $('#displayname').val();
                    chat.server.sendLogin(username);
                    $('#sendmessage').click(function () {
                        // 调用发送方法,发送给所有用户
                        chat.server.send($('#displayname').val(), $('#message').val());
                        $('#message').val('').focus();
                    });
                    $('#sendTouser').click(function () {
                        // 调用发送方法,发送给指定用户
                        var touser = $('#toUser').val();
                        chat.server.send(username, touser, $('#message').val());
                    });
                });
            });
        </script>
    </body>

    效果图:

    image

    image

  • 相关阅读:
    python 端口扫描仪
    [ruby on rails] 深入(1) ROR的一次request的响应过程
    [ruby on rails] 跟我学之(10)数据输入验证
    [ruby on rails] 跟我学之(9)删除数据
    [ruby on rails] 跟我学之(8)修改数据
    [ruby on rails] 跟我学之(7)创建数据
    BZOJ 2301 [HAOI2011]Problem b (分块 + 莫比乌斯反演)
    BZOJ 2005 [Noi2010]能量采集 (数学+容斥 或 莫比乌斯反演)
    BZOJ 1497 [NOI2006]最大获利 (最小割)
    BZOJ [FJOI2007]轮状病毒 (找规律)
  • 原文地址:https://www.cnblogs.com/CIreland/p/6748359.html
Copyright © 2011-2022 走看看