gpt4 book ai didi

javascript - 如何使用 Python(带有 websockets 的服务器)和 JavaScript(客户端)接收 JSON 数据

转载 作者:行者123 更新时间:2023-11-30 14:30:10 30 4
gpt4 key购买 nike

我有一个关于从作为服务器的 Python 接收 JSON 数据的新手问题。我需要告诉你,服务器是基于 WebSockets 的,我成功地将 JSON 数据从 Python 发送到 JavaScript,但我找不到任何来源如何处理这些数据来解析它并在不同的 div 中显示它,比如值first_nameid="message-1" div , second_namemessage2 div等等 你能帮我弄清楚吗?这是我的 firefox 返回的代码和图片:Web page .

我差点忘了提到我正在将 localhost 与 xampp 或 ngrok 一起使用“托管”我的客户端。此外,还有一个连接,因为我在网站和 python 控制台中接收日志

提前致谢:)

这是python代码:

import asyncio
import websockets
import json


async def time(websocket, path):
while True:
d = {'first_name': 'Guido',
'second_name': 'Rossum',
'titles': ['BDFL', 'Developer'],
}
parsed = json.dumps(d)
name = "Jeremy"
# now = datetime.datetime.utcnow().isoformat() + 'Z'
for i in range(1):
await websocket.send(parsed)
response = await websocket.recv()
print(response)
start_server = websockets.serve(time, '127.0.0.1', 4040)


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

这是 HTML/JS 代码

<body>
<div id="message-1"></div>
<div id="message-2"></div>
<div id="message-3"></div>
<script>
var ws = new WebSocket("ws://127.0.0.1:4040/");
ws.onopen = function () {
ws.send('Hello, Server!!');
//send a message to server once ws is opened.
console.log("It's working onopen log / awake");
};
ws.onmessage = function (event) {
if (typeof event.data === "string") {
// If the server has sent text data, then display it.
console.log("On message is working on log with onmessage :)");
var label = document.getElementById("message-1");
label.innerHTML = event.data;
}
};
ws.onerror = function (error) {
console.log('Error Logged: ' + error); //log errors
};
</script>
</body>

最佳答案

你需要解析收到的消息并附加到dom中!

ws.onmessage = function (event) {
try {
var obj = JSON.parse(event.data);
document.getElementById("message-1").innerHTML = obj.first_name;
document.getElementById("message-2").innerHTML = obj.second_name;
document.getElementById("message-3").innerHTML = obj.titles.join(" ");
} catch {
console.log("Object is not received, Message is:: ", event.data);
}
}

如果这不起作用,请检查您发送的 json 格式!

Remember JSON Needs to be valid json, Replace ' (single-quote) with " (double-quote):

d = {
"first_name": "Guido",
"second_name": "Rossum",
"titles": ["BDFL", "Developer"]
}

关于javascript - 如何使用 Python(带有 websockets 的服务器)和 JavaScript(客户端)接收 JSON 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51323651/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com