• 演示及源码地址:

    演示地址:https://www.wchime.xyz/#/

    后端代码:https://gitee.com/mom925/wchime-web-api

    前端代码:https://gitee.com/mom925/uniapp-web

  • 项目说明

    项目技术:django+mysql+uwsgi+nginx+uniapp

    逻辑:以django搭建一个websocket服务器,前端用户连接websocket,进入同一群聊实现在线实时聊天

    演示图:

  • 主要代码说明

    搭建websocket代码

    

from channels.generic.websocket import WebsocketConsumer
from channels.exceptions import StopConsumer
from asgiref.sync import async_to_sync
import json class RollCallConsumer(WebsocketConsumer):
def websocket_connect(self, message):
# 接收这个客户端的连接
self.accept()
# 将这个客户端的连接对象加入到某个地方(内存 or redis)1314 是群号这里写死了
async_to_sync(self.channel_layer.group_add)('1314', self.channel_name) def websocket_receive(self, message):
# 浏览器基于websocket向后端发送数据,自动触发接收消息
# data = json.loads(message['text'])
# chat_type = data.get('chat_type')
# chat_id = data.get('chat_id')
# chat_content = data.get('message')
# print('chat_type', chat_type)
# if chat_type == 'add_chat':
# async_to_sync(self.channel_layer.group_add)(chat_id, self.channel_name) # 通知组内的所有客户端,执行 chat_message 方法,在此方法中自己可以去定义任意的功能。 async_to_sync(self.channel_layer.group_send)('1314', {"type": 'chat.message', 'message': message}) # 这个方法对应上面的type,意为向1314组中的所有对象发送信息
# 回调的方法
def chat_message(self, event):
text = event['message']['text']
self.send(text) def websocket_disconnect(self, message):
data = json.loads(message['text', '{}'])
chat_id = data.get('chat_id')
# 断开链接要将这个对象从 channel_layer 中移除
async_to_sync(self.channel_layer.group_discard)(chat_id, self.channel_name)
raise StopConsumer()

  django项目此时需要以asgi启动websocket,部署后可用daphne启动asgi

websocket群聊实战的更多相关文章

  1. Websocket 群聊功能

    websocket 群聊 前提关闭防火墙 写入代码 from flask import Flask,request,render_template from geventwebsocket.handl ...

  2. WebSocket群聊与单聊

    一 . WebSocket实现群聊 py文件代码 # py文件 from flask import Flask, render_template, request from geventwebsock ...

  3. websocket 群聊单聊

    websocket 介绍 介绍引自 https://segmentfault.com/a/1190000012709475 群聊 from flask import Flask, request, r ...

  4. websocket 群聊,单聊,加密,解密

    群聊 from flask import Flask, request, render_templatefrom geventwebsocket.handler import WebSocketHan ...

  5. React系列——websocket群聊系统在react的实现

    前奏 这篇文章仅对不熟悉在react中使用socket.io的人.以及websocket入门者有帮助. 下面这个动态图展示的聊天系统是用react+express+websocket搭建的,很模糊吧, ...

  6. 一例完整的websocket实现群聊demo

    前言 业余我都会花一些时间在tcp.http和websocket等领域的学习,现在觉得有点收获,所以把一个基于websocket的群聊功能的例子提供给大家玩玩.当然这是一个很完整的例子,包括webso ...

  7. websocket(二)--简单实现网页版群聊

    websocket可以实现服务端的消息推送,而不必在客户端轮询,大大的节省的资源,对于实时通讯来说简直是个大喜讯. 在上一篇文章中介绍了协议握手,这篇文章将通过实现简单的群聊来帮助进一步了解webso ...

  8. WebSocket刨根问底(三)之群聊

    前两篇文章[WebSocket刨根问底(一)][WebSocket刨根问底(二)]我们介绍了WebSocket的一些基本理论,以及一个简单的案例,那么今天继续,我们来看一个简单的群聊的案例,来进一步了 ...

  9. websocket 实现单聊群聊 以及 握手原理+加密方式

    WebSocket 开始代码 服务端 群聊 # type:WebSocket 给变量标注类型 # websocket web + socket from geventwebsocket.server ...

  10. flask 第五章 WebSocket GeventWebsocket 单聊群聊 握手 解密 加密

    1.WebSocket 首先我们来回顾一下,我们之前用socket学习过的项目有: 1.django 2.flask 3.FTP - 文件服务 HTTP - TCP (特点): 1.一次请求,一次响应 ...

随机推荐

  1. 广度优先搜索— —提高Ⅲ(BFS优化)

    双向广搜 所谓双向广搜,就是初始结点向目标结点和目标结点向初始结点同时扩展,直至在两个扩展方向上出现同一个结点,搜索结束.它适用的问题是,扩展结点较多,而目标结点又处在深沉,如果采用单纯的广搜解题,搜 ...

  2. js判断字符串数据类型

    mounted() { this.isJSON('{"key":1232,"a":2},{"key":1232,"a": ...

  3. Flask Session 登录认证模块

    Flask 框架提供了强大的 Session 模块组件,为 Web 应用实现用户注册与登录系统提供了方便的机制.结合 Flask-WTF 表单组件,我们能够轻松地设计出用户友好且具备美观界面的注册和登 ...

  4. 使用reposync工具将yum安装包保存到本地的方法

    使用reposync工具将yum安装包保存到本地的方法 版权声明:原创作品,谢绝转载!否则将追究法律责任. ----- 作者:kirin Anolis7/centos7 1.reposync 1.1. ...

  5. IDEA提示Cannot resolve symbol 'String'

    一.解决方案: 1.问题原因: 系统提示Cannot resolve symbol 'String',是由于没有正确导入JDK : 2.解决方案: 在project SDK中正确配置即可. 二.完成. ...

  6. Android12版本闹钟服务崩溃问题

    原文地址: Android12版本闹钟服务崩溃问题 - Stars-One的杂货小窝 公司项目app线上出现的崩溃记录问题,崩溃日志如下所示: Caused by java.lang.Security ...

  7. 【工具推荐】LICEcap –GIF 屏幕录制工具

    介绍: LICEcap 是一款简洁易用的动画屏幕录制软件,支持导出 GIF 动画图片格式,轻量级.高质量(每帧颜色数量可超过256).使用简单,录制过程中可以随意改变录屏范围. LICEcap 非常轻 ...

  8. C++ Qt开发:使用顺序容器类

    当我们谈论编程中的数据结构时,顺序容器是不可忽视的一个重要概念.顺序容器是一种能够按照元素添加的顺序来存储和检索数据的数据结构.它们提供了简单而直观的方式来组织和管理数据,为程序员提供了灵活性和性能的 ...

  9. springBoot——读取数据

    在yml文件中读取数据,用$符号就可以 类似于这样的 如果要读取yml里面全部的数据,就用自动装配来写 而如果要用实体类来读取里面的数据 package com.example.springboot_ ...

  10. Chat2DB接入文心一言AI教程(原创教程,转载请注明)

    引言 关于Chat2DB和文心一言是啥我就不赘述了,由于Chat2DB自带的ai有调用次数限制,所以想着接入百度的文心AI,但是由于网上没有找到相关的教程,此教程是本人研究了很久才弄出来的,顺便记录一 ...