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实现sublime3的less编译插件示例
Apr 27 Python
Python编程实现删除VC临时文件及Debug目录的方法
Mar 22 Python
一个基于flask的web应用诞生 组织结构调整(7)
Apr 11 Python
Python获取SQLite查询结果表列名的方法
Jun 21 Python
Django 添加静态文件的两种实现方法(必看篇)
Jul 14 Python
Python使用Matplotlib实现Logos设计代码
Dec 25 Python
使用 Python 实现微信公众号粉丝迁移流程
Jan 03 Python
将pip源更换到国内镜像的详细步骤
Apr 07 Python
python SocketServer源码深入解读
Sep 17 Python
用Python画小女孩放风筝的示例
Nov 23 Python
Win系统PyQt5安装和使用教程
Dec 25 Python
Python工程师必考的6个经典面试题
Jun 28 Python
Python天气语音播报小助手
用python基于appium模块开发一个自动收取能量的小助手
Python实现打乒乓小游戏
Python 类,对象,数据分类,函数参数传递详解
Sep 25 #Python
Python实现简单的俄罗斯方块游戏
Python实现滑雪小游戏
利用python实时刷新基金估值(摸鱼小工具)
Sep 15 #Python
You might like
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
用PHP获取Google AJAX Search API 数据的代码
2010/03/12 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
JavaScript无阻塞加载和defer、async详解
2017/02/26 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
node中的session的具体使用
2018/09/14 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
python利用拉链法实现字典方法示例
2017/03/25 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
python中reader的next用法
2018/07/24 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
大学毕业生通用求职信
2013/09/28 职场文书
中职应届生会计求职信
2013/10/23 职场文书
通信工程毕业生自荐信
2013/11/01 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
给学校的建议书400字
2015/09/14 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
vue实现移动端div拖动效果
2022/03/03 Vue.js
配置nginx负载均衡
2022/05/06 Servers