一步一步學習SignalR進行實時通信_6_案例

一步一步學習SignalR進行實時通信_6_案例1

標簽（空格分隔）： SignalR

---

目錄

• 一步一步學習SignalR進行實時通信_6_案例1
  • 前言
  • 類的定義
  • 各塊功能
    • 后台
      • 上線
      • 下線
      • 修改昵稱
      • 發送消息給所有人
    • 前台
      • 用戶上線消息
      • 昵稱改變消息
      • 用戶下線消息
      • 更新個人信息
      • 用戶上線提醒
      • 發送消息
      • 效果圖
  • 結束語
  • 參考文獻

前言

由於這段時間在找房子,所以耽誤了一段時間。前幾講把一些基礎的東西稍微介紹了下,這一講就簡單介紹一個小例子,大致功能是實現在線聊天,並顯示在線用戶、用戶上下線實時提醒。這個例子並不復雜只是把之前介紹聯系起來。

在這里為了簡單起見,暫時不涉及到數據庫的操作。

類的定義

用戶信息類UserInfo

public class UserInfo
{
   
    /// <summary>
    /// ConnectionId
    /// </summary>
    public string ConnectionId { get; set; }
    /// <summary>
    /// 姓名
    /// </summary>
    public string Name { get; set; }
    /// <summary>
    /// 上線時間
    /// </summary>
    public DateTime ConnectedAt { get; set; }
    /// <summary>
    /// 在線標志
    /// </summary>
    public bool IsOnline { get; set; }
}

各塊功能

后台

上線

public override Task OnConnected()
{
    Interlocked.Increment(ref _usersCount);
    var user = new UserInfo()
    {
        ConnectionId = Context.ConnectionId,
        IsOnline = true,
        Name = "user" + _usersCount,
        ConnectedAt = DateTime.Now
    };
    _users[Context.ConnectionId] = user;
    var notifyAll = (Task)Clients.All.NewUserNotification(user);
    var updateMessage = (Task)Clients.Caller.UpdateMessage(user.Name, _users.Values.ToArray());
    var sendToAll = (Task)Clients.Others.welcome(_users.Values.ToArray());
    return notifyAll.ContinueWith(_ => updateMessage).ContinueWith(_ => sendToAll);
}

下線

public override Task OnDisconnected()
{
    UserInfo user;
    if (_users.TryRemove(Context.ConnectionId, out user))
    {
        return Clients.All.UserDisconnectedNotification(user);
    }
    return base.OnDisconnected();
}

修改昵稱

public Task ChangeNickname(string newName)
{
    UserInfo 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 Send(string message)
{
    UserInfo user;
    if (_users.TryGetValue(Context.ConnectionId, out user))
    {
        var msgToSend = string.Format("[{0}]: {1}", user.Name, message);
        return Clients.All.Message(msgToSend);
    }
    return null;
}

前台

用戶上線消息

function newUserNotification(user) {
    if (getUserElement(user.ConnectionId).length == 0) {
        $("#users").append($(getUserListItem(user)));
    }
    systemMessage("歡迎 " + user.Name + " 用戶進入聊天室!");
}

昵稱改變消息

function nicknameChangedNotification(user, oldName) {
    var userElement = getUserElement(user.ConnectionId);
    if (userElement.length > 0) {
        userElement.replaceWith($(getUserListItem(user)));
        systemMessage(oldName + " 改名為 " + user.Name + ".");
    }
    if (user.Id === $.connection.hub.id) {
        $("#name").text(user.Name);
    }

用戶下線消息

function userDisconnectedNotification(user) {
    var userElement = getUserElement(user.ConnectionId);
    if (userElement.length > 0) {
        systemMessage(user.Name + " 離開聊天室.");
        userElement.remove();
    }
}

更新個人信息

function updateMessage(assignedNickname, userList) {
    var result = "";
    for (var i = 0; i < userList.length; i++) {
        var user = userList[i];
        result += getUserListItem(user);
    }
    $("#users").empty();
    $("#users").append(result);
    $("#username").text(assignedNickname);
    $("#user-info").show();
}

用戶上線提醒

function welcome(userList) {
    var result = "";
    for (var i = 0; i < userList.length; i++) {
        var user = userList[i];
        result += getUserListItem(user);
    }
    $("#users").empty();
    $("#users").append(result);
}

發送消息

function message(message) {
var $panel = $("#chatpanel");
$panel.append("<li class='list-group-item'>" + message + "</li>");
$panel.scrollTop($panel[0].scrollHeight);
}

效果圖

結束語

功能較為簡單,本來還加了其他的功能,但是由於最近太忙了,打好了一半然后又全部刪掉了,后面有時間再慢慢加上去。

源碼下載

本文發布至作業部落

參考文獻

SignalR Programming in Microsoft ASP.NET pdf 下載