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)