spring-websockets/src/main/webapp/bots.html - master - NikolayIvkin/tutorials1

spring-websockets/src/main/webapp/bots.html
88 строк3 KB
Philippe Soares
Put html and js resources back to their original location.
08 ноя 2020, 19:38
08 ноя 2020, 19:386866b51
<html>
	<head>
	    <title>Chat WebSocket</title>
	    
	    <script src="resources/js/sockjs-0.3.4.js"></script>
	    <script src="resources/js/stomp.js"></script>
	    
	    <script type="text/javascript">

	        var stompClient = null;

	        function setConnected(connected) {

	            document.getElementById('connect').disabled = connected;
	            document.getElementById('disconnect').disabled = !connected;
	            document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
	            document.getElementById('response').innerHTML = '';
	        }

	        function connect() {

	            var socket = new SockJS('/chatwithbots');
	            stompClient = Stomp.over(socket);

	            stompClient.connect({}, function(frame) {

	            	setConnected(true);
	                console.log('Connected: ' + frame);
	                stompClient.subscribe('/topic/pushmessages', function(messageOutput) {

	                    showMessageOutput(JSON.parse(messageOutput.body));
	                });
	            });
	        }

	        function disconnect() {

	            if(stompClient != null) {
	                stompClient.disconnect();
	            }

	            setConnected(false);
	            console.log("Disconnected");
	        }

	        function sendMessage() {

	        	var from = document.getElementById('from').value;
	            var text = document.getElementById('text').value;
	            stompClient.send("/app/chatwithbots", {}, JSON.stringify({'from':from, 'text':text}));
	        }

	        function showMessageOutput(messageOutput) {

	            var response = document.getElementById('response');
	            var p = document.createElement('p');
	            p.style.wordWrap = 'break-word';
	            p.appendChild(document.createTextNode(messageOutput.from + ": " + messageOutput.text + " (" + messageOutput.time + ")"));
	            response.appendChild(p);
	        }

	    </script>
	    
	</head>
	
	<body onload="disconnect()">

		<div>
		
		
			<div>
				<input type="text" id="from" placeholder="Choose a nickname"/>
			</div>
			<br />
		    <div>
		        <button id="connect" onclick="connect();">Connect</button>
		        <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
		    </div>
		    <br />
		    <div id="conversationDiv">
		        <input type="text" id="text" placeholder="Write a message..."/>
		        <button id="sendMessage" onclick="sendMessage();">Send</button>
		        <p id="response"></p>
		    </div>
		</div>

	</body>
</html>