dwebsocket基本使用 结语

发表于

这是我参与11月更文挑战的第30天，活动详情查看：2021最后一次更文挑战

目的：实现websocket请求，客户端和服务端实现双工通信（客户端与服务端通过websocket连接成功后，可以双向地主动发消息）

  • 与django推荐的channel不同,dwebsocket使用更加方便简单
  • channels依赖于redis，twisted等，相比之下使用dwebsocket要更为方便一些

WebSocket的工作流程是这 样的：浏览器通过JavaScript向服务端发出建立WebSocket连接的请求，在WebSocket连接建立成功后，客户端和服务端就可以通过 TCP连接传输数据。因为WebSocket连接本质上是TCP连接，不需要每次传输都带上重复的头部数据，所以它的数据传输量比轮询和Comet技术小了很多.

dwebsocket 相关网站

安装dwebsocket

1
undefined复制代码pip3 install dwebsocket

注册APP

注册之后才能使用dwebsocket

1
2
3
4
5
python复制代码INSTALLED_APPS = [
    .....
    .....
    'dwebsocket',
]

使用

使用的方法有两种情况，如下：

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

第一种：全局配置

在django项目的配置文件的中间件中配置，这种情况下需要每一个视图函数都使用websocket通信，否则报错。

1
2
3
4
5
6
7
python复制代码MIDDLEWARE_CLASSES = [
    ......
    ......
    'dwebsocket.middleware.WebSocketMiddleware'  # 为所有的URL提供websocket，如果只是单独的视图需要可以不选
 
]
WEBSOCKET_ACCEPT_ALL=True   # 可以允许每一个单独的视图实用websockets

第二种：装饰器单一视图使用

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

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

如果使用了require_websocket，但使用了普通http请求，则出现Bad Request的报错信息

补充相关方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
python复制代码相关方法函数说明
1.request.is_websocket()
如果是个websocket请求返回True，如果是个普通的http请求返回False,可以用这个方法区分它们。

2.request.websocket
在一个websocket请求建立之后，这个请求将会有一个websocket属性，用来给客户端提供一个简单的api通讯，如果request.is_websocket()是False，这个属性将是None。

3.WebSocket.wait()
返回一个客户端发送的信息，在客户端关闭连接之前他不会返回任何值，这种情况下，方法将返回None

4.WebSocket.read()
如果没有从客户端接收到新的消息，read方法会返回一个新的消息，如果没有，就不返回。这是一个替代wait的非阻塞方法

5.WebSocket.count_messages()
返回消息队列数量

6.WebSocket.has_messages()
如果有新消息返回True，否则返回False

7.WebSocket.send(message)
向客户端发送消息

8.WebSocket.__iter__()
websocket迭代器

案例演示1

视图函数使用装饰器的方式，浏览器客户端与服务端使用websocket通信，增加websocket停止以及重连功能

views.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
python复制代码from django.shortcuts import render
from dwebsocket import accept_websocket, require_websocket
import time, json


@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))
    else:
        return render(request, 'test_websocket.html')

test_websocket.html

【坑】：注意发送ws请求时，url后面加上”/“

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
python复制代码<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 点击连接websocket按钮，则启动访问websocket
            $('#connect_websocket').click(function () {
                // 点击连接websocket按钮，则启动访问websocket
                $('#connect_websocket').click(function () {

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

                    // 设置websocket的服务端url
                    var s = new WebSocket("ws://" + window.location.host + "/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>

urls.py

1
2
3
4
5
6
7
python复制代码from django.conf.urls import url

from app01 import views

urlpatterns = [  
    url(r'^test_websocket/', views2.test_websocket),
]

演示2：websocket连接成功后，服务端主动发消息

views.py

修改上述视图文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
python复制代码from django.shortcuts import render
from dwebsocket import accept_websocket, require_websocket
import time, json


@accept_websocket
def test_websocket(request):
    if request.is_websocket(): # 如果请求是websocket请求：
        WebSocket = request.websocket
       
        time.sleep(3)	# 建立websocket连接3s后发一个推送消息
        messages = {'name': 'jack'}
       	WebSocket.send(json.dumps(messages))

    else:
        return render(request, 'app02-login.html')

dwebsocket的坑

背景：客户端无法自动断开websocket链接，导致django无法处理上一次遗留的websocket客户端从而引起的报错。

方法：调用window.beforunload，在浏览器

1
2
3
4
javascript复制代码    window.onbeforeunload = function () {
        ws.close()
        console.log(1);//在刷新页面或者关闭页面需要断开websocket
    };

刷新，或者关闭页面的时候，自动关闭websocket链接

结语

文章首发于微信公众号程序媛小庄，同步于掘金。

码字不易，转载请说明出处，走过路过的小伙伴们伸出可爱的小指头点个赞再走吧(╹▽╹)

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%