通过 Websocket 用 Python 控制 Javascript/CSS 元素?

Posted

技术标签:

【中文标题】通过 Websocket 用 Python 控制 Javascript/CSS 元素?【英文标题】:Control Javascript/CSS elements with Python via Websocket? 【发布时间】:2020-06-14 00:04:56 【问题描述】:

我正在尝试通过以下 python 代码控制字体大小属性。我已经通过 Websocket 发送了数据,Python 和 JS 似乎工作得很好。我现在只是试图使用该数据来控制字体大小 JS/CSS 属性,但是我没有运气。以下是我的代码尝试。我做错了什么?

提前致谢! :)

function WebSocketTest() 

            if ("WebSocket" in window) 
               alert("WebSocket is supported by your Browser!");

               // Let us open a web socket
               var ws = new WebSocket("ws://localhost:8768/echo");

               ws.onopen = function() 

                  // Web Socket is connected, send data using send()
                  ws.send("Message to send");
                  alert("Message is sent...");
               ;

               ws.onmessage = function (evt) 
                  var received_msg = evt.data;
                  document.querySelector("h1").style.fontSize = evt.data;



               ;

               ws.onclose = function() 

                  // websocket is closed.

               ;
             else 

               // The browser doesn't support WebSocket
               alert("WebSocket NOT supported by your Browser!");
            
         
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on June 3, 2020 */

@font-face 
    font-family: 'spartanthin';
    src: url('fonts/SpartanUnconv/Spartan-VariableFont_wght.ttf');
    font-weight: 100 900;
    font-style: normal;







h1 

margin-bottom: 10px;
font-family: 'spartanthin';
font-weight: var(--font-weight);
font-size: 15px;
text-align: left;
position: relative;


<html>
<body>

<h1>Heading</h1>

<p>A Black Fox Jumped Over A Fence</p>

</body>
</html>

Python:

import asyncio
    import websockets

    async def echo(websocket, path):
        async for message in websocket:
            await websocket.send(str(900)) #FontSize Value

    start_server = websockets.serve(echo, "localhost", 8778)

    asyncio.get_event_loop().run_until_complete(start_server)
    asyncio.get_event_loop().run_forever()

【问题讨论】:

【参考方案1】:

async for message in websocket: 表示您的服务器只响应来自客户端的消息,而您的客户端不发送任何消息。

这样试试

import asyncio
import websockets

async def echo(websocket, path):
    await websocket.send(str(900)) #FontSize Value

start_server = websockets.serve(echo, "localhost", 8778)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

另外,将 JS 部分 WebSocket("ws://localhost:8768/echo"); 更改为 WebSocket("ws://localhost:8778");(因此它与您的服务器相对应)。 而且我不确定您是否正在调用该 js 函数,因此如果您在任何地方都没有 WebSocketTest();,请将其放在 html 中的脚本标记中,或者在 WebSocketTest 函数定义之后直接放置到 js 文件中。

【讨论】:

以上是关于通过 Websocket 用 Python 控制 Javascript/CSS 元素?的主要内容,如果未能解决你的问题,请参考以下文章

通过 websocket 接收图片

在 Python FastAPI 中使用 websocket 并行发送/接收

通过 Websocket 控制器打印从 Stomp 传入的 json 数组

Pywss - 用python实现WebSocket服务端

Joe 的 Erlang websocket 示例的 Python 示例

python 写一个类似于top的监控脚本