SignalR (二)

在上节中,我们已经初步对 SignalR 进行了了解,这一节我们将做一个SignalR Demon,具体的步骤如下:

1. 创建一个 mvc 4 web 应用程序,并选择 Basic

2. 创建一个 Home 控制器, 创建好后,目录应该是这样的:

3. 在项目中,鼠标右键打开 Nuget 程序管理包,在 Nuget 程序管理包中 输入 signalr 这样的字符串进行搜索,在搜索结果中选中 Microsoft ASP.NET SignalR 这个项目,并点击安装

4. 在刚创建好的 Home 控制器 添加 一个 Index 的 Action ,并创建视图,视图的完整代码如下:

<body>
    <div class="container">
        <input type="text" id="message" id="message" />
        <input type="button" id="sendmessage" value="Send" />
        <input type="hidden" id="displayname" />
        <ul id="discussion"></ul>
    </div>

    <script src="/Scripts/jquery-1.8.2.min.js"></script>
    <script src="/Scripts/jquery.signalR-2.1.2.min.js"></script>
    <script src="signalr/hubs"> </script>

    <script type="text/javascript">
        $(function () {
            // 定义一个代理, 以引用 Hub
            var chat = $.connection.chatHub;

            //定义client端的javascript function,供server端hub,通过dynamic的方式,调用所有Clients的javascript function
            // 在对话框中输入聊天者的姓名.
            $(‘#displayname‘).val(prompt(‘Enter your name:‘, ‘‘));

            // 创建一个函数,以使 Hub 可以广播消息。
            chat.client.broadcastMessage = function (name, message) {
                // 对字符串进行html 编码
                var encodedName = $(‘#displayname‘).text(name).html();
                var encodedMsg = $(‘#message‘).text(message).html();

                //在页面中追加并显示聊天信息
                $(‘#discussion‘).append(‘•‘ + encodedName + ‘:  ‘ + encodedMsg + ‘‘ + ‘</br>‘);
            };

            // 设置消息框的焦点格式.
            $(‘#message‘).focus();
            // 与服务器建立连接
            $.connection.hub.start().done(function () {

                $(‘#sendmessage‘).click(function () {
                    // 在Hub中调用 Send 方法
                    chat.server.send($(‘#displayname‘).val(), $(‘#message‘).val());
                    // 清空消息输入框
                    $(‘#message‘).val(‘‘).focus();
                });
            });
        });
    </script>

</body>

5.  在项目中创建 OWin Startup 启动类, 并在Configuration(IAppBuilder app) 中添加以下 代码:app.MapHubs();
  这段代码的意义就是将 应用程序映射到 Hub 中去,这是在程序启动运行时就会执行的。

6. 添加 ChatHub.cs 类,并创建 send(string name, string message) 方法,以便在客户端能调用

    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            Clients.All.broadcastMessage(name, message);
        }

    }

7. 对项目进行编译,如果没有错的话,程序执行的结果应该是这样的(以下是用fire fox浏览器):


用IE 调试时,在项目中我们可以看到自动生成的一些调用脚本,其中 hubs.js 就是个我们在客户端所引用的     <script
src="signalr/hubs"> </script>,它将会把服务器中的方法推送到客户端,以便在客户端可以调用

Hubs.js 的完整代码如下:

/*!
 * ASP.NET SignalR JavaScript Library v2.1.2
 * http://signalr.net/
 *
 * Copyright Microsoft Open Technologies, Inc. All rights reserved.
 * Licensed under the Apache 2.0
 * https://github.com/SignalR/SignalR/blob/master/LICENSE.md
 *
 */

/// <reference path="..\..\SignalR.Client.JS\Scripts\jquery-1.6.4.js" />
/// <reference path="jquery.signalR.js" />
(function ($, window, undefined) {
    /// <param name="$" type="jQuery" />
    "use strict";

    if (typeof ($.signalR) !== "function") {
        throw new Error("SignalR: SignalR is not loaded. Please ensure jquery.signalR-x.js is referenced before ~/signalr/js.");
    }

    var signalR = $.signalR;

    function makeProxyCallback(hub, callback) {
        return function () {
            // Call the client hub method
            callback.apply(hub, $.makeArray(arguments));
        };
    }

    function registerHubProxies(instance, shouldSubscribe) {
        var key, hub, memberKey, memberValue, subscriptionMethod;

        for (key in instance) {
            if (instance.hasOwnProperty(key)) {
                hub = instance[key];

                if (!(hub.hubName)) {
                    // Not a client hub
                    continue;
                }

                if (shouldSubscribe) {
                    // We want to subscribe to the hub events
                    subscriptionMethod = hub.on;
                } else {
                    // We want to unsubscribe from the hub events
                    subscriptionMethod = hub.off;
                }

                // Loop through all members on the hub and find client hub functions to subscribe/unsubscribe
                for (memberKey in hub.client) {
                    if (hub.client.hasOwnProperty(memberKey)) {
                        memberValue = hub.client[memberKey];

                        if (!$.isFunction(memberValue)) {
                            // Not a client hub function
                            continue;
                        }

                        subscriptionMethod.call(hub, memberKey, makeProxyCallback(hub, memberValue));
                    }
                }
            }
        }
    }

    $.hubConnection.prototype.createHubProxies = function () {
        var proxies = {};
        this.starting(function () {
            // Register the hub proxies as subscribed
            // (instance, shouldSubscribe)
            registerHubProxies(proxies, true);

            this._registerSubscribedHubs();
        }).disconnected(function () {
            // Unsubscribe all hub proxies when we "disconnect".  This is to ensure that we do not re-add functional call backs.
            // (instance, shouldSubscribe)
            registerHubProxies(proxies, false);
        });

        proxies[‘chatHub‘] = this.createHubProxy(‘chatHub‘);
        proxies[‘chatHub‘].client = { };
        proxies[‘chatHub‘].server = {
            send: function (name, message) {
                return proxies[‘chatHub‘].invoke.apply(proxies[‘chatHub‘], $.merge(["Send"], $.makeArray(arguments)));
             }
        };

        return proxies;
    };

    signalR.hub = $.hubConnection("/signalr", { useDefaultPath: false });
    $.extend(signalR, signalR.hub.createHubProxies());

}(window.jQuery, window));

好了,非常感谢你的阅读,如果有什么好的想法,欢迎与我交流。

源码下载地址:下载源码

时间: 2024-10-20 03:15:09

SignalR (二)的相关文章

[Asp.net 开发系列之SignalR篇]专题二:使用SignalR实现酷炫端对端聊天功能

一.引言 在前一篇文章已经详细介绍了SignalR了,并且简单介绍它在Asp.net MVC 和WPF中的应用.在上篇博文介绍的都是群发消息的实现,然而,对于SignalR是为了实时聊天而生的,自然少了不像QQ一样的端对端的聊天了.本篇博文将介绍如何使用SignalR来实现类似QQ聊天的功能. 二.使用SignalR实现端对端聊天的思路 在介绍具体实现之前,我先来介绍了使用SignalR实现端对端聊天的思路.相信大家在前篇文章已经看到过Clients.All.sendMessage(name,

基于SignalR的消息推送与二维码描登录实现

1 概要说明 使用微信扫描登录相信大家都不会陌生吧,二维码与手机结合产生了不同应用场景,基于二维码的应用更是比较广泛.为了满足ios.android客户端与web短信平台的结合,特开发了基于SinglarR消息推送机制的扫描登录.本系统涉及到以下知识点:     SignalR:http://signalr.net/ 这官网,ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指这样一种功能:当

ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(二) 之 ChatServer搭建,连接服务器,以及注意事项。

上篇:ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(一) 之 基层数据搭建,让数据活起来(数据获取) 上一篇我们已经完成了初步界面的搭建工作,本篇将介绍IM的核心内容了,就是SignalR的Hub类.整个即时通讯机制都是以它为基础的.至于原理我也不再讲解,讲了也不如专业的文章讲得好.所以我们直接看业务,上代码.有一部分原理 在文章 ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(二) 实现聊天室连接 (当时是LayIM1.0版本).原理

SignalR 设计理念(二)

SignalR 设计理念(二) 实现客户端和服务器端的实时通讯. 前言: 客户端方法忽略大小写,主要原因基于是URL对大小写不敏感的问题,开发者之间为了更好的协同开发,定下的开发者协议. 问题阐述 客户端数量不确定! 同一个用户的客户端数量不确定(一个用户可以多处登陆)! 客户端连接的渠道不确定(应用程序连接.Web普通连接.WebSocket连接等)! 同一个用户的连接渠道不一定! 针对以上问题,你会如何设计服务器架构? SignalR 采用 管道通讯 作为连接消息通道,使用 分配器 对消息适

Nginx+SignalR+Redis(二)windows

接上篇:此篇主要讲解signalr使用nginx后遇到的问题. 首先发布signalr服务端多个站点,为了简单只发布了两个站点类似:一个服务端端口8090一个8091 然后配置Nginx具体安装下载就不一一介绍,可以自行百度安装.现在只介绍配置nginx.config中的项,因为在此遇到了许多坑 先将ngixn.con中的代码贴出来. events { worker_connections 1024;} http { include mime.types; default_type applic

Asp.NET MVC 使用 SignalR 实现推送功能二(Hubs 在线聊天室 获取保存用户信息)

简单介绍 关于SignalR的简单实用 请参考 Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室) 在上一篇中,我们只是介绍了简单的消息推送,今天我们来修改一下,实现保存消息,历史消息和用户在线 由于,我这是在一个项目([无私分享:从入门到精通ASP.NET MVC]从0开始,一起搭框架.做项目 目录索引)的基础上做的,所以使用到的一些借口和数据表,不详细解析,只是介绍一下思路和实现方式,供大家参考 用户登录注册信息 当用户登录之后,我们注册一下用户的信息,我们

SignalR循序渐进(二)

接上一篇,文章末尾抛出了2个问题: 能不能让客户端声明一个强类型的方法列表呢?这样首先不容易写错. 同样的,能不能让服务端声明一个强类型的方法列表给客户端调用呢? 如果要让客户端的方法以强类型出现在服务端,同样的,服务端的方法也以强类型出现在客户端,那就必须声明类似契约一样的载体.比如: public interface IChatClient { void broadcast(string name, string message); } public interface IChatHub {

ABP源码分析三十二:ABP.SignalR

Realtime Realtime是ABP底层模块提供的功能,用于管理在线用户.它是使用SignalR实现给在线用户发送通知的功能的前提 IOnlineClient/OnlineClient: 封装在线用户的信息 OnlineClientManager/IOnlineClientManager: 用于提供基本维护在线用户的方法.其内部维护了一个字典来保存在线的客户信息. SingalR SignalRRealTimeNotifier: 实现了给在线用户发送通知的功能.其从IOnlineClien

SignalR 教程二 服务端广播

转帖官方教程:Tutorial: Server Broadcast with SignalR 2 http://www.asp.net/signalr/overview/getting-started/tutorial-server-broadcast-with-signalr This tutorial shows how to create a web application that uses ASP.NET SignalR 2 to provide server broadcast fu