需求
做一個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_required
def
function
(request):
......
|