You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
2.8 KiB
83 lines
2.8 KiB
<html>
|
|
|
|
<head>
|
|
<title>Chat WebSocket</title>
|
|
<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('/chat2');
|
|
stompClient = Stomp.over(socket);
|
|
stompClient.connect({}, function (frame) {
|
|
setConnected(true);
|
|
console.log('Connected: ' + frame);
|
|
// stompClient.subscribe('/topic/messages', function (messageOutput) {
|
|
// showMessageOutput(JSON.parse(messageOutput.body));
|
|
// });
|
|
stompClient.subscribe('/user/queue/reply', 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 to = document.getElementById('to').value;
|
|
var text = document.getElementById('text').value;
|
|
stompClient.send("/app/chat", {},
|
|
JSON.stringify({ 'from': from, 'text': text, to: to }));
|
|
}
|
|
|
|
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>
|
|
<div>
|
|
<input type="text" id="to" placeholder="Send to User" />
|
|
</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>
|