zoukankan      html  css  js  c++  java
  • 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.效果显示

  • 相关阅读:
    sqlserver中判断表或临时表是否存在
    Delphi 简单方法搜索定位TreeView项
    hdu 2010 水仙花数
    hdu 1061 Rightmost Digit
    hdu 2041 超级楼梯
    hdu 2012 素数判定
    hdu 1425 sort
    hdu 1071 The area
    hdu 1005 Number Sequence
    hdu 1021 Fibonacci Again
  • 原文地址:https://www.cnblogs.com/chenjw-note/p/13705855.html
Copyright © 2011-2022 走看看