Django结合websocket实现分组的多人聊天

news2024/12/16 4:17:46

其他地方和上一篇大致相同，上一篇地址点击进入,

改动点1：在setting.py中最后再添加如下配置：

#  多人聊天
CHANNEL_LAYERS = {
    "default":{
        "BACKEND": "channels.layers.InMemoryChannelLayer"
    }
}

因此完整的settings.py文件如下：

"""
Django settings for ws_demo project.

Generated by 'django-admin startproject' using Django 4.2.

For more information on this file, see
https://docs.djangoproject.com/en/4.2/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.2/ref/settings/
"""

from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.2/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-&62q15t&-it1jwy4o^&xsh(!fj3cm)#7=r+z12yw3j@x@kox2x'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    "channels",  # 添加channels
    "app01.apps.App01Config" # 添加app01
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'ws_demo.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'ws_demo.wsgi.application'


# Database
# https://docs.djangoproject.com/en/4.2/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
# https://docs.djangoproject.com/en/4.2/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/4.2/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.2/howto/static-files/

STATIC_URL = 'static/'

# Default primary key field type
# https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'



ASGI_APPLICATION = "ws_demo.asgi.application"

#  多人聊天
CHANNEL_LAYERS = {
    "default":{
        "BACKEND": "channels.layers.InMemoryChannelLayer"
    }
}

2、app01下view.py中的内容如下：

from django.shortcuts import render
# Create your views here.

def index(request):
    qq_group_num = request.GET.get("num")
    return render(request, 'index.html', {"qq_group_num": qq_group_num})

3、index.html中的内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .message {
            height: 300px;
            border: 1px solid #dddddd;
            width: 100%;
        }
    </style>
</head>

<body>
<div class="message" id="message"></div>
<div>
    <input type="text" placeholder="请输入" id="txt">
    <input type="button" value="发送" onclick="sendMsg()">
    <input type="button" value="关闭连接" onclick="closeConn()">
    <input type="button" value="重新建立连接" onclick="connect()">
</div>

<script>
    var socket = null;
    function connect() {
        socket = new WebSocket("ws:/127.0.0.1:8000/room/{{qq_group_num}}/");

        // 连接完成以后 客户端自动触发
        socket.onopen = function (event) {
            let tag = document.createElement("div")
            tag.innerHTML = "连接已建立"
            document.getElementById("message").appendChild(tag)
        }

        // 回调函数 当服务端有消息发送到时，自动触发
        socket.onmessage = function (event) {
            console.log(event.data);
            let tag = document.createElement("div");
            tag.innerText = event.data;
            document.getElementById("message").appendChild(tag)
        }

        // 当连接关闭时，触发
        socket.onclose = function (event) {
            let tag = document.createElement("div")
            tag.innerHTML = "连接已断开"
            document.getElementById("message").appendChild(tag)

        }
    }
    function sendMsg() {
        let tag = document.getElementById("txt")
        socket.send(tag.value)
    }
    function closeConn() {
        // 向服务端发送断开连接
        socket.close();
    }
    connect()
</script>
</body>
</html>

consumers.py中的内容如下：

from channels.generic.websocket import WebsocketConsumer
from channels.exceptions import StopConsumer
from asgiref.sync import async_to_sync

class ChatConsumer(WebsocketConsumer):  # 继承WebsocketConsumer
   def websocket_connect(self, message):
       print("有人进行连接了。。。。")
       # 有客户端向后端发送 WebSocket 连接的请求时，自动触发(握手)
       self.accept()

       #  获取群号，获取路由匹配中的群号
       group = self.scope["url_route"]["kwargs"].get("group")


       # 将这个客户端连接对象加入到某个组里边（内存 or redis） async_to_sync 将异步方法转换为同步方法
       async_to_sync(self.channel_layer.group_add)(group, self.channel_name)

   def websocket_receive(self, message):
       # 浏览器基于 WebSocket 向后端发送数据，自动触发接收消息
       print(message)
       group = self.scope["url_route"]["kwargs"].get("group")
       # #  一对一聊天
       # if message["text"] == "close":
       #     self.send("服务端主动关闭连接")
       #     #  服务端主动关闭连接
       #     self.close()
       # self.send(message["text"])
       # 通知组内的所有客户端，执行xx_oo方法，在此方法中自己可以去定义任意的功能 下边是xx.oo没问题
       async_to_sync(self.channel_layer.group_send)(group,{"type": "xx.oo","message": message})

   #  为组内的每个人回复消息
   def xx_oo(self, event):
       text = event["message"]["text"]
       self.send(text)

   def websocket_disconnect(self, message):
       # 客户端向服务端断开连接时，自动触发
       print("连接断开！！")
       group = self.scope["url_route"]["kwargs"].get("group")
       async_to_sync(self.channel_layer.group_discard)(group, self.channel_name)
       raise StopConsumer()

其他无变化，结果展示如下：

在这里插入图片描述
在这里插入图片描述

以上两个属于同一组(num值相同) 所以能相互间接收消息，而下边这个和上边不属于同一组所以接收不到上边的消息

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2260288.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基础学习：（5）不同卷积：transposed convolution，deconvolution，dilated convolution

基础学习：（5）不同卷积：transposed convolution，deconvolution，dilated convolution

基础学习&#xff1a;&#xff08;5&#xff09;不同卷积 文章目录 基础学习&#xff1a;&#xff08;5&#xff09;不同卷积前言1 deconvlution transposed convolution2 对比2.1 Convolution animations2.2 Transposed convolution animations2.3 Dilated convolution 前言 …
阅读更多...
Windows安装Jira

Windows安装Jira

下载 Download Jira Data Center | Atlassian https://product-downloads.atlassian.com/software/jira/downloads/atlassian-jira-software-10.3.0-x64.exe 以管理员身份安装&#xff0c;否则弹出以下提醒 创建和配置MySQL数据库&#xff1a;参照 Connecting Jira applicat…
阅读更多...
采用qL-MPC技术进行小型固定翼无人机的路径跟随控制

采用qL-MPC技术进行小型固定翼无人机的路径跟随控制

来自论文"Predictive Path-Following Control for Fixed-Wing UAVs Using the qLMPC Framework in the Presence of Wind Disturbances" 控制架构 采用的是 ULTRA-Extra无人机&#xff0c;相关参数如下&#xff1a; 这里用于guidance law的无人机运动学模型为&#…
阅读更多...
计算机毕设-基于springboot的青少年心理健康教育网站的设计与实现（附源码+lw+ppt+开题报告）

计算机毕设-基于springboot的青少年心理健康教育网站的设计与实现（附源码+lw+ppt+开题报告）

博主介绍&#xff1a;✌多个项目实战经验、多个大型网购商城开发经验、在某机构指导学员上千名、专注于本行业领域✌ 技术范围&#xff1a;Java实战项目、Python实战项目、微信小程序/安卓实战项目、爬虫大数据实战项目、Nodejs实战项目、PHP实战项目、.NET实战项目、Golang实战…
阅读更多...
28.在 Vue 3 中使用 OpenLayers 加载 MVT 格式矢量瓦片数据并显示图形

28.在 Vue 3 中使用 OpenLayers 加载 MVT 格式矢量瓦片数据并显示图形

前言 随着前端开发技术的不断进步&#xff0c;越来越多的强大地图库被广泛应用于 Web 地图应用开发中。OpenLayers 是一个流行的开源 JavaScript 库&#xff0c;能够帮助开发者快速构建交互式地图应用。而 Vue 3 作为现代化的前端框架&#xff0c;已经成为开发者构建高效、响应…
阅读更多...
Linux - MySQL迁移至一主一从

Linux - MySQL迁移至一主一从

Linux - MySQL迁移至一主一从 迁移准备安装MySQL ibd文件迁移原服务器操作目标服务器操作 一主一从增量同步异常解决结尾 首先部分单独安装MySQL&#xff0c;请参考Linux - MySQL安装&#xff0c;迁移数据量比较大约400G左右且网络不通故使用文件迁移&#xff0c;需开启一段时间…
阅读更多...
opencv-python的简单练习

opencv-python的简单练习

题目1.读取一张彩色图像并将其转换为灰度图。 import cv2 # 读取图片文件 img cv2.imread(./1.png)# 将原图灰度化 img_gray cv2.cvtColor(img,cv2.COLOR_BGR2GRAY)# 输出图片 cv2.imshow(img,img) cv2.imshow(img_g,img_gray) # 进行阻塞 cv2.waitKey(0) 题目2&#xff1a;…
阅读更多...
go-zero(十三)使用MapReduce并发

go-zero(十三)使用MapReduce并发

go zero 使用MapReduce并发 一、MapReduce 介绍 MapReduce 是一种用于并行计算的编程模型&#xff0c;特别适合在大规模数据处理场景中简化逻辑代码。 官方文档&#xff1a; https://go-zero.dev/docs/components/mr 1. MapReduce 的核心概念 在 MapReduce 中&#xff0c;主…
阅读更多...
探索React与Microi吾码的完美结合：快速搭建项目，低代码便捷开发教程

探索React与Microi吾码的完美结合：快速搭建项目，低代码便捷开发教程

一、摘要 在当今的数字化时代&#xff0c;软件开发就像是一场探险&#xff0c;每个开发者都是探险家&#xff0c;探索着代码的奥秘。React作为前端开发的领军框架&#xff0c;其组件化和高效的渲染机制为开发者提供了强大的工具。而Microi吾码低代码平台的出现&#xff0c;则为…
阅读更多...
SAP FICO物料分类账实操

SAP FICO物料分类账实操

物料分类账所涉及到的差异从采购入库的时候就可能已经产生&#xff0c;接下来从创建物料主数据开始对可能产生差异地方进行分析。其中有些操作步骤在标准价格估算这一篇博文中已经有过演示&#xff0c;可以先做了解。 其中的某些创建在有直接可用的情况下是非必须的&#xff0…
阅读更多...
WordPress酱茄主题 开源版 博客资讯自媒体网站模板

WordPress酱茄主题 开源版 博客资讯自媒体网站模板

一款免费开源的WordPress主题&#xff0c;主题专为WordPress博客、资讯、自媒体网站而设计 运行环境 支持WordPress版本&#xff1a;5.6 兼容Chrome、Firefox、Safari等主流浏览器 支持设备&#xff1a;响应式布局&#xff0c;不同设备不同展示效果 服务器环境建议&#x…
阅读更多...
【HF设计模式】03-装饰者模式

【HF设计模式】03-装饰者模式

声明&#xff1a;仅为个人学习总结&#xff0c;还请批判性查看&#xff0c;如有不同观点&#xff0c;欢迎交流。 摘要 《Head First设计模式》第3章笔记&#xff1a;结合示例应用和代码&#xff0c;介绍装饰者模式&#xff0c;包括遇到的问题、遵循的 OO 原则、达到的效果。 …
阅读更多...
Linux查看是否有www-data用户,如果没有添加一个

Linux查看是否有www-data用户,如果没有添加一个

在 Linux 系统中&#xff0c;www-data 用户通常是用来运行 Web 服务&#xff08;如 Nginx 或 Apache&#xff09;的。如果你想检查系统中是否已经存在 www-data 用户&#xff0c;并在没有的情况下添加一个&#xff0c;可以按照以下步骤操作&#xff1a; ### 1. 检查 www-data …
阅读更多...
23.模块和包

23.模块和包

模块 模块Module,是一个python文件&#xff0c;以.py结尾。 模块能定义函数、类和变量。 模块导入 模块在使用前需要先导入 [from 模块名] import [模块 | 类 | 变量 | 函数 | *] [as 别名] import 模块 import time print("start...") time.sleep(5) print(&…
阅读更多...
IDEA报错：无效的源发行版、无效的目标发行版

IDEA报错：无效的源发行版、无效的目标发行版

1. 无效的源发行版 创建项目的时候&#xff0c;会遇见这个报错&#xff0c;原因就是编译的JDK版本与发布版本不一致。 解决方法&#xff1a; 1.1. 找到问题所在地 英文&#xff1a;File -> Project Structure ->Project Settings 中文&#xff1a;文件->项目结构 …
阅读更多...
2025年，客服知识库与人工智能的结合

2025年，客服知识库与人工智能的结合

随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;传统客服模式正在经历前所未有的变革。特别是在2025年&#xff0c;客服知识库与AI的深度融合&#xff0c;不仅极大地提升了客服处理的效率与准确性&#xff0c;还为用户带来了更加个性化、高效的服务体验。 …
阅读更多...
JVM 双亲委派模型以及垃圾回收机制

JVM 双亲委派模型以及垃圾回收机制

目录 1. JVM 内存区域划分 2. JVM 中类加载的过程 1) 类加载的基本流程 2) 双亲委派模型 3. JVM 中垃圾回收机制 1) 找到垃圾 a) 引用计数 b) 可达性分析 2) 释放垃圾 1. JVM 内存区域划分 一个运行起来的 Java 进程&#xff0c;其实就是一个 JVM 虚拟机。 而进程是…
阅读更多...
微信小程序跳转其他小程序以及跳转网站

微信小程序跳转其他小程序以及跳转网站

一、跳转其他小程序 1.1 知道appid和页面路径 wx.navigateToMiniProgram({appId: appid, // 替换为目标小程序 AppIDpath: pathWithParams, // 小程序路径envVersion: release, // 开发版、体验版或正式版success(res) {console.log("跳转到其他小程序成功&#xff01;&q…
阅读更多...
学习笔记：从ncsi/nc-si协议和代码了解网络协议的设计范式

学习笔记：从ncsi/nc-si协议和代码了解网络协议的设计范式

学习笔记&#xff1a;从ncsi/nc-si协议和代码了解网络协议的设计范式 参考文档&#xff1a; https://www.dmtf.org/standards/published_documents https://www.dmtf.org/dsp/DSP0222 https://www.dmtf.org/sites/default/files/standards/documents/DSP0222_1.2.0.pdf参考代…
阅读更多...
深度学习训练参数之学习率介绍

深度学习训练参数之学习率介绍

学习率 1. 什么是学习率 学习率是训练神经网络的重要超参数之一&#xff0c;它代表在每一次迭代中梯度向损失函数最优解移动的步长&#xff0c;通常用 η \eta η 表示。它的大小决定网络学习速度的快慢。在网络训练过程中&#xff0c;模型通过样本数据给出预测值&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023