Vue django实现一对一聊天和消息推送。主要是通过websocket，因为Django不支持websocket，所以我使用了django-channels。考虑到存储的问题，我没有将聊天信息存储在数据库中，服务器作为中转站。我只讲实现功能的结构代码。具体实现请看源代码。

前端聊天界面

前端消息提醒界面

后端代码

效果显示

实施程序

后端

首先，我们需要定义websocket的两条连接路径。Ws/chat/xxx/(xxx指聊天群)该路径是双方进入同一个聊天群后开始聊天的路径。Push/xxx/(xxx指用户名)是指当一方不在聊天组时，另一方的消息会通过这条路径推送给另一方。Ws/chat/xxx/只有在双方进入聊天组后才会打开，而push/xxx/则在用户登录退出后才会打开。

web socket _ URL patterns=[url(r'^ws/chat/(？Pgroup_name[^/] )/$ '，消费者。ChatConsumer)，url(r'^push/(？p用户名[0-9a-z])/$ '，消费者。pushconsumer)，]我们使用user_a的id加上下划线_再加上user_b的id来命名聊天组名称。其中，id值按从小到大的顺序放置，例如：195752_748418。当用户通过ws/chat/group_name/向服务器请求连接时，后端会将该聊天组的信息放入字典中。当连接关闭时，聊天组将从字典中删除。

class chat consumer(AsyncJsonWebsocketConsumer): chats=dict()async def connect(self): self . group _ name=self . scope[' URL _ route '][' kwargs '][' group _ name ']wait self . channel _ layer . group _ add(self . group _ name，Self.channel_name) #将用户添加到聊天组信息聊天尝试： chatconsumer.chats [self。group _ name]。添加(自我)除了： chat consumer . chats[自我。group _ name]=set([self])# print(chat consumer . chats)# call awa本身. accept()async def disconnect(self，Close_code): #连接关闭时的呼叫#从group aware self中删除关闭的连接。channel _ layer . group _ discard(self。group _ name，Self.channel_name) #从聊天组连接信息chatconsumer中删除客户端。聊天[自我。group _ name]。去除自我意识。关闭()

接下来，我们需要判断连接到这个聊天组的用户数量。当两个用户连接到该聊天组时，我们将直接向该聊天组发送消息。当只有一个用户连接到该聊天组时，我们通过push/xxx/将信息发送给接收者。

async def receive_json(self，message，* * kwargs): # call to _ user=message . get(' to _ user ')# send message len len(chat consumer . chats[self。group _ name])如果长度==2:等待self . channel _ layer . group _ send(self . group _ name，{ 'type': 'chat.message '，' message ' : message . get(' message '，})，else:等待self . channel _ layer . group _ send(to _ user，{ 'type': 'push.message '，' event ' : { ' message ' 3: message . get(' message ')，' group 'wait self . send _ JSON({ ' message ' : event[' message ']，}) # push consumer类push consumer(asynccwebsocketconsumer): asyncdef 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(push consumer . chats)async def push _ message(self，event): print(event)await . sent(text _ send

前端

websocket的前端实现相对简单。是初始化websocket并定义当websocket连接、关闭和接收消息时要执行的操作。

脚本导出默认{ name : 'test '，data(){ return { websock 3360 null，} }，created(){ this。initweb socket()；},销毁(){ this.websock.close() //离开路由之后断开求转发到连接}，方法： { initWebSocket(){//初始化weosocket const wsuri=' ws ://127。0 .0 .1:8080 ';这个。web sock=new WebSocket(wsuri)；这个。网袜。on message=这个。web socketonmessage这个。网袜。onopen=这个。web socketonopen这个。网袜。一个rror=这个。web socketonerror这个。网袜。onclose=这个。web套接字关闭；}，websocketonopen(){ //连接建立之后执行派遣方法发送数据let actions={ ' test ' : ' 12345 ' }；这个。web套接字发送(JSON)。stringify(actions))；}，websocketonerror(){//连接建立失败重连这个。initweb socket()；}，websocketonmessage(e){ //数据接收const redata=JSON。解析(例如数据)；}，websocketsend(数据){//数据发送发送（数据);}，websocketclose(e){ //关闭console.log('断开连接，e)；}、}、}/脚本

参考文章

姜戈频道实现点对点实时聊天和消息推送

某视频剪辑软件中使用求转发到的正确使用方法

总结

以上所述是小编给大家介绍的vue django实现一对一聊天功能的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！