Question

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

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)

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

相关代码：

channel.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>

channel.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仍然为空，即使先前的消息显示得很完美，我也无法理解如何。另外，我将消息，通道和用户分别存储在服务器端的字典和列表中。

任何帮助将不胜感激。

Flask-socketio无法发送即时消息

0 个答案: