vue+django實現一對一聊天功能

vue+django實現一對一聊天和消息推送的功能。主要是經過websocket，因爲Django不支持websocket，因此我使用了django-channels。考慮到存儲量的問題，我並無把聊天信息存入數據庫，服務端的做用至關於一箇中轉站。我只講述實現功能的結構性代碼，具體的實現還請你們看源代碼。

• 前端聊天界面
• 前端消息提醒界面
• 後端代碼

效果展現

實現過程

後端

首先，咱們須要先定義websocket的兩條鏈接路徑。ws/chat/xxx/（xxx指代聊天組）這條路徑是當聊天雙方都進入同一個聊天組之後，開始聊天的路徑。push/xxx/（xxx指代用戶名）這條是指當有一方不在聊天組，另外一方的消息將經過這條路徑推送給對方。ws/chat/xxx/只有雙方都進入聊天組之後纔開啓，而push/xxx/是自用戶登陸之後，直至退出都開啓的。

websocket_urlpatterns = [
    url(r'^ws/chat/(?P<group_name>[^/]+)/$', consumers.ChatConsumer),
    url(r'^push/(?P<username>[0-9a-z]+)/$', consumers.PushConsumer),
]

咱們採用user_a的id加上下劃線_加上user_b的id的方式來命名聊天組名。其中id值從小到大放置，例如：195752_748418。當用戶經過ws/chat/group_name/的方式向服務端請求鏈接時，後端會把這個聊天組的信息放入一個字典裏。當鏈接關閉時，就把聊天組從字典裏移除。

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)
        # 建立鏈接時調用
        await self.accept()


    async def disconnect(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/xxx/把信息發給接收方。

async def receive_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,
                {
                    "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']
        }))

前端

前端實現websocket就比較簡單了。就是對websocket進行初始化，定義當websocket鏈接、關閉和接收消息時要執行哪些動做。

<script>
  export default {
    name : 'test',
    data() {
      return {
        websock: null,
      }
    },
    created() {
      this.initWebSocket();
    },
    destroyed() {
      this.websock.close() //離開路由以後斷開websocket鏈接
    },
    methods: {
      initWebSocket(){ //初始化weosocket
        const wsuri = "ws://127.0.0.1:8080";
        this.websock = new WebSocket(wsuri);
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onopen = this.websocketonopen;
        this.websock.onerror = this.websocketonerror;
        this.websock.onclose = this.websocketclose;
      },
      websocketonopen(){ //鏈接創建以後執行send方法發送數據
        let actions = {"test":"12345"};
        this.websocketsend(JSON.stringify(actions));
      },
      websocketonerror(){//鏈接創建失敗重連
        this.initWebSocket();
      },
      websocketonmessage(e){ //數據接收
        const redata = JSON.parse(e.data);
      },
      websocketsend(Data){//數據發送
        this.websock.send(Data);
      },
      websocketclose(e){  //關閉
        console.log('斷開鏈接',e);
      },
    },
  }
</script>

參考文章

• Django Channels 實現點對點實時聊天和消息推送
• Vue中使用websocket的正確使用方法