Django实现WebSocket在线聊天室功能(channels库)


Posted in Python onSeptember 25, 2021

1.Django实现WebSocket在线聊天室

1.1 安装

pip install channels==2.3

(saas) F:\Desktop\Python_Study\CHS-Tracer\saas>pip install channels==2.3
Looking in indexes: http://mirrors.aliyun.com/pypi/simple/
Collecting channels==2.3
  Downloading
  ...
Successfully installed Automat-20.2.0 attrs-20.3.0 autobahn-21.3.1 channels-2.3.0

1.2 创建Django项目

1.3 http路由

url(r"^chat/$", chat_view.chat, name="chat"),  # 聊天室

1.4 http视图函数

def chat(request):
    return render(request, "chat.html")

1.5 settings添加channels相关配置

INSTALLED_APPS = [
    'channels',  # 项目中要使用channels做WebSocket了
]

ASGI_APPLICATION = "saas.routing.application" # 项目名.routing.application

1.6 创建routing.py(websocket的路由)和comsumers.py(websocket的视图函数)

Django实现WebSocket在线聊天室功能(channels库)Django实现WebSocket在线聊天室功能(channels库)

1.7 websocket路由

# -*- coding:utf-8 -*-
# 作者:IT小学生蔡坨坨
# 时间:2021/4/23 18:21
# 功能:channels相关路由

from channels.routing import ProtocolTypeRouter, URLRouter
from django.conf.urls import url

from web import consumers

application = ProtocolTypeRouter({
    "websocket": URLRouter([
        url(r'^chat/$', consumers.ChatConsumer),
    ])
})

1.8 websocket视图函数

# -*- coding:utf-8 -*-
# 作者:IT小学生蔡坨坨
# 时间:2021/4/23 18:25
# 功能:channels相关视图

from channels.exceptions import StopConsumer
from channels.generic.websocket import WebsocketConsumer

# 定义一个列表,用于存放当前在线的用户
CONSUMER_OBJECT_LIST = []


class ChatConsumer(WebsocketConsumer):

    def websocket_connect(self, message):
        """
        客户端浏览器发来连接请求之后就会被触发
        :param message:
        :return:
        """

        # 服务端接收连接,向客户端浏览器发送一个加密字符串
        self.accept()
        # 连接成功
        CONSUMER_OBJECT_LIST.append(self)

    def websocket_receive(self, message):
        """
        客户端浏览器向服务端发送消息,此方法自动触发
        :param message:
        :return:
        """

        print("接受到消息了。", message)

        # 服务端给客户端回一条消息
        # self.send(text_data=message["text"])
        for obj in CONSUMER_OBJECT_LIST:
            obj.send(text_data=message["text"])

    def websocket_disconnect(self, message):
        """
        客户端浏览器主动断开连接
        :param message:
        :return:
        """

        # 服务端断开连接
        CONSUMER_OBJECT_LIST.remove(self)
        raise StopConsumer()

1.9 前端代码

<!-- css样式 -->
<style>
    pre {
        display: block;
        padding: 9.5px;
        margin: 0 0 10px;
        font-size: 18px;
        line-height: 1.42857143;
        color: #333;
        word-break: break-all;
        word-wrap: break-word;
        background-color: #00aaaa;
        border-radius: 12px;
    }
</style>

<!-- body内容 -->
<div style="width: 600px;height: 574px;margin: auto;margin-top: 20px;">
    <div class="panel panel-success">
        <div class="panel-heading">在线实时聊天室</div>
        <div class="panel-body">
            <div style="border: #f5f5f5 2px solid;width: 570px;height: 400px;overflow:scroll">
                <div id="content">
                    <!-- 聊天记录 -->
                </div>
            </div>
            <div style="border-color: white;margin-top: 10px">
                <textarea type="text" id="txt" placeholder="请输入消息内容......" class="form-control"></textarea>
            </div>
        </div>

        <div class="table">
            <div>
                <button class="btn btn-danger" onclick="closeLink();" style="margin-left: 74%">断开连接</button>
                <button class="btn btn-success" onclick="sendMsg();">发送</button>
            </div>
        </div>
    </div>
</div>

<!-- 消息模板 -->
<div id="recordTemplate" class="hide">
    <div class="right-info">
        <!-- 用户 -->
        <p>匿名用户:</p>

        <!-- 消息内容 -->
        <pre>

            </pre>
    </div>
</div>


<!-- js代码 -->
<script>
    var STATUS; // 是否连接的标志
    var ws = new WebSocket("ws://127.0.0.1:8000/chat/");

    ws.onopen = function () {
        // 客户端在握手环节验证成功之后,自动执行此方法
        console.log("连接成功。")
    };

    ws.onmessage = function msg(event) {
        var $item = $("#recordTemplate").find('.right-info').clone();
        $item.find('pre').html(event.data);
        $("#content").append($item);
    };

    function sendMsg() {
        if (STATUS == false) {
            swal({
                title: "已断开",
                text: "当前已断开连接,刷新页面重新连接。"
            });
        } else {
            ws.send($("#txt").val());
            $("#txt").val("");
        }
    }

    function closeLink() {
        ws.close();
        STATUS = false;
        console.log("断开连接");
        swal({
            text: "成功断开连接,刷新页面重新连接。"
        });
    }
</script>

2.效果展示

Django实现WebSocket在线聊天室功能(channels库)

3.总结

http协议
 chat路由 --> chat视图函数
 访问:浏览器发送请求即可
websocket协议
 chat路由 --> ChatConsumer(3个方法)
 访问:new WebSocket对象

到此这篇关于Django实现WebSocket在线聊天室(channels库)的文章就介绍到这了,更多相关Django实现WebSocket在线聊天室内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Python 相关文章推荐
python和shell实现的校验IP地址合法性脚本分享
Oct 23 Python
Python的requests网络编程包使用教程
Jul 11 Python
基于Python实现对PDF文件的OCR识别
Aug 05 Python
Python pycharm 同时加载多个项目的方法
Jan 17 Python
python控制nao机器人身体动作实例详解
Apr 29 Python
Python enumerate函数遍历数据对象组合过程解析
Dec 11 Python
python生成并处理uuid的实现方式
Mar 03 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
Jan 15 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
Mar 04 Python
Python办公自动化之教你如何用Python将任意文件转为PDF格式
Jun 28 Python
python数字转对应中文的方法总结
Aug 02 Python
python区块链持久化和命令行接口实现简版
May 25 Python
Python天气语音播报小助手
用python基于appium模块开发一个自动收取能量的小助手
Python实现打乒乓小游戏
Python 类,对象,数据分类,函数参数传递详解
Sep 25 #Python
Python实现简单的俄罗斯方块游戏
Python实现滑雪小游戏
利用python实时刷新基金估值(摸鱼小工具)
Sep 15 #Python
You might like
php牛逼的面试题分享
2013/01/18 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
HTML node相关的一些资料整理
2010/01/01 Javascript
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
JS实现商品筛选功能
2020/08/19 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
python实现教务管理系统
2018/03/12 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
介绍一下代理模式(Proxy)
2014/10/17 面试题
毕业生找工作推荐信
2013/11/21 职场文书
模具数控专业自荐信
2014/01/27 职场文书
员工培训邀请函
2014/02/02 职场文书
员工考核评语大全
2014/04/26 职场文书
2014年度个人工作总结
2014/11/07 职场文书
中学教师个人总结
2015/02/10 职场文书
领导视察通讯稿
2015/07/18 职场文书