vue django實現一對一聊天功能

2021-09-10 13:40:56 字數 3271 閱讀 4448

vue+django實現一對一聊天和訊息推送的功能。主要是通過websocket,由於django不支援websocket,所以我使用了django-channels。考慮到儲存量的問題,我並沒有把聊天資訊存入資料庫,服務端的作用相當於乙個中轉站。我只講述實現功能的結構性**,具體的實現還請大家看源**。

首先,我們需要先定義websocket的兩條連線路徑。ws/chat/***/***指代聊天組)這條路徑是當聊天雙方都進入同乙個聊天組以後,開始聊天的路徑。push/***/***指代使用者名稱)這條是指當有一方不在聊天組,另一方的訊息將通過這條路徑推送給對方。ws/chat/***/只有雙方都進入聊天組以後才開啟,而push/***/是自使用者登入以後,直至退出都開啟的。

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/的方式向服務端請求連線時,後端會把這個聊天組的資訊放入乙個字典裡。當連線關閉時,就把聊天組從字典裡移除。

class

chatconsumer

(asyncjsonwebsocketconsumer)

: chats =

dict()

async

defconnect

(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)

# 建立連線時呼叫

await self.accept(

)async

defdisconnect

(self, close_code)

:# 連線關閉時呼叫

# 將關閉的連線從群組中移除

await self.channel_layer.group_discard(self.group_name, self.channel_name)

# 將該客戶端移除聊天組連線資訊

chatconsumer.chats[self.group_name]

.remove(self)

await self.close(

)

接著,我們需要判斷連線這個聊天組的使用者個數。當有兩個使用者連線這個聊天組時,我們就直接向這個聊天組傳送資訊。當只有乙個使用者連線這個聊天組時,我們就通過push/***/把資訊發給接收方。

async

defreceive_json

(self, message,

**kwargs)

:# 收到資訊時呼叫

to_user = message.get(

'to_user'

)# 資訊傳送

length =

len(chatconsumer.chats[self.group_name]

)if length ==2:

await self.channel_layer.group_send(

self.group_name,,)

else

:await self.channel_layer.group_send(

to_user,},

)async

defchat_message

(self, event)

:# handles the "chat.message" event when it's sent to us.

await self.send_json(

)# 推送consumer

class

pushconsumer

(asyncwebsocketconsumer)

:async

defconnect

(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

defdisconnect

(self, close_code)

:await self.channel_layer.group_discard(

self.group_name,

self.channel_name

)# print(pushconsumer.chats)

async

defpush_message

(self, event)

:print

(event)

await self.send(text_data=json.dumps(

))

前端實現websocket就比較簡單了。就是對websocket進行初始化,定義當websocket連線、關閉和接收訊息時要執行哪些動作。

一對一聊天實現步驟

2 在qqchat 中new message,將message中的內容傳送給伺服器oos。問題來了,那麼我怎麼樣取得客戶端的socket呢?把qqclientconserver裡面的s做成靜態的。那麼qqchat 也可以使用了。3 serconclientthread,輸入流ois接收來自qqcha...

Mybatis註解實現 一對一對映 一對多對映

results id usermap value one 相當於 xml 檔案中的 association 標籤 column 代表資料庫中的字段 property 代表 pojo 類中的屬性 和上面的column 形成一一對應的關係 results 註解對應的 id值 可以使用 resultmap...

JavaWeb mybatis一對一 一對多查詢

mybatis查詢基本返回資料基本用到的都是resulttype與resultmap,resulttype必須po類與sql欄位一致,而resultmap可以不一致通過配置對映。本篇文章一是要講解resulttype與resultmap如何使用 二是重點講解一對一與一對多查詢resultmap的使用...