vue+django实现一对一聊天功能的实例代码


Posted in Javascript onJuly 17, 2019

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

前端聊天界面

前端消息提醒界面

后端代码

效果展示

vue+django实现一对一聊天功能的实例代码

实现过程

后端

首先,我们需要先定义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的正确使用方法

总结

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

Javascript 相关文章推荐
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 Javascript
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 #Javascript
js设置默认时间跨度过程详解
Jul 17 #Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 #Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 #Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 #Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 #Javascript
js getBoundingClientRect使用方法详解
Jul 17 #Javascript
You might like
PHP中显示格式化的用户输入
2006/10/09 PHP
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
jquery Tab效果和动态加载的简单实例
2013/12/11 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
nodejs中实现阻塞实例
2015/03/24 NodeJs
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
python列表使用实现名字管理系统
2019/01/30 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
python自动化办公操作PPT的实现
2021/02/05 Python
总监职责范文
2013/11/09 职场文书
大学生社团活动总结
2014/04/26 职场文书
2019新员工心得体会
2019/06/25 职场文书
python超详细实现完整学生成绩管理系统
2022/03/17 Python