javascript - 如何让 2 个独立的 onmessage 事件处理程序同时运行？

Question

我有一个包含两个独立无序列表的网页。连接到 websocket 后，当我发送两条不同的消息时，我从消息中获取的实时数据仅填充第一个列表，因为 onmessage 事件。我希望消息 1 中的数据填充列表 1，消息 2 中的数据同时填充列表 2。

JavaScript

        function sendMessage1(event) {
            var input = document.getElementById("messageText1")
            ws.send(input.value)
            input.value = ''
            event.preventDefault()
            ws.onmessage = function (event) {
                var parsed = JSON.parse(event.data)
                var messages = document.getElementById('messages1')
                var message = document.createElement('li')
                var content = document.createTextNode(JSON.stringify(parsed['data']))
                message.appendChild(content)
                messages.appendChild(message)
            };
        }

        function sendMessage2(event) {
            var input = document.getElementById("messageText2")
            ws.send(input.value)
            input.value = ''
            event.preventDefault()
            ws.onmessage = function (event) {
                var parsed = JSON.parse(event.data)
                var messages = document.getElementById('messages2')
                var message = document.createElement('li')
                var content = document.createTextNode(JSON.stringify(parsed['data']))
                message.appendChild(content)
                messages.appendChild(message)
            };

HTML

<div class="flex-container">
        <div class="flex-child">
            <form action="" onsubmit="sendMessage1(event)">
                <input type="text" id="messageText1" autocomplete="off" />
                <button>Send</button>
            </form>
            <ul id='messages1'>
                <li>Enter Channel Subscription Above</li>
            </ul>
        </div>
        <div class="flex-child">
            <form action="" onsubmit="sendMessage2(event)">
                <input type="text" id="messageText2" autocomplete="off" />
                <button>Send</button>
            </form>
            <ul id='messages2'>
                <li>Enter Channel Subscription Above</li>
            </ul>
        </div>
    </div>

Answer 1

正如 ultimatum gamer 指出的那样，当您这样做时，您会覆盖处理程序。为了在不同的地方添加多个监听器，您需要一些其他方法:

您可以 add an event listener

ws.addEventListener('message', event => {
                var parsed = JSON.parse(event.data)
                var messages = document.getElementById('messages2')
                var message = document.createElement('li')
                var content = document.createTextNode(JSON.stringify(parsed['data']))
                message.appendChild(content)
                messages.appendChild(message)
            };
// You can add as many as you want!
ws.addEventListener('message', event => {
                var parsed = JSON.parse(event.data)
                var messages = document.getElementById('messages2')
                var message = document.createElement('li')
                var content = document.createTextNode(JSON.stringify(parsed['data']))
                message.appendChild(content)
                messages.appendChild(message)

You can even specify it some potentially useful options

与问题无关，你应该将重复的功能包装在它自己的函数中，这会节省你的时间:如果你在一个函数中改变了一些东西，你需要在另一个函数中改变它，这将是一个令人头疼的问题烦人的错误。

此外，您的代码并没有按照您的预期执行，您需要以某种方式解析它并调用适当的函数。例如:

1. 创建消息:const message = {id: 'messages2', data: input.value}
2. 发送消息
3. 接收消息ws.addEventListener('message', event =>{})
4. 解析消息并调用适当的函数:

event => {
    const parsed = JSON.parse(event.data)
    const message = document.createElement('li')
    const content = document.createTextNode(JSON.stringify(parsed['data']))
    message.appendChild(content)
    const messages = document.getElementById(message.id)
    messages.appendChild(message)
};