时间戳

首页 > 解决方案 > 从 Flask 套接字检索消息引发“分配中的左侧无效”

javascript - 从 Flask 套接字检索消息引发“分配中的左侧无效”

问题描述

我正在尝试创建一个可以使用 Flask socketio 和 Javascript 加入的频道。

我所有的调试语句都在触发，表明一切都在初始化，但是当我尝试捕获从我的 Flask/socket-io 路由发出的消息时，我假设它执行了实际的房间更改，我Uncaught ReferenceError: Invalid left-hand side in assignment在控制台中引用了该行在我的 JS 文件let message = data.msg;中：

    socket.on('status', data => {
        let message = data.msg;
        document.querySelectorAll('#messages') += message;
    });

我尝试编写data.msg各种方式（例如，使用反引号，如 ${data.msg} 被反引号包围，好像是格式化字符串的一部分等），但没有任何效果。我已经阅读了文档，它们的细节很少。关于如何在网络上有效地做到这一点的例子似乎为零。大多数人似乎都喜欢 node.js，但我是一个 Flask 人。

我怎样才能加入我的房间，只在那个房间里聊天？我需要允许用户创建他们想要的任意数量。

这是Flask中的路线：

@socketio.on('join')
def on_join(data):
    username = data['username']
    room = data['room']
    join_room(room)
    emit("status", {'msg': username + 'has joined the room'}, room=room)

这是随附的JS：

var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);
if (!socket) console.log("Socket not connected!");

socket.on('connect', () => {
    console.log("socket connected");
    // after socket connect, configure channel button
    document.querySelectorAll('button').forEach(button => {
        button.onclick = () => {
            console.log("button click fired!");
            let username = localStorage["login"]
            let room = button.dataset.room;
            console.log("ChannelName" + room);
            socket.emit("join", {'username':username, "room":room});
        };
    });

    socket.on('status', data => {
        console.log("JOINED!")
        let message = data.msg;
        document.querySelectorAll('#messages') += message;
    });

请注意，错误发生在分配给#messagediv 之前。

编辑 解包错误揭示了对缩小的 JS 文件烧瓶 socket-io 所需的多个引用。它<head>位于layout.html. 放置<body>造成的严重错误阻碍了所有与套接字相关的功能的开发。

messages:134 Uncaught ReferenceError: Invalid left-hand side in assignment
    at r.socket.on.data (messages:134)
    at r.n.emit (socket.io.min.js:1)
    at r.onevent (socket.io.min.js:1)
    at r.onpacket (socket.io.min.js:1)
    at n.<anonymous> (socket.io.min.js:1)
    at n.emit (socket.io.min.js:1)
    at n.ondecoded (socket.io.min.js:1)
    at s.<anonymous> (socket.io.min.js:1)
    at s.n.emit (socket.io.min.js:1)
    at s.add (socket.io.min.js:2)

标签： javascriptsocket.ioflask-socketio

解决方案

这是无效的：document.querySelectorAll('#messages') += message;

document.querySelectorAll('#messages')会给你一个 DOM 元素的列表。

此外，元素 id 应该是唯一的，因此您可能应该使用document.querySelector('#messages')so 只检索一个元素，而不是一个列表。

您不能以这种方式直接将文本添加/连接到元素。您可能正在寻找类似的东西document.querySelector('#messages').innerHTML += message;

推荐阅读