62. Django 2.1.7 通过dwebsocket实现websocket
Posted 海洋的渔夫
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了62. Django 2.1.7 通过dwebsocket实现websocket相关的知识,希望对你有一定的参考价值。
dwebsocket 相关网站
-
https://pypi.org/project/dwebsocket/0.4.2/ -
https://github.com/duanhongyi/dwebsocket
安装dwebsocket
pip3 install dwebsocket
目前我下载的是最新版本 0.5.11,所以指定版本安装也可以,如下:
pip3 install dwebsocket==0.5.11
使用说明
上面已经安装好了dwebsocket
库,那么如何使用呢?使用的方法有两种情况,如下:
-
第一种则是利用修饰器的方式单独对某个视图进行增加websocket功能 -
另一种则是在配置文件中设置中间件,配置所有视图都可以接收使用websocket功能。
相关方法函数说明
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功能
-
在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))
-
测试一下功能
通过Chrome浏览器的F12,选中Network中的WS就可以看到Websocket的交互数据的了。
以上是关于62. Django 2.1.7 通过dwebsocket实现websocket的主要内容,如果未能解决你的问题,请参考以下文章