如何使用 Python（带有 websockets 的服务器）和 JavaScript（客户端）接收 JSON 数据
Posted
技术标签:
【中文标题】如何使用 Python（带有 websockets 的服务器）和 JavaScript（客户端）接收 JSON 数据【英文标题】：How to receive JSON data with Python (server with websockets) and JavaScript (client-side) 【发布时间】：2018-07-13 11:02:47 【问题描述】：我有一个新手问题，即从作为服务器的 Python 接收 JSON 数据。我需要告诉你服务器是基于 WebSockets 的，我正在成功地将 JSON 数据从 Python 发送到 javascript，但是我找不到任何来源如何处理这些数据来解析它并在不同的 div 中显示它，比如 value first_name 在id="message-1" div，second_name 在message2 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>
【问题讨论】：
对象从哪里来？是event.data 吗？ event.data 总是字符串对吗？
我添加了一个可能的解决方案，如果可行，请告诉我！
【参考方案1】：
您需要解析收到的消息并将其附加到 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 格式！
记住 JSON 必须是有效的 json，将
'（单引号）替换为"（双引号）：
d =
"first_name": "Guido",
"second_name": "Rossum",
"titles": ["BDFL", "Developer"]
【讨论】：
以上是关于如何使用 Python（带有 websockets 的服务器）和 JavaScript（客户端）接收 JSON 数据的主要内容，如果未能解决你的问题，请参考以下文章
如何使用带有 cookie 的 React Native 的 WebSocket
带有异步计时器的 Python 异步 websocket 客户端
您如何使用带有 Photon 实时 Javascript SDK 的安全 websocket？