django中websocket_django websocket

作者：很楠不爱3 | 2024-03-27 23:20:09

踩

django websocket

概述

websocket是什么？

WebSocket 是 HTML5 提供的一种浏览器与服务器间进行全双工通讯的协议。依靠这种协议可以实现客户端和服务器端，一次握手，双向实时通信。

本文实现功能

django的signals触发事件配合websocket向客户端推送数据库修改状态(或者是你自定义的数据)
websocket这里使用的是dwebsocket，需要手动pip install，安装完需要在配置中INSTALLED_APPS完成配置
至于提到的signals，在本文中其实并没有实际应用上，放在下一篇文章中再对signals进行讲解
需要注意的是：本文拉过去直接运行不会出现效果，需要发送消息函数和signas绑定起来触发执行才会看到效果

view.py

from dwebsocket.decorators import accept_websocket

# 存储连接websocket的用户
clients = {}

def webchat(request, username):

    return render(request, 'web.html',locals())

# 连接websocket  ws://localhost：8000/websocketLink/22
# 因为 websocket 是协议  所以不能用 http或https
@accept_websocket
def websocketLink(request, username):
    '连接websocket'

    # 获取连接
    if request.is_websocket:
        # 用户来了之后通过用户名保存到全局的字典中,(后续通过django的signals触发循环字典给前端推送消息)
        clients[username] = request.websocket


# 服务端发送消息
def send(msg):      # 需要和signals的触发函数绑定到一起
    'title：消息标题 data：消息内容，消息内容:url'
    try:
        for username, client in clients.items()[:]:     # 遍历拿到所有需要发送的客户端(取切片，因为要对for循环的字典删除)
            if client.is_closed():  # 如果已经关闭就从用户列表中删除
                clients.pop(username)
            else:
                import json
                b1 = json.dumps(msg).encode('utf-8')
                client.send(b1)
    except BaseException:
        # messageLog = MessageLog(name=username, msg_title=title, msg=data, msg_url=url, is_required=1)
        pass
    finally:
        pass
# messageLog.save()
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

前端html

<!DOCTYPE html>
<html>
<head>
    {% load static %}


    <title>django-websocket</title>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">//<![CDATA[
    $(function () {

    var websocket;
    var name= '{{username}}';
     // 首先判断是否 支持 WebSocket  name身份标识  我当前用的 用户名，
    if('WebSocket' in window) {

        websocket = new WebSocket("ws://localhost:8000/websocketLink/"+name);
    } else if('MozWebSocket' in window) {
        websocket = new MozWebSocket("ws://localhost:8000/websocketLink/"+name);
    } else {
        websocket = new SockJS("ws://localhost:8000/websocketLink/"+name);
    }

        // 打开连接时    formatMsg是我自定义的消息提示
        websocket.onopen = function(event) {
             //formatMsg("系统提示：","您已连接 ，消息提示系统！！",2000)
            alert("您已连接 ，消息提示系统！！")
        };
        //发送消息
        $('#send_message').click(function () {
            if(!websocket){
                alert("Please connect server.");
            }else{
              //websocket.send($('#message').val()); //发送字符串数据类型
                websocket.send(JSON.stringify({'title': '通知', 'data': $('#message').val(), 'url': null}));//发送json数据类型
            }
        });
    // 收到消息时
    websocket.onmessage = function(event) {
        var data =JSON.parse(event.data);
       // formatMsg(data.title,data.data,10000)
            alert(data.data)

    };
    // 错误时
    websocket.onerror = function(event) {
        console.log("  websocket.onerror  ");
    };
    // 断开连接时
    websocket.onclose = function(event) {
          //formatMsg("系统提示：","已断开服务器，无法接收消息提示（请重新刷新页面）",2000)
        alert("已断开服务器，无法接收消息提示（请重新刷新页面）")
    };
            //关闭websocket连接
        $('#close_websocket').click(function () {
            if(websocket){
                websocket.close();
            }
        });
    });
    function formatMsg(title,data,time) {
                iziToast.show({
            color: 'dark',
            icon: 'icon-contacts',
            title: title,
            message: data,
            timeout: time,

            position: 'topCenter',
            transitionIn: 'flipInX',
            transitionOut: 'flipOutX',
            progressBarColor: 'rgb(0, 255, 184)',
            image: 'img/avatar.jpg',
            imageWidth: 70,
            layout:2,
            onClose: function(){
                console.info('onClose');
            },
            iconColor: 'rgb(0, 255, 184)'
        });
}
 </script>
</head>
<body>
<br>
<input type="text" id="message" value="Hello, World!" />
<button type="button" id="send_message">发送消息</button>
<button type="button" id="close_websocket">关闭websocket</button>

</body>
</html>
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

路由

    url(r'websocketLink/(?P<username>\w+)', views.websocketLink),# webSocket 链接
    url(r'web/(?P<username>\w+)', views.webchat),
1
2

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/327522