Tengo una página web con dos listas desordenadas separadas. Después de conectarme a un websocket, cuando envío dos mensajes diferentes, los datos en vivo que recibo de los mensajes solo completan la primera lista, debido al evento onmessage. Me gustaría que los datos del mensaje 1 llenen la lista 1 y los datos del mensaje 2 para llenar la lista 2 simultáneamente.
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>Tienes que sacar la función onmessage de la función sendMessage . Porque cada vez que haces ws.onmessage = functions () {} sobrescribes la función.
Como señaló el jugador del ultimátum, cuando haces eso, sobrescribes el controlador. Para agregar varios oyentes en diferentes lugares, necesita algún otro método:
Puede agregar un detector de eventos
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)Incluso puede especificar algunas opciones potencialmente útiles
Sin relación con la pregunta, debe envolver la funcionalidad duplicada en su propia función, esto le ahorrará tiempo: si cambia algo en una función, debe cambiarlo en la otra, esto será un dolor de cabeza y una fuente de errores molestos.
Además, su código no hace lo que cree que hará, necesita analizarlo de alguna manera y llamar a la función apropiada. Por ejemplo:
const message = {id: 'messages2', data: input.value}ws.addEventListener('message', event =>{}) 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) };