VictorZZZZ/gist:e62420e3761586a7d4e7f99ad7874cf9

## gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Web Socket</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css"
            rel="stylesheet">
</head>
<body>

<div class="ui container">

    <h1>Spring MVC 5 WebSocket</h1>

    <div class="two column grid">
        <div class="row">
                <div class="ui input">
                    <input style="width:600px;" type="text" id="connectionLine" value="ws://localhost:8080/ws?token=3e741902-1101-4dad-9e54-3ede0cd059cc">
                </div>
                <div class="row">
                <button class="ui button" onclick="connect()">Connect</button>
        </div>
        <hr/>
        </div>
        <div class="row">
            <div class="column">
                <label for="myMessage">Message</label>
            </div>

            <div class="column">
                <div class="ui input">
                    <input type="text" id="myMessage">
                </div>
            </div>
        </div>

        <div class="row">
            <div class="column">
                <label for="output">Response from Server</label>
            </div>

            <div class="column">
                <textarea rows="8" cols="50" id="output" readonly="readonly"></textarea>
            </div>
        </div>

        <div class="row">
            <button class="ui button" onclick="send()">Send</button>
        </div>

    </div>
</div>


<script>
    var socketConn;
    console.log(socketConn);

    function connect() {
        const connectionLine = document.getElementById('connectionLine');
        socketConn = new WebSocket(connectionLine.value);

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

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

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

        socketConn.onerror = function(error) {
          console.log("Ошибка " + error.message);
          console.log(error);
        };

    }

    function send() {
        const clientMsg = document.getElementById('myMessage');
        console.log("send Message "+ clientMsg.value);

        if (clientMsg.value) {
            socketConn.send(clientMsg.value);
        }
    }

    socketConn.onmessage = (e) => {

        const output = document.getElementById('output');

        output.value += `${e.data}\n`;
    }
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Test Web Socket</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css"
	rel="stylesheet">
	</head>
	<body>

	<div class="ui container">

	<h1>Spring MVC 5 WebSocket</h1>

	<div class="two column grid">
	<div class="row">
	<div class="ui input">
	<input style="width:600px;" type="text" id="connectionLine" value="ws://localhost:8080/ws?token=3e741902-1101-4dad-9e54-3ede0cd059cc">
	</div>
	<div class="row">
	<button class="ui button" onclick="connect()">Connect</button>
	</div>
	<hr/>
	</div>
	<div class="row">
	<div class="column">
	<label for="myMessage">Message</label>
	</div>

	<div class="column">
	<div class="ui input">
	<input type="text" id="myMessage">
	</div>
	</div>
	</div>

	<div class="row">
	<div class="column">
	<label for="output">Response from Server</label>
	</div>

	<div class="column">
	<textarea rows="8" cols="50" id="output" readonly="readonly"></textarea>
	</div>
	</div>

	<div class="row">
	<button class="ui button" onclick="send()">Send</button>
	</div>

	</div>
	</div>


	<script>
	var socketConn;
	console.log(socketConn);

	function connect() {
	const connectionLine = document.getElementById('connectionLine');
	socketConn = new WebSocket(connectionLine.value);

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

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

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

	socketConn.onerror = function(error) {
	console.log("Ошибка " + error.message);
	console.log(error);
	};

	}

	function send() {
	const clientMsg = document.getElementById('myMessage');
	console.log("send Message "+ clientMsg.value);

	if (clientMsg.value) {
	socketConn.send(clientMsg.value);
	}
	}

	socketConn.onmessage = (e) => {

	const output = document.getElementById('output');

	output.value += `${e.data}\n`;
	}
	</script>
	</body>
	</html>