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 解析XML python模块xml.dom解析xml实例代码
Feb 07 Python
python中正则表达式的使用详解
Oct 17 Python
使用Python对IP进行转换的一些操作技巧小结
Nov 09 Python
深度定制Python的Flask框架开发环境的一些技巧总结
Jul 12 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
Jul 24 Python
目前最全的python的就业方向
Jun 05 Python
python3解析库pyquery的深入讲解
Jun 26 Python
WxPython建立批量录入框窗口
Feb 27 Python
Python内存管理实例分析
Jul 10 Python
Python3实现个位数字和十位数字对调, 其乘积不变
May 03 Python
pytorch中的weight-initilzation用法
Jun 24 Python
Python Selenium操作Cookie的实例方法
Feb 28 Python
Python天气语音播报小助手
用python基于appium模块开发一个自动收取能量的小助手
Python实现打乒乓小游戏
Python 类,对象,数据分类,函数参数传递详解
Sep 25 #Python
Python实现简单的俄罗斯方块游戏
Python实现滑雪小游戏
利用python实时刷新基金估值(摸鱼小工具)
Sep 15 #Python
You might like
PHP新手上路(四)
2006/10/09 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
php查询whois信息的方法
2015/06/08 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
js实现文字截断功能
2016/09/14 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
儿童学习python的一些小技巧
2018/05/27 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
有个性的自我评价范文
2013/11/15 职场文书
运动会入场词100字
2014/02/06 职场文书
12月红领巾广播稿
2014/02/13 职场文书
纠纷协议书
2014/04/16 职场文书
三年级小学生评语
2014/04/22 职场文书
大学生励志演讲稿
2014/04/25 职场文书
复活读书笔记
2015/06/29 职场文书