vue+django實現(xiàn)一對一聊天和消息推送的功能。主要是通過websocket，由于Django不支持websocket，所以我使用了django-channels。考慮到存儲量的問題，我并沒有把聊天信息存入數(shù)據(jù)庫，服務(wù)端的作用相當于一個中轉(zhuǎn)站。我只講述實現(xiàn)功能的結(jié)構(gòu)性代碼，具體的實現(xiàn)還請大家看源代碼。
成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的雨城網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
前端聊天界面
前端消息提醒界面
后端代碼
效果展示
實現(xiàn)過程
后端
首先，我們需要先定義websocket的兩條連接路徑。ws/chat/xxx/（xxx指代聊天組）這條路徑是當聊天雙方都進入同一個聊天組以后，開始聊天的路徑。push/xxx/（xxx指代用戶名）這條是指當有一方不在聊天組，另一方的消息將通過這條路徑推送給對方。ws/chat/xxx/只有雙方都進入聊天組以后才開啟，而push/xxx/是自用戶登錄以后，直至退出都開啟的。
websocket_urlpatterns = [ url(r'^ws/chat/(?P[^/]+)/$', consumers.ChatConsumer), url(r'^push/(?P [0-9a-z]+)/$', consumers.PushConsumer), ]
我們采用user_a的id加上下劃線_加上user_b的id的方式來命名聊天組名。其中id值從小到大放置，例如：195752_748418。當用戶通過ws/chat/group_name/的方式向服務(wù)端請求連接時，后端會把這個聊天組的信息放入一個字典里。當連接關(guān)閉時，就把聊天組從字典里移除。
class ChatConsumer(AsyncJsonWebsocketConsumer): chats = dict() async def connect(self): self.group_name = self.scope['url_route']['kwargs']['group_name'] await self.channel_layer.group_add(self.group_name, self.channel_name) # 將用戶添加至聊天組信息chats中 try: ChatConsumer.chats[self.group_name].add(self) except: ChatConsumer.chats[self.group_name] = set([self]) #print(ChatConsumer.chats) # 創(chuàng)建連接時調(diào)用 await self.accept() async def disconnect(self, close_code): # 連接關(guān)閉時調(diào)用 # 將關(guān)閉的連接從群組中移除 await self.channel_layer.group_discard(self.group_name, self.channel_name) # 將該客戶端移除聊天組連接信息 ChatConsumer.chats[self.group_name].remove(self) await self.close()
接著，我們需要判斷連接這個聊天組的用戶個數(shù)。當有兩個用戶連接這個聊天組時，我們就直接向這個聊天組發(fā)送信息。當只有一個用戶連接這個聊天組時，我們就通過push/xxx/把信息發(fā)給接收方。
重慶分公司
重慶分公司
async def receive_json(self, message, **kwargs):
# 收到信息時調(diào)用
to_user = message.get('to_user')
# 信息發(fā)送
length = len(ChatConsumer.chats[self.group_name])
if length == 2:
await self.channel_layer.group_send(
self.group_name,
{
"type": "chat.message",
"message": message.get('message'),
},
)
else:
await self.channel_layer.group_send(
to_user,
{
"type": "push.message",
"event": {'message': message.get('message'), 'group': self.group_name}
},
)
async def chat_message(self, event):
# Handles the "chat.message" event when it's sent to us.
await self.send_json({
"message": event["message"],
})
# 推送consumer
class PushConsumer(AsyncWebsocketConsumer):
async def connect(self):
self.group_name = self.scope['url_route']['kwargs']['username']
await self.channel_layer.group_add(
self.group_name,
self.channel_name
)
await self.accept()
async def disconnect(self, close_code):
await self.channel_layer.group_discard(
self.group_name,
self.channel_name
)
# print(PushConsumer.chats)
async def push_message(self, event):
print(event)
await self.send(text_data=json.dumps({
"event": event['event']
}))前端
前端實現(xiàn)websocket就比較簡單了。就是對websocket進行初始化，定義當websocket連接、關(guān)閉和接收消息時要執(zhí)行哪些動作。
參考文章
Django Channels 實現(xiàn)點對點實時聊天和消息推送
Vue中使用websocket的正確使用方法
總結(jié)
以上所述是小編給大家介紹的vue+django實現(xiàn)一對一聊天功能的實例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
