SignalR 2简单聊天室

1.注册chat集线器

//注册chat 集线器
app.Map("/chat",map=> {
    map.UseCors(CorsOptions.AllowAll);
    var config = new HubConfiguration() {
        EnableJSONP=true,//启用JSONP
        EnableJavaScriptProxies=false
    };
    config.EnableDetailedErrors = true;
    map.RunSignalR(config);
});

2.封装hub服务器处理

public class ChatHub : Hub
{
    private static ConcurrentDictionary<string, UserData> _users = new ConcurrentDictionary<string, UserData>();
    private static int _userscount = 0;
    //连接创建
    public override Task OnConnected()
    {
        Interlocked.Increment(ref _userscount);
        var user = new UserData()
        {
            Id = Context.ConnectionId,
            Active = true,
            Name = "user" + _userscount,
            Image = GravatarHelpers.GetImage(null),
            ConnectedAt = DateTime.Now
        };
        _users[Context.ConnectionId] = user;
        //新用户上线通知
        var notifyAll = (Task)Clients.All.NewUserNotification(user);
        //欢迎当前用户
        var sendAllUsers = (Task)Clients.Caller.Wellcome(user.Name, _userscount);
        return notifyAll.ContinueWith(_ => sendAllUsers);
    }
    //连接断开
    public override Task OnDisconnected(bool stopCalled)
    {
        UserData user;
        if (_users.TryRemove(Context.ConnectionId, out user))
        {
            return Clients.All.UserDisnnectedNotification(user);
        }
        return base.OnDisconnected(stopCalled);
    }
    public Task ChangeNickname(string newName)
    {
        UserData user;
        if (_users.TryGetValue(Context.ConnectionId, out user))
        {
            var oldName = user.Name;
            user.Name = newName;
            return Clients.All.NicknameChangedNotification(user, oldName);
        }
        return null;
    }
    public Task ChangeImage(string email)
    {
        UserData user;
        if (_users.TryGetValue(Context.ConnectionId, out user))
        {
            user.Image = GravatarHelpers.GetImage(email);
            return Clients.All.ImageChangedNotification(user);
        }
        return null;
    }
    public Task Send(string message)
    {
        UserData user;
        if (_users.TryGetValue(Context.ConnectionId, out user))
        {
            var msgToSend = string.Format("[{0}]: {1}", user.Name, message);
            return Clients.All.Message(msgToSend);
        }
        return null;
    }
}

internal class UserData
{
    public string Id { get; set; }
    public string Name { get; set; }
    public bool Active { get; set; }
    public DateTime ConnectedAt { get; set; }
    public string Image { get; set; }
}

3.封装hub客户端处理

//客户端封装
(function ($, window, undefined) {
    "use strict";
    if (typeof ($.signalR) !== "function") {
        throw new Error("没有引用jquery.signalR库");
    }
    var signalR = $.signalR;

    function makeProxyCallback(hub, callback) {
        return function () {
            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)) {
                    //不存在 hub类
                    continue;
                }
                if (shouldSubscribe) {
                    //注册事件
                    subscriptionMethod = hub.on;
                } else {
                    //取消注册事件
                    subscriptionMethod = hub.off;
                }

                for (memberKey in hub.client) {
                    if (hub.client.hasOwnProperty(memberKey)) {
                        memberValue = hub.client[memberKey];
                        if (!$.isFunction(memberValue)) {
                            //如果不是方法
                            continue;
                        }

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

            }
        }

    }

    //创建客户端代理
    $.hubConnection.prototype.createHubProxies = function () {
        var proxies = {};
        this.starting(function () {
            registerHubProxies(proxies, true);
            this._registerSubscribedHubs();
        }).disconnected(function () {
            registerHubProxies(proxies,false);
        });

        proxies.chatHub = this.createHubProxy('chatHub');
        proxies.chatHub.client = {};
        proxies.chatHub.server = {
            //修改头像
            changeImage: function (email) {
                return proxies.chatHub.invoke.apply(proxies.chatHub,
                    $.merge(["ChangeImage"],$.makeArray(arguments)));
            },
            //修改昵称
            changeNickname: function (newName) {
                return proxies.chatHub.invoke.apply(proxies.chatHub,
                    $.merge(["ChangeNickname"],$.makeArray(arguments)));
            },
            //发送消息
            send: function (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());
})(jQuery, window);

4.封装hub客户端的服务器方法及操作

    <h1>Simple chat </h1>
    <p id="powered"><a href="#" target="_blank">Powered by gravatar</a></p>
    <div>
        <div id="user-info" style="display: none">
            <img src="http://qlogo4.store.qq.com/qzone/2647168950/2647168953/100" />
            <span id="username"></span>
            <a href="#" id="change-username">(change nick)</a>
            <a href="#" id="change-image">(change image)</a>
        </div>
        <input type="text" id="text" />
        <button id="send">Send</button>
    </div>
    <div id="users-panel">
        <h3>Users</h3>
        <ul id="users"></ul>
    </div>
    <ul id="chatpanel"></ul>
    <script src="~/Scripts/MyJs/chat.js"></script>
    <script>
        $(function () {
            var chatHub = $.connection.chatHub;
            $.connection.hub.url = "/chat";
            $.connection.hub.logging = true;

            //定义服务器事件的客户端操作
            chatHub.client.newUserNotification = newUserNotification;
            chatHub.client.nicknameChangedNotification = nicknameChangedNotification;
            chatHub.client.imageChangedNotification = imageChangedNotification;
            chatHub.client.userDisconnectedNotification = userDisconnectedNotification;

            chatHub.client.welcome = welcome;
            chatHub.client.message = addMessageToPanel;
            //创建连接成功
            $.connection.hub.start().done(function () {
                //发送广播
                $("#send").click(function () {
                    chatHub.server.send($("#text").val())
                    .fail(function (err) {
                        alert(err);
                    });
                    $("#text").val("").focus();
                });
                //修改昵称
                $("#change-username").click(function () {
                    var newName = prompt("New username:", $("#username").text());
                    if (newName) {
                        chatHub.server.changeNickname(newName);
                    }
                    return false;
                });
                //修改图片
                $("#change-image").click(function () {
                    var newMail = prompt("Your email (registered in gravatar.com):", "");
                    if (newMail) {
                        chatHub.server.changeImage(newMail);
                    }
                    return false;
                });
            });

            //欢迎上线用户
            function welcome(assignedNickname, userList) {
                var result = "";
                for (var i = 0; i < userList.length; i++) {
                    var user = userList[i];
                    result += getUserListItem(user);
                }
                $("#users").empty();
                $("#users").append(result);
                $("#user-info").show();
                $("#username").text(assignedNickname);
            }
            //新建连接通知其他用户
            function newUserNotification(user) {
                if (getUserElement(user.Id).length == 0) {
                    $("#users").append($(getUserListItem(user)));
                    addMessageToPanel("New user arrived: " + user.Name + ". Welcome!", "system");
                }
            }
            //连接断开
            function userDisconnectedNotification(user) {
                var userElement = getUserElement(user.Id);
                if (userElement.length > 0) {
                    addMessageToPanel(user.Name + " left the chat.", "system");
                    userElement.remove();
                }
            }
            //修改昵称，广播通知
            function nicknameChangedNotification(user, oldName) {
                var userElement = getUserElement(user.Id);
                if (userElement.length > 0) {
                    userElement.replaceWith($(getUserListItem(user)));
                    addMessageToPanel(oldName + " is now " + user.Name + ".", "system");
                }
                if (user.Id === $.connection.hub.id) {
                    $("#username").text(user.Name);
                }
            }
            //修改头像广播通知
            function imageChangedNotification(user) {
                var userElement = getUserElement(user.Id);
                if (userElement.length > 0) {
                    userElement.replaceWith($(getUserListItem(user)));
                    addMessageToPanel(user.Name + " has a new image.", "system");
                }
                if (user.Id === $.connection.hub.id) {
                    $("#user-info img").prop("src", user.Image);
                }
            }

            function addMessageToPanel(message, type) {
                var $panel = $("#chatpanel");
                $panel.append("<li class='" + type + "'>" + message + "</li>");
                $panel.scrollTop($panel[0].scrollHeight);
            }
            function getUserListItem(user) {
                return "<li id='u" + user.Id + "'><img src='" + user.Image + "' /><div>" + user.Name + "</div></li>";
            }
            function getUserElement(id) {
                return $("#u" + id);
            }
        });
    </script>