javascript - Flask-socketio 无法发送即时消息

Question

我正在尝试使用flask-socketio制作一个带有房间的基本聊天应用程序，但是每当我在浏览器上运行代码时，控制台上就会出现一个奇怪的错误，我无法通过网络套接字发送任何消息。出现的错误是：

channel.js:56 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at r.<anonymous> (channel.js:56)
    at r.emit (socket.io.js:1647)
    at r.emit (socket.io.js:813)
    at r.onconnect (socket.io.js:1001)
    at r.onpacket (socket.io.js:897)
    at r.<anonymous> (socket.io.js:1512)
    at r.emit (socket.io.js:1647)
    at r.ondecoded (socket.io.js:428)
    at s.<anonymous> (socket.io.js:1512)
    at s.r.emit (socket.io.js:4389)

我的主要代码是这样的：每当用户输入消息并按下“发送”按钮时，我都会将消息发送到服务器，服务器会将其广播给该特定房间中的所有其他用户。但问题是，每当我按下“发送”按钮时，控制台都会出现上述错误，并且没有发送任何消息。

相关代码：

频道.html

<div id="chat-box" class="list-group">
    <ul id="chat">
        {%- if messages -%} 
            {%- for message in messages -%}
                {{ message[0] }} sent on {{ message[1] }} : {{ message [2] }} {{'\n'}}
            {%- endfor -%}
            {{ '----- These are old messages -----' }}{{- '\n' -}}
        {%- endif -%}
     </ul>
</div>

<div id="message-box">                
    <input id="comment" size="50" autocomplete="off" autofocus>       
    <button id="send-button" type="reset">Send</button>
</div>
<script type="text/javascript" src="../static/channel.js"></script>

频道.js

document.getElementById("send-button").addEventListener('click', {
    let timestamp = new Date;
    timestamp = timestamp.toLocaleTimeString();
    let msg = document.getElementById("comment").value;
    socket.emit('send message', msg, timestamp);
    document.getElementById("comment").value = '';
});

socket.on('announce message', data => {
    const li = document.createElement('li');
    li.innerHTML = `${data.user}`  ' sent on  ' + `${data.timestamp}` + `${data.msg}`
    document.querySelector('#chat').append(li);
});

和 application.py 文件：

@socketio.on('send message')
def send_msg(msg, timestamp):
    room = session.get('current_channel')
    channelsMessages[room].append([timestamp, session.get('username'), msg])
    emit('announce message', {'user': session.get('username'), 'timestamp': timestamp, 'msg': msg}, room=room)

但是，ul仍然是空的，即使以前的消息完美显示，我也无法理解。另外，我将服务器端的消息、频道和用户分别存储在字典和列表中。

任何帮助将不胜感激。

标签： javascripthtmlflasksocket.ioflask-socketio