websocket 利用json 传递多个参数

最新推荐文章于 2024-08-31 13:07:46 发布

听雪声的春天

最新推荐文章于 2024-08-31 13:07:46 发布

阅读量3.1w

点赞数 2

本文链接：https://blog.youkuaiyun.com/grs294845170/article/details/76619285

版权

python 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用WebSocket实现实时数据更新的方法。通过前端JavaScript与后端Python的配合，实现了动态信息的实时获取与展示。前端通过WebSocket连接到服务器，接收并解析传来的数据；后端则定时发送更新的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目前情况是页面加载完后要从后台获取多个信息,而信息是动态的,这要求我们前端也要动态的显示,查了很多资料,利用websocket终于解决了.其实主要注意一点,websocket的参数是以二进制来传递的,在编写代码时注意编码与解码,就行了.

JS代码:

$(document).ready(function () {
    if (window.s) {
            window.s.close()
        }
    var socket = new WebSocket("ws://" + window.location.host + "/echo_once");
    socket.onopen = function () {
            console.log('WebSocket open');//成功连接上Websocket
        };
        socket.onmessage = function (e) {
            var callback = $.parseJSON(e.data);
            console.log('message: ' + callback.wait_chec);//打印出服务端返回过来的数据
            $('#messagecontainer').text(callback.wait_chec);
            $('#messagecontain').text(callback.all_data);
            $('#messageconta').text(callback.bad_data);
            $('#messagecon').text(callback.wait_bad_data);
        };
        // Call onopen directly if socket is already open
        if (socket.readyState == WebSocket.OPEN) socket.onopen();
        window.s = socket;
});

后端代码:

@accept_websocket
def echo_once(request):
    if not request.is_websocket():  # 判断是不是websocket连接
        try:  # 如果是普通的http方法
            message = request.GET['message']
            return HttpResponse(message)
        except:
            return render(request, 'index.html')
    else:
        while True:
            all_data = 0
            wait_chec = 0
            bad_data = 0
            wait_check_num = 0 
            res = {'wait_chec': str(wait_chec), 'all_data': str(all_data), 'bad_data': str(bad_data), 'wait_bad_data': str(wait_check_num)}
            result = json.dumps(res).encode()
            request.websocket.send(result)

最后配置好路由就行了.