ex2 使用者清單

http://amani.test.ntpc.edu.tw/signalr/ex/ex2.html

本節重點：
* 儲存使用者清單變數：Dictionary<string, string>
* 取得使用者唯一鍵：Context.ConnectionId
* 通知自己以外的Client端：Clients.Others

聊天室要顯示使用者清單，在Server端及Client端要做的事情有：

//【Server端】
//1.宣告Dictionary靜態類別，儲存使用者清單
//2.新user連線進入聊天室時，要將user儲存至Dictionary，並通知所有client端更新使用者清單
//3.當使用者斷線時，要將user從Dictionary刪除，並通知所有client端刪除使用者清單

//【Client端】
//1.user連線進入聊天室時，通知Server
//2.宣告getList()函數，讓Server呼叫，以更新使用者清單
//3.宣告removeList()函數，讓Server呼叫，以刪除使用者

完整Server端及Client端流程如下：

Server端ChatHub.cs完整程式碼：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using System.Threading.Tasks;

public class ChatHub : Hub
{
    //宣告靜態類別，儲存user清單
    public static class Users
    {
        public static Dictionary<string, string> ConnectionIds = new Dictionary<string, string>();
    }

    //傳送訊息給所有User
    public void Send(string message)
    {
        var user = Users.ConnectionIds.Where(u => u.Key == Context.ConnectionId).FirstOrDefault();
        Clients.All.show(user.Value + "說：" + message);
    }

    //新使用者連線進入聊天室
    public void userConnected(string name)
    {
        //將目前使用者新增至user清單
        Users.ConnectionIds.Add(Context.ConnectionId,name);

        //發送給所有人，取得user清單
        Clients.All.getList(Users.ConnectionIds.Select(u => new { id=u.Key,name=u.Value}).ToList());

        //通知其他人，有新使用者
        Clients.Others.show("歡迎" + name + "進入聊天室");
    }

    //當使用者斷線時呼叫
    //stopCalled是SignalR 2.1.0版新增的參數
    public override Task OnDisconnected(bool stopCalled)
    {
        Clients.Others.removeList(Context.ConnectionId);
        Users.ConnectionIds.Remove(Context.ConnectionId);
        return base.OnDisconnected(stopCalled);
    }


}

Client端index.html完整程式碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
    <script src="signalR/hubs"></script>
</head>
<body>
    <script>

        var chat = $.connection.chatHub;//chatHub小寫
        var name = "";

        //初始
        $(function () {
            name = window.prompt("請輸入姓名:");
        });

        //signalR啟動完成後，要執行的動作
        $.connection.hub.start().done(function () {

            //通知Server，有新使用者連進來
            chat.server.userConnected(name);

            //按傳送鈕
            $('#btnSend').click(function () {
                send();
            });
            //按Enter鍵
            $('#txtMsg').keydown(function (e) {
                if (e.which == 13) {
                    send();
                }
            });
        });

        //顯示訊息
        chat.client.show = function (message) {
            $('#chatRoom').append('<li>' + message + '</li>');
        };

        //顯示user清單
        chat.client.getList = function (users) {
            var li = "";
            $.each(users, function (i, user) {
                li += '<li id='+user.id+' >' +user.name+ '</li>'
            });
            $('#lstUser').html(li);
        };

        //使用者離開
        chat.client.removeList = function (id) {
            $('#' + id).remove();
        };

        function send() {
            chat.server.send($('#txtMsg').val());
            $('#txtMsg').val('');
        }

    </script>

    <div style="width:500px;">
        <div style="float: left; overflow: scroll; width: 300px; height: 300px">
            <p>聊天室</p>
            <ul id="chatRoom"></ul>
        </div>

        <div style="float: left; overflow: scroll; width: 200px; height: 300px">
            <p>使用者列表</p>
            <ul id="lstUser"></ul>
        </div>

        <div>
            <input id="txtMsg" type="text" />
            <input id="btnSend" type="button" value="傳送" />
        </div>
    </div>

</body>
</html>

ex2 使用者清單

ex2 使用者清單

results matching ""

No results matching ""