SignalR簡單示例教程入門版_ZenDei技術網路在線

上周五最後一天在公司上班,無聊之餘就想做點什麼.介於之前有人讓我做個簡易版的線上聊天的,於是乎就打算花一天時間來弄下關於SignalR的簡單教程製作一個線上的聊天的。 1：前端用了國產的一個MVVM框架 avalon 的早期版本和 layer 插件(具體怎麼用這裡就不介紹了,需要瞭解的自行百度) 2 ...

上周五最後一天在公司上班,無聊之餘就想做點什麼.介於之前有人讓我做個簡易版的線上聊天的,於是乎就打算花一天時間來弄下關於SignalR的簡單教程製作一個線上的聊天的。

1：前端用了國產的一個MVVM框架 avalon 的早期版本和 layer 插件(具體怎麼用這裡就不介紹了,需要瞭解的自行百度)

2：MVC項目裡面新增一個Hub 的繼承類 ChatHub , 標簽HubName 類似於一個重命名的效果

3：OnlineCache 類的作用是定義了一個KEY和VALUE主要用於記錄用戶名稱和Signalr自動生成的KEY關係

4 : Startup.cs 里記得註冊下 app.MapSignalR();

[HubName("customhub")]
    public class ChatHub : Hub
    {

       /// <summary> /// 發送信息/// </summary> /// <param name=""></param> /// <returns></returns>
        public void Send(string name, string message)
        {
            Clients.All.addNewMessageToPage(name, message);
        }


        /// <summary> /// 頁面打開創建Signalr對象時由客戶端調用,然後服務端將已經存在的用戶列表,推送回客戶端用於刷新線上用戶列表/// </summary> /// <param name=""></param> /// <returns></returns>
        public void Push(string name)
        {
            if (!OnlineCache.dicSignalrs.ContainsKey(base.Context.ConnectionId))
                OnlineCache.dicSignalrs.Add(base.Context.ConnectionId, name);
            else
            {
                OnlineCache.dicSignalrs.Remove(base.Context.ConnectionId);
                OnlineCache.dicSignalrs.Add(base.Context.ConnectionId, name);
            }
            ///這裡是將線上人員列表推送回客戶端
            Clients.All.subscribeUsers(name,OnlineCache.OnlineToList());
        }

        //
        // 摘要:
        //     Called when the connection connects to this hub instance.
        //
        // 返回結果:
        //     A System.Threading.Tasks.Task
        public override Task OnConnected()
        {
　　　　　　return  base.OnConnected();
        }
        //
        // 摘要:
        //     Called when a connection disconnects from this hub gracefully or due to a timeout.
        //
        // 參數:
        //   stopCalled:
        //     true, if stop was called on the client closing the connection gracefully; false,
        //     if the connection has been lost for longer than the Microsoft.AspNet.SignalR.Configuration.IConfigurationManager.DisconnectTimeout.
        //     Timeouts can be caused by clients reconnecting to another SignalR server in scaleout.
        //
        // 返回結果:
        //     A System.Threading.Tasks.Task
        /// <summary>
        /// 離線觸發
        /// </summary>
        /// <param name="stopCalled"></param>
        /// <returns></returns>
        public override Task OnDisconnected(bool stopCalled)
        {
            if (OnlineCache.dicSignalrs.ContainsKey(base.Context.ConnectionId))
            {
                var name = OnlineCache.dicSignalrs[base.Context.ConnectionId];
                OnlineCache.dicSignalrs.Remove(base.Context.ConnectionId);
                ///離線後將線上人員移除的通知 推送到客戶端
                Clients.All.removeUser(name, OnlineCache.OnlineToList());
            }
            return base.OnDisconnected(stopCalled);
        }
        //
        // 摘要:
        //     Called when the connection reconnects to this hub instance.
        //
        // 返回結果:
        //     A System.Threading.Tasks.Task
        public override Task OnReconnected()
        {
            return base.OnReconnected();
        }

    }


    public  class OnlineCache
    {
        public OnlineCache() {
          
        }
        public string Key { set; get; }

        public string Value { set; get; }

        static OnlineCache()
        {
            if (dicSignalrs == null)
                dicSignalrs = new Dictionary<string, string>();
        }
        public static Dictionary<string, string> dicSignalrs;

        /// <summary>
        /// 提取list
        /// </summary>
        /// <returns></returns>
        public static List<OnlineCache> OnlineToList() => dicSignalrs.Select(o => new OnlineCache() { Key = o.Key, Value = o.Value }).ToList();

    }

前端JS腳本

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/Site.css" rel="stylesheet" />
    <link href="~/Scripts/layer-v2.4/layer/skin/layer.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/Avalon/json2.js"></script>
    <script src="~/Scripts/jquery.signalR-2.2.1.min.js"></script>


    <script src="~/Scripts/layer-v2.4/layer/layer.js"></script>
    <script src="~/Scripts/Avalon/avalon.js"></script>

    <script src="/signalr/hubs"></script>
    <script>
        var onlines = [];
        var chat;
        $(function () {
            vm.init();
        });


        var vm =
            avalon.define({
                $id: "online",
                sendname: "所有線上用戶",
                customname: "",
                onlines: [],
                logs: [],
                authorize: false,
                sendText: "",
                firstload: false,
                init: function () {
                    layer.prompt({
                        title: '輸入聊天昵稱，並確認',
                        formType: 0
                    }, function (name) {
                        layer.msg('聊天室內容載入中', {
                            time: 1000
                        });
                        vm.customname = name;
                        vm.authorize = true;
                        vm.callbackmessage();

                    });
                },
                connection: function () {
                    $.connection.hub.start().done(function () {
                        ///首次頁面載入註冊完畢後直接把用戶名發到後臺建立用戶列表
                        if (!vm.firstload) {
                            vm.firstload = true;
                            chat.server.push(vm.customname);
                        }
                        $('#btnSend').click(function () {
                            if (!vm.authorize) {
                                layer.msg("沒有通過授權不能進行聊天");
                                return;
                            }
                            //**這裡主要是用於發送信息
                            chat.server.send(vm.customname, $('#message').val());
                            $('#message').val('').focus();
                        });
                    });
                    vm.getOnlineUser();
                },
                callbackmessage: function () {

                    chat = $.connection.customhub;
                    
                    //**有用戶登陸 這裡會接收到服務端推送過來的消息name是上線用戶名稱 users是線上用戶列表 直接綁定mvvm的onlines刷新列表
                    chat.client.subscribeUsers = function (name,users) {
                        layer.tips(name + "  上線", '#btnSend', {
                            tips: [1, '#3595CC']
                        });
                        vm.onlines = users;
                    };

                    chat.client.removeUser = function (name, users) {
                        layer.tips(name + "  離線", '#btnSend', {
                            tips: [1, 'red']
                        });
                        vm.onlines = users;
                    };

                    chat.client.addNewMessageToPage = function (name, message) {
                        vm.logs.push({ name: name, message: message });
                    };

                    vm.connection();
                }
            });
    </script>
</head>
<body ms-controller="online">
    <div class="col-sm-2 col-md-2  col-lg-2">
        <label>線上用戶列表</label>
        <br />
        <div class="list-group">
            <a href="#" ms-repeat="onlines" class="list-group-item">
                {{el.Value}}
            </a>
        </div>
    </div>
    <div class="col-sm-5 col-md-5  col-lg-5">
        <textarea id="message" placeholder="輸入發送內容" class="form-control" style="width:100%;" ms-duplex="sendText"></textarea>
        <br />
        <br />
        <div class="row col-sm-12 col-md-12  col-lg-12">
            <div class="table-scrollable" style="max-height: 400px; overflow:auto; ">
                <table class="table table-bordered table-hover text-center">
                    <thead>
                        <tr>
                            <th class="col-sm-4">發送人</th>
                            <th class="col-sm-8">內容</th>
                        </tr>
                        <tr href="#" ms-repeat="logs">
                            <th class="col-sm-4">{{el.name}}</th>
                            <th class="col-sm-8">{{el.message}}</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <div class="col-sm-3 col-md-3  col-lg-3">
        <br />
        <div class="row">
            <input class="btn btn-primary col-sm-5  col-md-5  col-lg-5" value="發送消息" id="btnSend" type="button" />
        </div>
        <br />
        <br />
        <div class="row">
            <label>賬號昵稱：</label><label>{{customname}}</label>
        </div>
        <br />
        <br />
        <div class="row">
            <label>發送對象：</label><label>{{sendname}}</label>
        </div>
    </div>
    <div class="row">
         <div class="col-sm-offset-11 col-sm-1 pull-right" style="margin-bottom:0px;" id="tip">
             
         </div>
    </div>
</body>
</html>