[网络协议] WebSocket实现动态可视化（一）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 网络协议 -> WebSocket实现动态可视化（一） -> 正文阅读

[网络协议]WebSocket实现动态可视化（一）

WebSocket实现动态可视化（一）

实现思路：
服务端向客户端发送数据，客户端接收数据保存为数组，并赋值到echart对应的data值
以下是服务端用websocket向客户端发送数据

服务端

import asyncio
import time

import websockets


async def echo(websocket, path):
    for message in range(100):
        time.sleep(1)
        await websocket.send(str(message))


asyncio.get_event_loop().run_until_complete(websockets.serve(echo, 'localhost', 8765))
asyncio.get_event_loop().run_forever()

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>消息接收</title>
</head>
<body>
    <div id="msg"></div>
<script>
    window.onload = function () {
        //先判断浏览器是否支持websocket
        if ("WebSocket" in window) {
            //alert("您的浏览器支持 WebSocket!");
            // 打开一个 web socket
            ws = new WebSocket("ws://127.0.0.1:8765/");
            ws.onopen = function () {
                // Web Socket 已连接上，使用 send() 方法尝试发送数据
                //ws.send("test");
                alert('连接成功')
            };
            //监听服务端是否有消息发送过来，当有消息时执行方法
            ws.onmessage = function (evt) {
                //获取服务器发来的消息
                var received_msg = evt.data;
                //显示消息
                //alert("收到消息："+received_msg)
                document.getElementById('msg').innerText = received_msg
            };
            //关闭页面或其他行为导致与服务器断开链接是执行
            ws.onclose = function () {
                // 关闭 websocket
                alert("连接已关闭...");
            };
        } else {
            // 浏览器不支持 WebSocket
            alert("您的浏览器不支持 WebSocket!");
        }
    }
</script>
</body>
</html>