django、vue如何实现websock通信，如何实现多人群聊

django可以通过channels或者dwebsocket去实现，但是dwebsocket不支持django3.x，所以使用channels来实现前后端的通信, 实现功能建立群聊

一、各种前后端配置

1、django安装

安装指定版本的包

pip install channels==3.0.4

pip install channels_redis

2、vue安装：

使用chat_ui插件

npm install --save @maybecode/m-chat

同时配置到main中：

import MChat from '@maybecode/m-chat'

Vue.use(MChat)

3、django中注册channels

在配置文件settings的INSTALLED_APPS中加入'channels'

4、在setting中配置asgi

这里为什么用asgi不用wsgi，因为wsgi不支持websocket通信。

WSGI_APPLICATION = 'dyz_account.wsgi.application'
ASGI_APPLICATION = 'dyz_account.asgi.application'CHANNEL_LAYERS = {'default': {'BACKEND': 'channels_redis.core.RedisChannelLayer','CONFIG': {# 自己的redis地址"hosts": [('127.0.0.1', 6379)],},},
}

二、前后端的主要代码

1、在主项目下修改或添加asgi.py文件

import os
from django.core.asgi import get_asgi_application
from channels.routing import ProtocolTypeRouter, URLRouterfrom . import routing
from channels.auth import AuthMiddlewareStack
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'dyz_account.settings')application = ProtocolTypeRouter({"http": get_asgi_application(),"websocket": AuthMiddlewareStack(URLRouter(routing.websocket_urlpatterns)),
})

2、在settings同级目录中创建routing.py。注册路由

from django.urls import path
from dyz_account.consumers import ChatConsumerwebsocket_urlpatterns = [path('ws/chat', ChatConsumer.as_asgi()),
]

3、创建consumer.py文件,处理websocket通信逻辑

import jsonfrom asgiref.sync import async_to_sync
from channels.generic.websocket import WebsocketConsumer
from channels.exceptions import StopConsumerCONN_LIST = []class ChatConsumer(WebsocketConsumer):def websocket_connect(self, message):print("开始链接...")# 有客户端来向后端发送websocket连接的请求时，自动触发。# 服务端允许和客户端创建连接（握手）。self.accept()CONN_LIST.append(self)def websocket_receive(self, message):print('22222222', message)data = json.loads(message.get('text', '{}'))chat_type = data.get('chat_type')chat_id = data.get('chat_id')chat_content = data.get('message')if chat_type == 'add_chat':async_to_sync(self.channel_layer.group_add)(chat_id, self.channel_name)else:async_to_sync(self.channel_layer.group_send)(chat_id, {"type": 'chat.message', 'message': message})def chat_message(self, event):self.send(event['message']['text'])def websocket_disconnect(self, message):CONN_LIST.remove(self)raise StopConsumer()

4、前端进行websocket连接，

<template><div style="width: 60%; margin-left: 20%"><div class="message" id="message"></div><div v-show="add_chat"><inputtype="text"placeholder="请输入群聊id"id="txt"v-model="chat_id"/><input type="button" value="加入群聊" @click="addChat()" /></div><div v-show="send_chat"><m-chatref="mChat":messages="messages"@submit="submit":loadMore="loadMore"height="100vh":openExtends="open_extends"></m-chat></div><div></div></div>
</template><script>
// import { } from "@/components/axios_api/api.js"; // @符号指的是src路径
import MChat from "@maybecode/m-chat";
export default {data() {return {user_id: "",send_data: "",chat_id: null,send_chat: false,add_chat: true,messages: [],open_extends: ["image"],};},components: {MChat,},methods: {submit(content) {this.sendMessage(content["content"]);},loadMore() {},// 加入群聊，如果有对应的id，进入群聊，没有则创建一个新的群聊addChat() {var userid = localStorage.getItem("user_id");if (userid) {if (this.chat_id) {this.initWebSocket();this.send_chat = true;this.add_chat = false;} else {alert("请输入群聊号");}}else{alert('拜拜')this.$router.push('/login')}},initWebSocket() {//初始化websocket 可以使用自己的ip地址var wsuri = "ws://127.0.0.1:8000";// var ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";var ws_on_line = wsuri + "/ws/chat";// 本地走代理/vue.config.js,线上也代理nginx代理console.log("111111111111", ws_on_line);// var ws_scheme = window.location.protocol==="https:"?"wss":"ws"this.websock = new WebSocket(ws_on_line);this.websock.onopen = this.websocketonopen;this.websock.onmessage = this.websocketonmessage;this.websock.onerror = this.websocketonerror;// this.websock.onclose = this.websocketclose;},websocketonopen() {//连接建立之后执行send方法发送数据console.log("建立连接");var actions = { message: "连接测试" };var type = "add_chat";this.sendMessage(actions, type);},websocketonerror(e) {//连接建立失败重连console.log("连接error", e);// this.initWebSocket();},websocketonmessage(e) {//数据接收this.websocket_data = JSON.parse(e.data);console.log("websocket-res", JSON.stringify(this.websocket_data));console.log("接收后端数据type", typeof this.websocket_data);let message_user_id = this.websocket_data["username"];let message_self = false;// 判断当前消息是否自己发出if (message_user_id == localStorage.getItem("username")) {message_self = true;}else{message_self = false}let name = this.websocket_data.username;// 将websocket消息展示在消息提示框var count = this.messages.length;var push_message = {type: "text",content: { text: JSON.stringify(this.websocket_data.message) },id: count + 1,self: message_self,name: name,};this.messages.push(push_message);var h = this.$createElement;// 创建html元素this.hrender = h("p", null, [h("div",[h("div", JSON.stringify(this.websocket_data.message)),// 传变量//   },// }),],null),]);},sendMessage(Data, type = "send_data") {//数据发送console.log("222222222222");this.websock.send(JSON.stringify({chat_id: this.chat_id,message: Data,chat_type: type,username: localStorage.getItem("username"),user_id: localStorage.getItem("user_id"),//在登录的时候进行保存信息  }));},websocketclose(e) {//关闭console.log("断开连接", e);},userinfo() {},},mounted() {},
};
</script><style>
</style>

5、需要在登录时保存用户信息

<template><p>账号：<input type="text" v-model="user"></p><p>密码：<input type="password" v-model="pwd"></p><p><button @click="login">登录</button></p>
</template><script>
import {post} from "../../utils/request"
export default {data(){return{user:"",pwd:""}},methods:{login(){post("/user/sms_phone/",{username:this.user,password:this.pwd}).then(resp=>{console.log(resp)if(resp.status==200){console.log(resp.data.token)localStorage.setItem("username", resp.data.username)localStorage.setItem('user_id',resp.data.user_id)localStorage.setItem('token',resp.data.token)console.log('-------------',resp.data.username,resp.data.user_id)alert("登录成功")}}).catch(err=>{console.log(err)})},}
}
</script><style></style>

6、参考相关连接地址

m-chat: 基于vue 聊天(IM) UI组件https://gitee.com/null_639_5368/m-chat#popitemclick-demo

django、vue如何实现websock通信，如何实现多人群聊相关推荐

python+django+vue的校园新闻网站#毕业设计项目源码
校园新闻网站的主要使用者分为管理员和用户,实现功能包括管理员:首页.个人中心.用户管理.新闻类型管理.校园新闻管理.留言板管理.论坛交流.系统管理,用户前台:首页.校园新闻.论坛交流.留言反馈.个人中 ...
皇nity webgl与html交互文件,Vue与UnityWebGl交互通信
Vue与UnityWebGl交互通信 Vue与UnityWebGl交互通信最近项目需要在可视化界面内添加unity3D文件并进行交互展示效果,特此整理如下: 1.Vue 中自带 Unity3D的依赖 ...
[vue] vue组件之间的通信都有哪些？
[vue] vue组件之间的通信都有哪些? 父子Coms: 1/2/3 ..兄弟Coms: 4/5跨级Coms: 4/5/6/7props$emit/$on( $parents/$children ) ...
php node.js django,Vue.js和Django搭建前后端分离项目示例详解
本篇文章主要介绍了Django+Vue.js搭建前后端分离项目的示例,具有一定参考价值,有兴趣的可以了解一下在写这篇文章的时候,顺带学习了一下关于Markdown的使用方法. 笔者是个渣渣,一切都是 ...
Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.跨级组件.非嵌套组件之间通信. props $emit props $emit适用于父子组件的通信,这种组件通信的方式是我们运用的非 ...
Django + vue 开发接口自动化可视化平台
Django + vue 开发接口自动化可视化平台界面演示接口详情环境管理变量管理定时任务定时任务结果任务结果详情 UML 图表 #体验地址: http://1.12.224.200/ ...
vue php聊天室,实例详解vue组件父子间通信之聊天室
本文主要为大家详细介绍了vue组件父子间通信之综合练习聊天室制作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 组件父子间通信之综合练习 {{msg}} // 创建父组件 Vu ...
python+django+vue+Elementui人力资源管理系统
科学技术革命的创新改变了世界原有的模式,新技术的出现让其他东西不得不随之改变,信息和互联网的迅速发展导致企业之间的竞争变得空前激烈,一个企业的核心究其根本是人才,所以只要能有效的利用新的技术去管理和开 ...
（一）框架搭建，前端路由设置，自定义寻找指定路径（Django+Vue+Mysql，数据库管理数据分析网站）
从零开始,1周内搭建出内含复杂深度学习作图分析功能的网站,很肝,但是很有收获,问了很多大佬,查了很多资料,碰了很多壁,写了很多代码,测试,学习,趁着刚做完,写文章总结复盘一下,我尽量以我喜欢的通俗的逻 ...

django、vue如何实现websock通信，如何实现多人群聊

django、vue如何实现websock通信，如何实现多人群聊相关推荐

最新文章

热门文章