Django 2.1.7 通过dwebsocket实现websocket

Devops海洋的渔夫

发布于 2019-10-10 15:31:25

2.1K0

发布于 2019-10-10 15:31:25

dwebsocket 相关网站

安装dwebsocket

pip3 install dwebsocket

目前我下载的是最新版本 0.5.11，所以指定版本安装也可以，如下：

pip3 install dwebsocket==0.5.11

使用说明

上面已经安装好了dwebsocket库，那么如何使用呢？使用的方法有两种情况，如下：

第一种则是利用修饰器的方式单独对某个视图进行增加websocket功能
另一种则是在配置文件中设置中间件，配置所有视图都可以接收使用websocket功能。

示例1 - 使用修饰器对单个视图启用websocket功能

在views.py文件中,将对应的视图函数添加装饰器

accept_websocket-—可以接受websocket请求和普通http请求
require_websocket----只接受websocket请求,拒绝普通http请求

编写测试使用的websocket服务端视图

import json
import time
from dwebsocket.decorators import accept_websocket,require_websocket

@accept_websocket
def test_websocket(request):
    if request.is_websocket(): # 如果请求是websocket请求：
        
        i = 0 # 设置发送至前端的次数
        
        while True:
            
            i += 1 # 递增次数 i 
            
            # 休眠1秒
            time.sleep(1)
            
            # 设置发送前端的数据
            messages = {
                'time':time.strftime('%Y.%m.%d %H:%M:%S',time.localtime(time.time())),
                'msg': 'send %d times!' % i,
            }
            
            # 设置发送数据为json格式
            request.websocket.send(json.dumps(messages))

设置访问视图的url地址

from .views import *

app_name = 'assetinfo' # 设置命名空间

urlpatterns = [
    # ex:/assetinfo/test_websocket
    path('test_websocket', views.test_websocket , name='test_websocket'),
]

新建websocket_client.html在templates文件夹下，编写浏览器websocket的客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/static/js/jquery-3.0.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#send_message').click(function () {
                var socket = new WebSocket("ws://" + window.location.host + "/assetinfo/test_websocket");
                socket.onopen = function () {
                    console.log('WebSocket open');//成功连接上Websocket
                    socket.send($('#message').val());//发送数据到服务端
                };
                socket.onmessage = function (e) {
                    console.log('message: ' + e.data);//打印服务端返回的数据
                    $('#messagecontainer').prepend('<p>' + e.data + '</p>');
                };
            });
        });
    </script>
</head>
<body>

    <input type="text" id="message" value="Open websocket!" />
    <button type="button" id="send_message">发送 message</button>
    <h1>Received Messages</h1>
    <div id="messagecontainer"></div>

</body>
</html>

编写websocket客户端的视图

def test_websocket_client(request):
    return render(request,'websocket_client.html')

配置websocket客户端访问的url

urlpatterns = [
    # ex:/assetinfo/test_websocket_client
    path('test_websocket_client', views.test_websocket_client , name='test_websocket_client'),
]

测试运行的效果

访问客户端：http://127.0.0.1:8000/assetinfo/test_websocket_client

可以看到，已经可以正常得不断从websocket服务端接收到一直刷新的数据。

这里已经可以通过websocket的方式，浏览器作为客户端不断接收服务端发送过来的数据，并进行刷新。

但是在这里有个很明显的缺点，就是没有办法在客户端对websocket进行停止处理，以及重新连接websocket的操作，下面来看看。

示例2 - 使用修饰器方式，增加websocket停止以及重连功能

修改websocket_client.html，增加websocket的停止以及重连js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/static/js/jquery-3.0.0.min.js"></script>
    <script type="text/javascript">
        $(function () {

            // 点击连接websocket按钮，则启动访问websocket
            $('#connect_websocket').click(function () {

                if(window.s){
                    window.s.close()
                }

                // 设置websocket的服务端url
                var s = new WebSocket("ws://" + window.location.host + "/assetinfo/test_websocket");

                // 打开连接websocket服务，连接成功则打印信息
                s.onopen = function () {
                    console.log('WebSocket open');//成功连接上Websocket
                };

                // 接收服务端发送过来的数据，在浏览器上刷新
                s.onmessage = function (e) {
                    console.log('message: ' + e.data);//打印出服务端返回过来的数据
                    $('#messagecontainer').prepend('<p>' + e.data + '</p>');
                };

                window.s = s;
            });

            // 点击发送消息按钮，则通过websocket发送数据至服务端
            $('#send_message').click(function () {
                if (!window.s) {
                    alert("Please connect server.");
                } else {
                    window.s.send($('#message').val());//通过websocket发送数据
                }
            });

            // 点击关闭websocket连接
            $('#close_websocket').click(function () {
                if (window.s) {
                    window.s.close();//关闭websocket
                    console.log('websocket is closed!');
                }
            });

        });
    </script>
</head>
<body>

    <input type="text" id="message" value="Open websocket!" />
    <button type="button" id="connect_websocket">连接websocket</button>
    <button type="button" id="send_message">发送 message</button>
    <button type="button" id="close_websocket">关闭websocket</button>
    <h1>Received Messages</h1>
    <div id="messagecontainer"></div>

</body>
</html>

修改websocket服务端视图

@accept_websocket
def test_websocket(request):

    if request.is_websocket(): # 如果请求是websocket请求：

        WebSocket = request.websocket

        i = 0 # 设置发送至前端的次数
        messages = {}

        while True:
            i += 1 # 递增次数 i
            time.sleep(1) # 休眠1秒

            # 判断是否通过websocket接收到数据
            if WebSocket.has_messages():

                # 存在Websocket客户端发送过来的消息
                client_msg = WebSocket.read().decode()
                # 设置发送前端的数据
                messages = {
                    'time': time.strftime('%Y.%m.%d %H:%M:%S', time.localtime(time.time())),
                    'server_msg': 'send %d times!' % i,
                    'client_msg': client_msg,
                }

            else:
                # 设置发送前端的数据
                messages = {
                    'time':time.strftime('%Y.%m.%d %H:%M:%S',time.localtime(time.time())),
                        'server_msg': 'send %d times!' % i,
                    }

            # 设置发送数据为json格式
            request.websocket.send(json.dumps(messages))