django中如何实现websocket,真正通过websocket实现群聊功能

django中如何实现websocket

安装

pip3 install channles==2.3
1 解释器版本建议使用python3.6

2 channles模块版本建议使用2.3

基本配置

配置文件中注册app

配置文件中定义配置

对应应用下新建py文件并且在文件内部定义变量

完成上述配置以后,django就会既支持http又支持websocket

django,pycharm创建的django项目会自动帮你创建全局的templates文件夹,

也可以在每一个应用下创建templates模板文件夹
如果出现多个应用和全局都有模板文件夹的情况,会优先查找全局,如果全局没有,会按照配置文件中注册的app的顺序从上往下依次进行查找每一个应用下的templates
每一个应用都可以有自己的urls.py,views.py和templates,static

配置完成以后同时支持http与websocket的原因(源码解析)

class ProtocolTypeRouter:
    """
    Takes a mapping of protocol type names to other Application instances,
    and dispatches to the right one based on protocol name (or raises an error)
    """
    def __init__(self, application_mapping):
        self.application_mapping = application_mapping
        if "http" not in self.application_mapping:
            self.application_mapping["http"] = AsgiHandler

配置完成以后

routing.py

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

application = ProtocolTypeRouter({
    'websocket':URLRouter([
        # websocket相关的路由
        url(r'^chat/',consumers.ChatConsumer)
    ])
})

consumers.py

from channels.generic.websocket import WebsocketConsumer


class ChatConsumer(WebsocketConsumer):
    def websocket_connect(self, message):
        """客户端请求建立链接时 自动触发"""
        pass


    def websocket_receive(self, message):
        """客户端发送数据过来  自动触发"""
        pass


    def websocket_disconnect(self, message):
        """客户端断开链接之后  自动触发"""
        pass
"""
http协议
	index路径		index视图函数
	访问:浏览器窗口直接输入的地址的

websocket协议
	chat路径		ChatConsumer视图类
	访问:new WebSocket对象访问
"""

真正通过websocket实现群聊功能:

通过自己维护一个列表存储链接对象的方式完成了简易版本的群聊,其实还可以用channels提供的模块,channel-layers

# 后端 三个方法
from channels.generic.websocket import WebsocketConsumer
from channels.exceptions import StopConsumer

consumer_object_list = []


class ChatConsumer(WebsocketConsumer):
    def websocket_connect(self, message):
        # 客户端请求链接时 自动触发
        print('请求链接')
        self.accept()
        # 建立链接 并且自动帮你维护每一个客户端
        # 将链接在列表中存储一份
        consumer_object_list.append(self)

    def websocket_receive(self, message):
        # 客户端发送数据过来 自动触发
        print(message)
        text = message.get('text')
        # # 给客户端发送消息 单独发送
        # self.send(text_data=text)

        # 给所有的链接对象发送数据
        for obj in consumer_object_list:
            obj.send(text_data=text)

    def websocket_disconnect(self, message):
        # 客户端断开链接之后 自动触发
        print('断开链接')
        # 客户端断开之后,应该将当前对象移除
        consumer_object_list.remove(self)
        raise StopConsumer()

# 前端四个方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h1>聊天室</h1>
<input type="text" id="txt">
<button onclick="sendMsg()">发送</button>

<h1>聊天记录</h1>
<div class="record"></div>
<script>
    var ws = new WebSocket('ws://127.0.0.1:8000/chat/');
    // 1 握手环节验证成功后自动触发 onopen
    ws.onopen = function () {
        console.log('握手成功!')
    };
    // 2 给服务端发送消息 人为触发 send
    function sendMsg() {
        ws.send($('#txt').val())
    }
    // 3 服务端一旦有了消息 自动触发 onmessage
    ws.onmessage = function (args) {
        // 获取发送的数据
        // 创建p标签
        var pEle = $('<p>');
        pEle.text(args.data);
        $('.record').append(pEle)
    };
    // 4 断开链接之后 自动触发 onclose
    ws.onclose = function () {
        ws.close()
    }
</script>
</body>
</html>

posted @ 2020-04-14 21:13  godlover  阅读(3266)  评论(0编辑  收藏  举报