Untitled

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<h1>Hi</h1>
<button id="open">Подключиться</button>
<p>Данные:</p>
<div id="data"></div>

<script>
    const addData = (text)=>{
        var block = document.getElementById("data");
        var p=document.createElement("p");
        p.innerHTML=text;
        block.appendChild(p);
    }
    const connect = ()=>{
        var socket = new WebSocket("ws://localhost:8787");

        socket.onopen = function() {
            addData("Соединение установлено.");
        };

        socket.onclose = function(event) {
            if (event.wasClean) {
                addData('Соединение закрыто чисто');
            } else {
                addData('Обрыв соединения'); // например, "убит" процесс сервера
            }
            addData('Код: ' + event.code + ' причина: ' + event.reason);
        };

        socket.onmessage = function(event) {
            addData("Получены данные " + event.data);
        };

        socket.onerror = function(error) {
            addData("Ошибка " + error.message);
        };
    }

    var button = document.getElementById("open");
    button.onclick = connect;
</script>
</body>
</html>