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"} |
还可以通过cookie获取csrf，或者通过插件。具体参考《csrf-token》
登录验证
settings
1 | LOGIN_URL = '/login/' |
views
1 2 3 4 5 | from django.contrib.auth.decorators import login_required@login_requireddef function(request): ...... |
