django使用dwebsocket快速实现WebSocket

1.websocket说明:

WebSocket是一种在单个TCP连接上进行全双工通信的协议

WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

2.安装dwebsocket

pip3 install dwebsocket

3.修改django项目setting配置文件

INSTALLED_APPS = [
    ...
    ...
    ...
    'dwebsocket',
]
WEBSOCKET_ACCEPT_ALL=True   # 可以允许每一个单独的视图使用websockets

4.编写views视图代码

from django.shortcuts import render
from dwebsocket.decorators import accept_websocket

def index(request):
    return render(request,"index.html")

@accept_websocket
def get_user_list(request):
    if request.is_websocket():
        message = request.websocket.wait()  #接收客户端发来的信息,没有收到信息则会导致阻塞
        count = 0
        while True:
            if message:
                count += 1
                request.websocket.send(str(count))  #发送内容必须为str
                time.sleep(2)

【注释】

dwebsocket有两种装饰器:require_websocket和accept_websocekt,使用require_websocket装饰器会导致视图函数无法接收导致正常的http请求,一般情况使用accept_websocket方式就可以了,

dwebsocket的一些内置方法:
request.is_websocket():判断请求是否是websocket方式,是返回true,否则返回false
request.websocket: 当请求为websocket的时候,会在request中增加一个websocket属性,
WebSocket.wait() 返回客户端发送的一条消息,没有收到消息则会导致阻塞
WebSocket.read() 和wait一样可以接受返回的消息,只是这种是非阻塞的,没有消息返回None
WebSocket.count_messages()返回消息的数量
WebSocket.has_messages()返回是否有新的消息过来
WebSocket.send(message)像客户端发送消息,message为byte类型

5.编写url代码

from django.urls import path
from course import views as course_views

urlpatterns = [
    path('index/', course_views.index),
    path('get_user_list/', course_views.get_user_list),
]

6.编写前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>quick websocket</title>
</head>
<body>
    <div class="col-md-offset-1" style="display: inline-block;line-height: 48px;color:orange">
        当前在线人数: <span id="online_number">0</span>
    </div>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script>
            // 实时获取当前在线用户人数
            var socket = new WebSocket("ws:" + window.location.host + "/get_user_list/");
            socket.onopen = function () {
                console.log('WebSocket open');//成功连接上Websocket
                socket.send('adasdasda。。。。');//发送数据到服务端
            };
            socket.onmessage = function (e) {
                $('#online_number').text(e.data)
            };
            socket.onclose=function(e){
              console.log(e);
              socket.close(); //关闭TCP连接
            };
            if (socket.readyState == WebSocket.OPEN) socket.onopen();
    </script>
</body>
</html>

7.效果显示

原文地址:https://www.cnblogs.com/chenjw-note/p/13705855.html