如何使用 JSON 通过 websockets 发送 Django 数据？答案

【问题标题】：How can I use JSON to send Django data over websockets?如何使用 JSON 通过 websockets 发送 Django 数据？
【发布时间】：2020-06-30 19:30:47
【问题描述】：

我正在开发一个通过 websockets 发送数据的 django 应用程序

我将数据放入一个 java 对象中，该对象转换为 JSON，然后在另一端进行解析

我的代码是

chatSocket.onmessage = function(e) {
    console.log(e)
    const data = JSON.parse(e.data);
};

document.querySelector('#chat-message-submit').onclick = function(e) {
    const messageInputDom = document.querySelector('#chat-message-input');
    const message = messageInputDom.value;
    var messageObject = {
        'username': username,
        'message': message,
        'test': 'abc',
        }
    console.log(messageObject)
    chatSocket.send(JSON.stringify(messageObject));
};

messageObject 的格式似乎很好

{username: "jeff", message: "qwerty", test: "abc"}

但是onmessage函数中的输出只显示

MessageEvent {isTrusted: true, data: "{"message": "qwerty"}", origin: "ws://192.168.1.138:8000", lastEventId: "", source: null, …}

我的其他数据去哪儿了？

【问题讨论】：

使用JSON.stringify(message)
对不起，这不起作用。 messageObject 中的其他数据呢？

标签： javascript json django

【解决方案1】：

这里的问题似乎是我使用的 django 代码要求将数据传输到一个名为 message 的变量中。这是一个典型的案例……小知识……

我熟悉 Python，但对 javascript 很陌生。因此，当我遇到问题时，我认为问题出在我的 javascript 中，并且没有进一步查找。

consumers.py

...
# Receive message from WebSocket
async def receive(self, text_data):
    text_data_json = json.loads(text_data)
    message = text_data_json['message']
...
# Receive message from room group
async def chat_message(self, event):
    message = event['message']
...

下面的代码解决了这个问题：

chatSocket.onmessage = function(e) {
    const data = JSON.parse(e.data);
    messageObject = data.message
    username = messageObject.username
    text = messageObject.text
};

document.querySelector('#chat-message-submit').onclick = function(e) {
    const messageInputDom = document.querySelector('#chat-message-input');
    const text = messageInputDom.value;
    var messageObject = {
        'message': {'username': username, 'text': text, 'test': 'abc'},
        }
    chatSocket.send(JSON.stringify(messageObject));
};

【讨论】：