ASP.NET SingalR + MongoDB 实现简单聊天室(二):实现用户信息、聊天室初始化,聊天信息展示完善
第一篇已经介绍了一大半了,下面就是详细业务了,其实业务部分要注意的地方有几个,剩下的就是js跟html互动处理。
首先在强调一下,页面上不可缺少的js:jquery,singalR.js,hubs .
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.signalR-2.1.2.min.js"></script>
<script src="http://localhost:40716/push/im/hubs"></script>
- 用户信息存储方式
- 我采用的是利用localStorge存储到本地,当用户下次再进入聊天室,默认读取localStorge内的用户信息,信息格式如下:
- 用户信息生成
- 主要用Math.random()生成随机数,然后选择相应的图片和昵称就可以了,然后用户id随机生成一个,因为是demo,所以细节没考虑很多。
- 核心代码:
//获取用户信息
function getUserIdAndName() { var user = {
username: '', userphoto: '', userid: ''
};
var userstr = local.get("currentUser");
if (!userstr) {
//随机生成索引,对应头像
var index = getRandom(1);
//当前用户名
user.username = username[index];
//默认用户头像
user.userphoto = '/photos/00' + index + '.jpg';
//当前用户Id,用随机数法生成
user.userid = getRandom(7); var userstr = JSON.stringify(user);
local.set("currentUser", userstr);
} else {
user = JSON.parse(userstr);
}
return user;
}
- 实现用户加入消息推送
- 当有新用户加入聊天室的时候,调用后台Hub的Join方法,将用户信息推送到当前所有进入聊天室的用户
//初始化聊天室固定写法
$.connection.hub.start({ jsonp: true }).done(function () {
console.log("连接服务器成功");
//调用join方法,实现当前用户加入信息推送
proxy.server.join({
photo: user.userphoto,
username: user.username
});
}).fail(function () { console.log("聊天室初始化失败!"); });public Task Join(ZjMessage message)
{
message.connectionId = Context.ConnectionId;
//就是用户加入的时候
return Clients.All.receiveMessage(new { type = "join", msg = message });
}
- 历史消息读取
- 历史消息读取可以放在连接服务器成功之后,也可以在hub.start().done(function(){ //})里面调用。连接服务器成功之后,会走Hub OnConnected方法,同理将历史消息读取出,然后推送给前端即可。读取方法,读者可以自行定义。我这里是正好结合了MongoDB练手,所以就采用了MongoDB读取。
public override async Task OnConnected()
{
try
{
//用户第一次进来,读取历史记录
var result = await query.GetListAsync(x => x.userid.Length > );
Clients.Caller.receiveHistoryMessage(new { type = "system", msg = "您已经进入聊天室", oldlist = result.ToList() });
}
catch (TimeoutException ex)
{ }
}
- 结合界面
- 前面几点都是消息推送,那么如何实现界面展示呢,很简单,json格式的数据已经传送回来了,要做的就是数据绑定了,可以用angular,jsrender,knockout等等各种数据绑定的js框架或者自己写也好,绑定到页面上即可。这里强调的一点是,根据消息推送的userid判断是否是自己发送的消息,然后添加 other 或 self 类名确定消息是在左边还是右边。绑定代码不在粘贴
上述的运行效果如图:
代码会在下期贴出来,下期预告:发送聊天信息和开发注意事项,聊天室总结以及代码下载。
ASP.NET SingalR + MongoDB 实现简单聊天室(二):实现用户信息、聊天室初始化,聊天信息展示完善的更多相关文章
- ASP.NET SingalR + MongoDB 实现简单聊天室(一):搭建基本框架
ASP.NET SingalR不多介绍.让我介绍不如看官网,我这里就是直接上源代码,当然代码还是写的比较简单的,考虑的也少,希望各位技友多多提意见. 先简单介绍聊天室功能: 用户加入聊天室,自动给用户 ...
- ASP.NET SingalR + MongoDB 实现简单聊天室(三):实现用户群聊,总结完善
前两篇已经介绍的差不多了,本篇就作为收尾. 使用hub方法初始化聊天室的基本步骤和注意事项 首先确保页面已经引用了jquery和singalR.js还有对应的hubs文件,注意,MVC框架有时会将jq ...
- Asp.NET MVC 使用 SignalR 实现推送功能二(Hubs 在线聊天室 获取保存用户信息)
简单介绍 关于SignalR的简单实用 请参考 Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室) 在上一篇中,我们只是介绍了简单的消息推送,今天我们来修改一下,实现 ...
- 关于MongoDB的简单理解(二)--Java篇
一.声明 本文依赖于 MongoDB JVM DRIVERS 4.1 版本编写. 本文案例依赖于 Maven 项目管理工具. 二.本文主要讲解哪些内容? 如何连接到MongoDB 通过TLS/SSL连 ...
- Node教程——Node+MongoDB案例实现用户信息的增删改查
想要获取源代码的同学可以留言,我不做git上传了,案例太简单 没必要 综合演练 用户信息的增删改查 需求:你需要实现这样的结果 点击添加可以添加用户,点击删除可以删除点击修改可以修改 代码分析: 1. ...
- 使用ASP.NET SignalR实现一个简单的聊天室
前言 距离我写上一篇博客已经又过了一年半载了,时间过得很快,一眨眼,就把人变得沧桑了许多.青春是短暂的,知识是无限的.要用短暂的青春,去学无穷无尽的知识,及时当勉励,岁月不待人.今天写个随笔小结记录一 ...
- 转载 ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(三) 激动人心的时刻到啦,实现1v1聊天
ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(三) 激动人心的时刻到啦,实现1v1聊天 看起来挺简单,细节还是很多的,好,接上一篇,我们已经成功连接singalR服务器 ...
- 转载 ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(一) 整理基础数据
ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(一) 整理基础数据 最近碰巧发现一款比较好的Web即时通讯前端组件,layim,百度关键字即可,我下面要做的就是基于这个前 ...
- ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(二) 实现聊天室连接
上一篇已经简单介绍了layim WebUI即时通讯组件和获取数据的后台方法.现在要讨论的是SingalR的内容,之前都是直接贴代码.那么在贴代码之前先分析一下业务模型,顺便简单讲一下SingalR里的 ...
随机推荐
- Java 并发(一) --- CAS
CAS 原理 先来看看下面的代码是否可以输出预期的值.开启了两个线程,是否会输出200 呢 结果由于并发的原因,结果会小于或等于200 , 原因出现在 count++; 由于这一行代码存在三个操作: ...
- [javaEE] tomcat内部连接池
在META-INF的目录下,新建context.xml 在程序中获取数据源,通过jndi,这个jndi必须在Servlet中才能获取,并且需要配置web.xml使servlet一启动就拿到数据源 co ...
- express的proxy实现前后端分离
var express = require('express') var proxy = require('http-proxy-middleware') var app = express() ap ...
- Python-网络编程(二)
今天继续网络编程的东西 一.网络通讯原理 1.互联网的本质就是一系列的网络协议 我们是在浏览器上输入了一个网址,但是我们都知道,互联网连接的电脑互相通信的是电信号,我们的电脑是怎么将我们输入的网址变成 ...
- 2-1 Sass的控制命令
@if @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块.在 Sass 中除了 @if 之,还可以配合 @ ...
- SSRS 2008R2 执行Log 查询
1. 可以参考ExecutionLog3试图,此为系统安装Reporting Service自带的试图. 2. 可以使用以下语句查询: SELECT els.LogEntryId, els.Insta ...
- 浅谈用于WEBGIS开发最重要的4个HTML5特性
WebGIS是GIS与Internet相结合的产物,一般Internet的开发手段都可用于WEBGIS的开发,比较流行的有Javascript.FLash,到现在应该说市面上的WEBGIS产品和具有的 ...
- MySQL数据库备份与还原
备份数据库 1.使用mysqldump命令备份 备份一个数据库:mysqldump -u 用户名 -p密码 数据库名 [表名1,表名2...]>备份文件路径及名字.sql 如 ...
- Redhat Linux 7.3 虚拟机通过USB挂载NTFS格式的移动硬盘
分为如下几个步骤: 一.设置本地yum,安装gcc(如果本机已经安装gcc,则跳过此步) 在虚拟机连接linux iso安装盘 查看光盘挂载情况 mkdir /iso mount /dev/cdrom ...
- velecity报错:Caused by: org.apache.velocity.exception.ParseErrorException: Lexical error, Encountered: <EOF> after : "\'/order/pay?activity=\" + activityId);\r\n }*/\r\n</script>\r\n#end\r\n" at /a
Caused by: org.apache.velocity.exception.ParseErrorException: Lexical error, Encountered: <EOF> ...