Django项目--web聊天室
需求
做一个web聊天室,主要练习前端ajax与后台的交互:
一对一聊天和群组聊天
添加用户为好友
搜索并添加群组
管理员可以审批用户加群请求,群管理员可以有多个,群管理员可以删除,添加禁言群友
与聊天室里的人进行临时会话
可以在群组中发图片
可以与好友一对一发文件
知识点
1、多对多关联self,要有related_name=,null=true在多对多不起作用;
2、一张表有2个字段同时多对多一张表,会冲突,起一个关联名称 related_name =
3、textarea不能拖拉,resize: none;
4、js获取时间,d=new Date(); d.getHours().....
5、css样式'overflow:auto;'自动滚动,jQuery有滑动效果animate();
6、查询多对多结果以列表形式,select_related()
7、js获取csrf-token,ajax传到后台 ,页面中加{% csrf-token %},ajax获取input[name='csrfmiddlewaretoken']
8、Django队列,queue
9、jQuery定时器,取消息 setInterval()
10、浏览器存聊天记录 ,定义一个全局字典存起来。
11、js中判断字典是否有key,dict.hasOwnProperty(key)
11、递归函数最大迭代1000层,溢出会报错;ajax中递归与python的区别在于它会执行完函数的剩余部分再递归。
12、Django登录装饰器 @login_required
项目步骤
后台,利用models创建数据库表,包括表(userinfo.friends字段 ,chatgroups表)
进入后台admin页面,添加用户和群组等
前端页面设计,这里继承自前一章的BBS项目index.html
发送消息,js
分组标签,bootstrap
联系人全部获取,ajax
加入组的显示,ajax
切换正在聊天的对话框,onclick
发送消息时传给后台,js,SendMSG
后台解析消息,并放到Django队列,Django--queue
收信人收消息,ajax,get
处理队列列表,谁发的消息
收到的消息显示在对话框
阻塞住连接,阻塞等待队列中有消息
对话框按用户显示聊天记录
显示接收未读条数
群组聊天,复用单人聊天代码
登录验证
关键知识点
models:多对多关系
1
friends
=
models.ManyToManyField(
'self'
,related_name
=
'friend'
,blank
=
True
,null
=
True
)
1
2
3
4
class
ChatGroups(models.Model):
members
=
models.ManyToManyField(UserInfo,related_name
=
'group_members'
,blank
=
True
)
#null=true在ManyToManyField字段不起作用
admin
=
models.ManyToManyField(UserInfo)
#有其它多对多字段也同时关联了同样的字段,会冲突,所以要加一个related_name=
。。。。。。
webchat.html:获取键盘输入
1
2
3
4
5
6
7
8
9
10
11
$(
function
(){
$(
'body'
).delegate(
'textarea'
,
'keydown'
,
function
(e){
if
(e.which == 13){
var
input = $(
'textarea'
).val();
if
($.trim(input).length > 0 ){
//SendMSG(input);
}
//end if
$(
'textarea'
).val(
''
);
}
//endif
});
//end delegate
})
//end document
js获取时间
1
2
3
4
5
function
js_date(){
var
date_obj =
new
Date();
var
time = date_obj.getHours()+
':'
+date_obj.getMinutes()+
':'
+date_obj.getSeconds()
console.log(time);
}
滑动框动画效果
1
2
3
$(
".chat-body"
).animate({
scrollTop:$(
".chat-body"
)[0].scrollHeight
},500);
获取当前发送消息人姓名
1
2
'from'
:
"{{ request.user.userinfo.id }}"
,
'from_name'
:
"{{ request.user.userinfo.nickname }}"
,
js获取csrf-token
1
{% csrf_token %}
1
2
3
function
CsrfToken(){
return
$(
'input[name="csrfmiddlewaretoken"]'
).val();
}
1
2
3
def
send_msg(request):
print
request.POST.get(
'data'
)
#{"contact_type":"single_contact","to":"3","from":"7","from_name":"陈一","msg":"ss"}
后台,利用models创建数据库表,包括表(userinfo.friends字段 ,chatgroups表)
进入后台admin页面,添加用户和群组等
前端页面设计,这里继承自前一章的BBS项目index.html
发送消息,js
分组标签,bootstrap
联系人全部获取,ajax
加入组的显示,ajax
切换正在聊天的对话框,onclick
发送消息时传给后台,js,SendMSG
后台解析消息,并放到Django队列,Django--queue
收信人收消息,ajax,get
处理队列列表,谁发的消息
收到的消息显示在对话框
阻塞住连接,阻塞等待队列中有消息
对话框按用户显示聊天记录
显示接收未读条数
群组聊天,复用单人聊天代码
登录验证
models:多对多关系
1
|
friends = models.ManyToManyField( 'self' ,related_name = 'friend' ,blank = True ,null = True ) |
1
2
3
4
|
class ChatGroups(models.Model): members = models.ManyToManyField(UserInfo,related_name = 'group_members' ,blank = True ) #null=true在ManyToManyField字段不起作用 admin = models.ManyToManyField(UserInfo) #有其它多对多字段也同时关联了同样的字段,会冲突,所以要加一个related_name= 。。。。。。 |
webchat.html:获取键盘输入
1
2
3
4
5
6
7
8
9
10
11
|
$( function (){ $( 'body' ).delegate( 'textarea' , 'keydown' , function (e){ if (e.which == 13){ var input = $( 'textarea' ).val(); if ($.trim(input).length > 0 ){ //SendMSG(input); } //end if $( 'textarea' ).val( '' ); } //endif }); //end delegate }) //end document |
js获取时间
1
2
3
4
5
|
function js_date(){ var date_obj = new Date(); var time = date_obj.getHours()+ ':' +date_obj.getMinutes()+ ':' +date_obj.getSeconds() console.log(time); } |
滑动框动画效果
1
2
3
|
$( ".chat-body" ).animate({ scrollTop:$( ".chat-body" )[0].scrollHeight },500); |
获取当前发送消息人姓名
1
2
|
'from' : "{{ request.user.userinfo.id }}" , 'from_name' : "{{ request.user.userinfo.nickname }}" , |
js获取csrf-token
1
|
{% csrf_token %} |
1
2
3
|
function CsrfToken(){ return $( 'input[name="csrfmiddlewaretoken"]' ).val(); } |
1
2
3
|
def send_msg(request): print request.POST.get( 'data' ) #{"contact_type":"single_contact","to":"3","from":"7","from_name":"陈一","msg":"ss"} |
还可以通过cookie获取csrf,或者通过插件。具体参考《csrf-token》
登录验证
settings
1
|
LOGIN_URL = '/login/' |
views
1
2
3
4
5
|
from django.contrib.auth.decorators import login_required @login_required def function (request): ...... |
Django项目--web聊天室的更多相关文章
- Python开发一个WEB聊天室
项目实战:开发一个WEB聊天室 功能需求: 用户可以与好友一对一聊天 可以搜索.添加某人为好友 用户可以搜索和添加群 每个群有管理员可以审批用户的加群请求,群管理员可以用多个,群管理员可以删除.添加. ...
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(十二) 代码重构使用反射工厂解耦(一)缓存切换
前言 上一篇中,我们用了反射工厂来解除BLL和UI层耦合的问题.当然那是最简单的解决方法,再复杂一点的程序可能思路相同,但是在编程细节中需要考虑的就更多了,比如今天我在重构过程中遇到的问题.也是接下来 ...
- web聊天室
开发一个web聊天室 功能需求: 1.用户可以与好友一对一聊天 2.群聊 所需知识 1.Django 2.bootstrap 3.CSS 4.ajax 涉及到的新的知识点 1.如果设计表结构的时候,一 ...
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(零) 前言
前端时间听一个技术朋友说 LayIM 2.0 发布了,听到这个消息抓紧去官网看了一下.(http://layim.layui.com/)哎呀呀,还要购买授权[大家支持一下哦],果断买了企业版,喜欢钻研 ...
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(一) 之 基层数据搭建,让数据活起来(数据获取)
大家好,本篇是接上一篇 ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(零) 前言 ASP.NET SignalR WebIM系列第二篇.本篇会带领大家将 LayIM ...
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(二) 之 ChatServer搭建,连接服务器,以及注意事项。
上篇:ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(一) 之 基层数据搭建,让数据活起来(数据获取) 上一篇我们已经完成了初步界面的搭建工作,本篇将介绍IM的核心内容 ...
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(六) 之 Layim源码改造右键菜单--好友、组管理功能的实现。
前言 上一篇中讲解了加好友的流程,本篇将介绍好友管理,群组管理的右键菜单功能.当然由于菜单项目太多,都实现也得花费时间.只讲解一下我是如何从不知道怎么实现右键菜单到会自定义菜单的一个过程.另外呢,针对 ...
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(十) 之 自定义系统消息和总结
前言 本篇主要讲解一个东西,就是我们自定义系统消息.效果如下: 首先我们要做的准备工作就是改写 layim 的消息模板,如果不改的话就成为某个用户发送的消息了,那么体验就稍微差一些.找到模板我们看一下 ...
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室 实战系列(不断更新中)
项目简介 利用ASP.NET SignalR技术与Layim前端im框架实现的一个简单的web聊天室,包括单聊,群聊,加好友,加群,好友搜索,管理,群组管理,好友权限设置等功能.涉及技术: Elast ...
随机推荐
- HU 参考错误修正:/SCWM/RCORR_HUREF
HU 参考错误修正:report: /SCWM/RCORR_HUREF HU 参考的ODO/ID的凭证号及行项目号不正确的修正程序.
- python安装包工具pip的安装
官方的安装帮助页面:http://pip.readthedocs.org/en/latest/installing.html windows: 下载代码get-pip.py, 运行该代码, 这个代码会 ...
- CoreData多线程安全
CoreData中的NSManagedObjectContext在多线程中不安全,如果想要多线程访问CoreData的话,最好的方法是一个线程一个NSManagedObjectContext, ,每个 ...
- 【BootStrap】初步教程
<span style="font-family: Arial, Helvetica, sans-serif;">最近刚刚接触到BootStrap,在这里总结一下Boo ...
- 解决 NDP40-KB2468871不能安装
新机子 成功装了vs2010,然后装sql2012提示让装vs2012sp1,下载了sp1,装的时候,装到最后一个包NDP40-KB2468871的时候报错了 KB2468871安装失败 错误: Ex ...
- IT技术团队行而有效的管理之道
在博客园看到的一份读书笔记,如果日后有机会去管理一个技术团队,那么下面这些经验可能会让你更好地实施工作. IT技术团队员工的特点 高学历,知识密集型,技术立身. 人际关系简单,摩擦大多数由技术产生,相 ...
- Logdump使用指引
Logdump使用指引 Logdump使用指引在GGSCI中使用如下命令查看当前处理的队列文件和RBA号,例如:GGSCI (br-jl-accs-db1) 3> info REPYXAREPL ...
- CentOS 6.5 EasyPR环境搭建
EasyPR是一款开源的中文车牌识别系统,项目地址. 在搭建的过程中,主要的问题是注意版本的兼容性,这里面的版本包括:opencv版本,g++版本以及cmake版本. 我使用的EasyPr版本信息如下 ...
- SQL Server如何启用xp_cmdshell组件
[错误描述]: SQL Server阻止了对组件‘xp_cmdshell’的过程‘sys.xp_cmdshell’的访问.因为此组件已作为此服务嚣安全配置的一部分而被关闭.系统管理员可以通过使用sp_ ...
- CentOS 7.0系统安装配置LAMP服务器(Apache+PHP+MariaDB)
CentOS 7.0接触到的用户是比较少的,今天看了站长写了一篇关于centos7中安装配置LAMP服务器的教程,下面我把文章稍加整理一下转给大家学习交流,希望例子能给各位带来帮助哦. cento ...