• Asp.NET MVC3 使用 SignalR 实现推


    一,简单介绍

    Signal 是微软支持的一个执行在 Dot NET 平台上的 html websocket 框架。

    它出现的主要目的是实现server主动推送(Push)消息到client页面,这样client就不必又一次发送请求或使用轮询技术来获取消息。

    二,实现机制

    SignalR 的实现机制与 .NET WCF 或 Remoting 是相似的,都是使用远程代理来实现。

    在详细使用上,有两种不同目的的接口:PersistentConnection 和 Hubs,当中 PersistentConnection 是实现了长时间的 Javascript 轮询(类似于 Comet),Hub 是用来解决实时信息交换问题。它是利用 Javascript 动态加载运行方法实现的。SignalR 将整个连接,信息交换过程封装得很美丽,client与server端所有使用 JSON 来交换数据。

    三,实现 Hub server端代码

    向project中新建 SignalR 文件夹,在当中加入 ChatHub.cs 文件。内容例如以下:

    namespace SignalTutorial.SignalR
    {
        [HubName("chat")]
        public class Chat : Hub
        {
            public void Send(string clientName, string message)
            {
                //var toSelfinfo = "You had sent message " + message;
                //Caller.addSomeMessage(clientName, toSelfinfo);
    
                // Call the addMessage method on all clients
                Clients.addSomeMessage(clientName, message);
                //Clients[Context.ConnectionId].addSomeMessage(clientName, data);
            }
        }
    }

    1),HubName 这个特性是为了让client知道怎样建立与server端相应服务的代理对象,假设没有设定该属性,则以server端的服务类名字作为 HubName 的缺省值;

    2),Chat 继承自 Hub。从以下 Hub 的接口图能够看出:Hub 支持向发起请求者(Caller)。全部client(Clients),特定组(Group) 推送消息。

    3),public void Send(string clientName, string message) 这个接口是被客户端通过代理对象调用的。

    4)。Clients 是 Hub 的属性,表示全部链接的client页面,它和 Caller 一样是 dynamic。由于要直接相应到 Javascript 对象。

    5),Clients.addSomeMessage(clientName, message); 表示server端调用client的 addSomeMessage 方法,这是一个 Javascript 方法,从而给client推送消息。

    6),总结:这里实现的服务非常easy,就是当一个client调用 Send 方法向server发送 message 后。server端负责将该 message 广播给全部的client(也能够给特定组或特定client。见屏蔽代码),以实现聊天室的功能。

    四,实现 Hub client代码

    <head>
            <meta charset="utf-8" />
            <title>@ViewBag.Title</title>
            <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
            <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
            <script src="@Url.Content("~/Scripts/jquery-1.6.4.js")" type="text/javascript"></script>
            <script src="@Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript"></script>
            <script src="@Url.Content("~/Scripts/jquery.signalR-0.5.3.js")" type="text/javascript"></script>
            <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
            <script src="@Url.Content("~/signalr/hubs")" type="text/javascript"></script>
        </head>

    注意:signalR 依赖于 jquery。所以 signalR 必须放在 jquery 之后。而 hubs 又必须放在 signalR 之后。

    然后在 body 部分增加 HubChat Tab:

    @model dynamic
    
    @{
        ViewBag.Title = "title";
    }
    
    <script src="@Url.Content("~/Scripts/hubDemo.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
        });
    </script>
    
    <h2>Hub Chat</h2>
    
    <div>
        <input type="text" id="Placeholder" value="@ViewBag.ClientName" hidden="true"/>
        <input type="text" id="msg" />
        <input type="button" id="broadcast" value="广播" />
        
        <br />
        <br />
    
        <h3>
            消息记录: (你是:<span id="MyClientName">@ViewBag.ClientName</span>):
        </h3>
    
        <ul id="messages">
        </ul>
    </div>

    向 Scripts 文件夹加入新的 Javescript 脚本:hubDemo.js。其内容例如以下:
    
    $(function () {
    
        var myClientName = $('#Placeholder').val();
    
        // Proxy created on the fly
        var chat = $.connection.chat;
    
        // Declare a function on the chat hub so the server can invoke it
        chat.addSomeMessage = function (clientName, message) {
            writeEvent('<b>' + clientName + '</b> 对大家说: ' + message, 'event-message');
        };
    
        $("#broadcast").click(function () {
            // Call the chat method on the server
            chat.send(myClientName, $('#msg').val())
                                .done(function () {
                                    console.log('Sent message success!');
                                })
                                .fail(function (e) {
                                    console.warn(e);
                                });
        });
    
        // Start the connection
        $.connection.hub.start();
    
        //A function to write events to the page
        function writeEvent(eventLog, logClass) {
            var now = new Date();
            var nowStr = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
            $('#messages').prepend('<li class="' + logClass + '"><b>' + nowStr + '</b> ' + eventLog + '.</li>');
        }
    });

    我已经执行过一次。能够正常执行。

    Persistent Connection部分,下节再介绍。大家假设发现什什么问题。它可以指向。谢谢。


    版权声明:本文博客原创文章,博客,未经同意,不得转载。

  • 相关阅读:
    关于div 浮动在select,或table控件之上
    页面table的每行都有一个<input type='button' />,如何实现点击按钮在按钮下方弹出一个div,点击空白消失
    BAT 遍历文件夹和子文件夹下所有文件
    在windows上一键编译各种版本的protobuf(2017-12-05修改)
    安装CentOS Core之后布置环境脚本
    优先级队列
    Ubuntu 设置Vim tab为四个空格
    Mysql 只导出数据,不包含表结构
    Kib Kb KB KIB 区别
    护眼色
  • 原文地址:https://www.cnblogs.com/mfrbuaa/p/4677447.html
Copyright © 2020-2023  润新知