如何用Vue和Django实现一对一聊天功能实例代码？

本文共计1105个文字，预计阅读时间需要5分钟。

使用Vue和Django实现一对一聊天功能和消息推送，主要依赖WebSocket。由于Django不支持WebSocket，我采用了django-channels库。目前考虑到了存储量的问题，尚未将聊天信息存入数据库。服务端的主要功能是：

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

前端聊天界面

前端消息提醒界面

后端代码

效果展示

实现过程

后端

首先，我们需要先定义websocket的两条连接路径。ws/chat/xxx/（xxx指代聊天组）这条路径是当聊天双方都进入同一个聊天组以后，开始聊天的路径。push/xxx/（xxx指代用户名）这条是指当有一方不在聊天组，另一方的消息将通过这条路径推送给对方。ws/chat/xxx/只有双方都进入聊天组以后才开启，而push/xxx/是自用户登录以后，直至退出都开启的。