vue+django实现一对一聊天功能

朴灿烈づ我的快乐病毒、 2022-03-07 04:10 537阅读 0赞

vue+django实现一对一聊天和消息推送的功能。主要是通过websocket，由于Django不支持websocket，所以我使用了django-channels。考虑到存储量的问题，我并没有把聊天信息存入数据库，服务端的作用相当于一个中转站。我只讲述实现功能的结构性代码，具体的实现还请大家看源代码。

*  [前端聊天界面][Link 1]
 *  [前端消息提醒界面][Link 2]
 *  [后端代码][Link 3]

# 效果展示 #

![图片描述][2950465837-5c56930028d59_articlex]

# 实现过程 #

# 后端 #

首先，我们需要先定义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连接、关闭和接收消息时要执行哪些动作。

# 参考文章 #

*  [Django Channels 实现点对点实时聊天和消息推送][Django Channels]
 *  [Vue中使用websocket的正确使用方法][Vue_websocket]

[Link 1]: https://github.com/michwh/onehome/blob/master/src/pages/chat.vue
[Link 2]: https://github.com/michwh/onehome/blob/master/src/pages/message.vue
[Link 3]: https://github.com/michwh/onehome-server/blob/master/chat/consumers.py
[2950465837-5c56930028d59_articlex]: /images/20220307/e049bcd5a2e9497bb7104bcbbf106e33.png
[Django Channels]: https://blog.thinker.ink/passage/14/
[Vue_websocket]: https://www.jianshu.com/p/9d8b2e42328c