JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<!-- форма для отправки сообщений -->
<form name="publish">
    <input type="text" name="message"/>
    <input type="submit" value="Send"/>
    <input type="button" id="connect" value="Connect"/>
</form>

<!-- здесь будут появляться входящие сообщения -->
<div id="subscribe"></div>

JavaScript

console.clear();

/*
var i = 1;
setInterval(function(){
    document.querySelector('[type="text"]').value = i++;
    document.querySelector('[name="publish"]').onsubmit()
}, 1000);
//*/

document.querySelector("#connect").onclick = function(e){
    this.setAttribute("disabled", "disabled");
    runSockets();
}

function runSockets(){
    // создать подключение
    var socket = new WebSocket("ws://edu.tutu.ru:8081");
    
    showMessage("Иницировали соединение с сервером.");
    showMessage("Создали объект socket.");

    // отправить сообщение из формы publish
    document.forms.publish.onsubmit = function() {
      var outgoingMessage = this.message.value;
      socket.send(outgoingMessage);
      return false;
    };
    
    // обработчик входящих сообщений
    socket.onmessage = function(event) {
      var incomingMessage = event.data;
      showMessage(incomingMessage); 
    };
    
    // показать сообщение в div#subscribe
    function showMessage(message) {
      var messageElem = document.createElement('div');
      messageElem.appendChild(document.createTextNode(message));
      document.getElementById('subscribe').appendChild(messageElem);
    }
}