Django项目--web聊天室

需求

作一个web聊天室，主要练习前端ajax与后台的交互：

1. 一对一聊天和群组聊天

2. 添加用户为好友

3. 搜索并添加群组

4. 管理员能够审批用户加群请求，群管理员能够有多个，群管理员能够删除，添加禁言群友

5. 与聊天室里的人进行临时会话

6. 能够在群组中发图片

7. 能够与好友一对一发文件

知识点

一、多对多关联self，要有related_name=,null=true在多对多不起做用；

二、一张表有2个字段同时多对多一张表,会冲突，起一个关联名称 related_name =

三、textarea不能拖拉，resize: none;

四、js获取时间，d=new Date();  d.getHours().....

五、css样式'overflow:auto;'自动滚动,jQuery有滑动效果animate();

六、查询多对多结果以列表形式，select_related()

七、js获取csrf-token，ajax传到后台 ，页面中加{% csrf-token %}，ajax获取input[name='csrfmiddlewaretoken']

八、Django队列，queue

九、jQuery定时器，取消息 setInterval()

十、浏览器存聊天记录 ,定义一个全局字典存起来。

十一、js中判断字典是否有key，dict.hasOwnProperty(key)

十一、递归函数最大迭代1000层，溢出会报错；ajax中递归与python的区别在于它会执行完函数的剩余部分再递归。

十二、Django登陆装饰器 @login_required

项目步骤

1. 后台，利用models建立数据库表，包括表（userinfo.friends字段 ，chatgroups表）

2. 进入后台admin页面，添加用户和群组等

3. 前端页面设计，这里继承自前一章的BBS项目index.html

4. 发送消息，js

5. 分组标签，bootstrap

6. 联系人所有获取，ajax

7. 加入组的显示，ajax

8. 切换正在聊天的对话框，onclick

9. 发送消息时传给后台，js，SendMSG

10. 后台解析消息，并放到Django队列，Django--queue

11. 收信人收消息，ajax，get

12. 处理队列列表，谁发的消息

13. 收到的消息显示在对话框

14. 阻塞住链接，阻塞等待队列中有消息

15. 对话框按用户显示聊天记录

16. 显示接收未读条数

17. 群组聊天，复用单人聊天代码

18. 登陆验证

关键知识点

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):      ......

来自为知笔记(Wiz)