---

前言

由于这段时间在找房子,所以耽误了一段时间。前几讲把一些基础的东西稍微介绍了下,这一讲就简单介绍一个小例子,大致功能是实现在线聊天,并显示在线用户、用户上下线实时提醒。这个例子并不复杂只是把之前介绍联系起来。

在这里为了简单起见,暂时不涉及到数据库的操作。

类的定义

用户信息类UserInfo

1. public class UserInfo
2. {
4. /// <summary>
5. /// ConnectionId
6. /// </summary>
7. public string ConnectionId {
   get; set; }
8. /// <summary>
9. /// 姓名
10. /// </summary>
11. public string Name {
    get; set; }
12. /// <summary>
13. /// 上线时间
14. /// </summary>
15. public DateTime ConnectedAt {
    get; set; }
16. /// <summary>
17. /// 在线标志
18. /// </summary>
19. public bool IsOnline {
    get; set; }
20. }

各块功能

后台

上线

1. public override Task OnConnected()
2. {
3. Interlocked.Increment(ref _usersCount);
4. var user = new UserInfo()
5. {
6. ConnectionId = Context.ConnectionId,
7. IsOnline = true,
8. Name = "user" + _usersCount,
9. ConnectedAt = DateTime.Now
10. };
11. _users[Context.ConnectionId] = user;
12. var notifyAll = (Task)Clients.All.NewUserNotification(user);
13. var updateMessage = (Task)Clients.Caller.UpdateMessage(user.Name, _users.Values.ToArray());
14. var sendToAll = (Task)Clients.Others.welcome(_users.Values.ToArray());
15. return notifyAll.ContinueWith(_ => updateMessage).ContinueWith(_ => sendToAll);
16. }

下线

1. public override Task OnDisconnected()
2. {
3. UserInfo user;
4. if (_users.TryRemove(Context.ConnectionId, out user))
5. {
6. return Clients.All.UserDisconnectedNotification(user);
7. }
8. return base.OnDisconnected();
9. }

修改昵称

1. public Task ChangeNickname(string newName)
2. {
3. UserInfo user;
4. if (_users.TryGetValue(Context.ConnectionId, out user))
5. {
6. var oldName = user.Name;
7. user.Name = newName;
8. return Clients.All.NicknameChangedNotification(user, oldName);
9. }
10. return null;
11. }

发送消息给所有人

1. public Task Send(string message)
2. {
3. UserInfo user;
4. if (_users.TryGetValue(Context.ConnectionId, out user))
5. {
6. var msgToSend = string.Format("[{0}]: {1}", user.Name, message);
7. return Clients.All.Message(msgToSend);
8. }
9. return null;
10. }

前台

用户上线消息

1. function newUserNotification(user) {
2. if (getUserElement(user.ConnectionId).length == 0) {
3. $("#users").append($(getUserListItem(user)));
4. }
5. systemMessage("欢迎 " + user.Name + " 用户进入聊天室!");
6. }

昵称改变消息

1. function nicknameChangedNotification(user, oldName) {
2. var userElement = getUserElement(user.ConnectionId);
3. if (userElement.length > 0) {
4. userElement.replaceWith($(getUserListItem(user)));
5. systemMessage(oldName + " 改名为 " + user.Name + ".");
6. }
7. if (user.Id === $.connection.hub.id) {
8. $("#name").text(user.Name);
9. }

用户下线消息

1. function userDisconnectedNotification(user) {
2. var userElement = getUserElement(user.ConnectionId);
3. if (userElement.length > 0) {
4. systemMessage(user.Name + " 离开聊天室.");
5. userElement.remove();
6. }
7. }

更新个人信息

1. function updateMessage(assignedNickname, userList) {
2. var result = "";
3. for (var i = 0; i < userList.length; i++) {
4. var user = userList[i];
5. result += getUserListItem(user);
6. }
7. $("#users").empty();
8. $("#users").append(result);
9. $("#username").text(assignedNickname);
10. $("#user-info").show();
11. }

用户上线提醒

1. function welcome(userList) {
2. var result = "";
3. for (var i = 0; i < userList.length; i++) {
4. var user = userList[i];
5. result += getUserListItem(user);
6. }
7. $("#users").empty();
8. $("#users").append(result);
9. }

发送消息

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

效果图

结束语

功能较为简单,本来还加了其他的功能,但是由于最近太忙了,打好了一半然后又全部删掉了,后面有时间再慢慢加上去。

本文发布至

参考文献