一步一步学习SignalR进行实时通信_6_案例
一步一步学习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进行实时通信_6_案例的更多相关文章
- 一步一步学习SignalR进行实时通信_8_案例2
原文:一步一步学习SignalR进行实时通信_8_案例2 一步一步学习SignalR进行实时通信\_8_案例2 SignalR 一步一步学习SignalR进行实时通信_8_案例2 前言 配置Hub 建 ...
- 一步一步学习SignalR进行实时通信_1_简单介绍
一步一步学习SignalR进行实时通信\_1_简单介绍 SignalR 一步一步学习SignalR进行实时通信_1_简单介绍 前言 SignalR介绍 支持的平台 相关说明 OWIN 结束语 参考文献 ...
- 一步一步学习SignalR进行实时通信_9_托管在非Web应用程序
原文:一步一步学习SignalR进行实时通信_9_托管在非Web应用程序 一步一步学习SignalR进行实时通信\_9_托管在非Web应用程序 一步一步学习SignalR进行实时通信_9_托管在非We ...
- 一步一步学习SignalR进行实时通信_7_非代理
原文:一步一步学习SignalR进行实时通信_7_非代理 一步一步学习SignalR进行实时通信\_7_非代理 SignalR 一步一步学习SignalR进行实时通信_7_非代理 前言 代理与非代理 ...
- 一步一步学习SignalR进行实时通信_5_Hub
原文:一步一步学习SignalR进行实时通信_5_Hub 一步一步学习SignalR进行实时通信\_5_Hub SignalR 一步一步学习SignalR进行实时通信_5_Hub 前言 Hub命名规则 ...
- 一步一步学习SignalR进行实时通信_4_Hub
原文:一步一步学习SignalR进行实时通信_4_Hub 一步一步学习SignalR进行实时通信\_4_Hub SignalR 一步一步学习SignalR进行实时通信_4_Hub 前言 创建Hub 配 ...
- 一步一步学习SignalR进行实时通信_3_通过CORS解决跨域
原文:一步一步学习SignalR进行实时通信_3_通过CORS解决跨域 一步一步学习SignalR进行实时通信\_3_通过CORS解决跨域 SignalR 一步一步学习SignalR进行实时通信_3_ ...
- 一步一步学习SignalR进行实时通信_2_Persistent Connections
原文:一步一步学习SignalR进行实时通信_2_Persistent Connections 一步一步学习SignalR进行实时通信\_2_Persistent Connections Signal ...
- 12.Linux软件安装 (一步一步学习大数据系列之 Linux)
1.如何上传安装包到服务器 有三种方式: 1.1使用图形化工具,如: filezilla 如何使用FileZilla上传和下载文件 1.2使用 sftp 工具: 在 windows下使用CRT 软件 ...
随机推荐
- HTML5的结构学习(2) --- 新增的非主体结构元素
除了上一篇学习到的主体结构元素之外,html5还增加了一些表示逻辑结构和附加信息的非主体结构元素: 1.header 解释:一种具有引导和导航作用的结构元素. 用途:通常用来放置整个页面或者页面内某一 ...
- 将一段含有0的字符数组赋给string
string有个成员函数,assign() 可以这样: string str; str.assign(temp, sizeof(temp));
- Oracle 表的常见操作
--创建表并指定表空间 create table goods( id VARCHAR2(20) primary key, name VARCHAR2(20) NOT NULL, price NUMBE ...
- 一道来自华为的C机试题目
题目是这样的 求一个字符串中连续字母的个数 比如I have a book. : 1 I have a dog. : 0 I haavee aa dogg : 4 #include <windo ...
- Linux 零碎知识点
ln -s ../libs/ libs 在当前目录下建立一个符号链接文件libs,使它指向上一层目录的libs文件夹 关于su和su -的区别切换用户是可以使用su tom或者su - tom来实现, ...
- 《JavaScript 闯关记》
为何写作此课程 stone 主要负责基于 Web 的企业内部管理系统的开发,虽然能够熟练地使用 JavaScript,但随着对 JavaScript 的理解越来越深,才发现自己尚未掌握其精髓. 201 ...
- 浏览器的重绘(repaints)与重排(reflows)
转:http://www.css88.com/archives/4991#more-4991 在项目的交互或视觉评审中,前端同学常常会对一些交互效果质疑,提出这样做不好那样做不好.主要原因是这些效果通 ...
- 彻底解决TAP(点透)提升移动端点击响应速度
使用fastclick 尼玛使用太简单了,直接一句: FastClick.attach(document.body); 于是所有的click响应速度直接提升,刚刚的!什么input获取焦点的问题也解决 ...
- UVA 806 Spatial Structures
题意: 如果某一大区域所有色块颜色是相同的,那么这一个大区域就算作一块,如果不同,则将其划分成四个小区域,然后重复上述步骤递归进行直到所有区域的颜色相同为止.然后根据上面划分的区域建树,小区域作为大区 ...
- Oracle视图基础
--表的另一种形式,看起来很像表 --用view可以实现复杂的query====select --创建一个视图 --当经常使用这个查询时封装成view /*create or replace 表示在创 ...