javascript - 从烧瓶服务器发送到客户端 JavaScript 不发送到发送者

Question

我正在尝试从 HTML 表单输入中获取文本，然后使用 JavaScript 和 Socket 将其发送到服务器端，即 python 烧瓶，然后将其发送给每个人，并使用包含此文本的 <P> 标记为每个人更新页面。

它适用于除发件人之外的所有客户端，所有以前的 <p> 标记都因不明原因而被删除。

烧瓶代码：

@socketio.on("submit channel")
def channel(data):
    ch = data["ch"]
    channels.append(ch)
    emit("channel", {"ch": ch}, broadcast=True)

JavaScript 代码：

document.addEventListener('DOMContentLoaded', () => {
    var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);
    socket.on('connect', () => {
        document.querySelector('#channel').onsubmit = () => {
            const ch = document.querySelector('#ch').value;
            socket.emit('submit channel', {'ch': ch});
        };
    });
    socket.on('channel', data => {

        const p = document.createElement('p');
        p.innerHTML = data.ch;
        document.querySelector('#channels').append(p);

    });
});

HTML 代码：

{% extends "layout.html" %}

{% block head %}
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
<script src="{{ url_for('static', filename='index.js') }}"></script>
{% endblock %}

{% block title %}
messages
{% endblock %}

{% block body %}
<div id="channels">
</div>
<hr>
<form id="channel">
    <input type="text" placeholder="Channel Name" id="ch">
    <input type="submit">
</form>
{% endblock %}

在此处输入图像描述

在此处输入图像描述

标签： javascriptpythonhtmlflasksocket.io