221 lines
9.0 KiB
HTML
221 lines
9.0 KiB
HTML
<html>
|
|
<head>
|
|
<title>WebSocket Chat</title>
|
|
<script src="http://localhost:8080/sockjs.js"></script>
|
|
<script src="http://localhost:8080/stomp.js"></script>
|
|
<script type="text/javascript">
|
|
|
|
var sock, stompClient, currentUser, subscriptions = {};
|
|
|
|
function connect() {
|
|
var userValue = document.getElementById('user');
|
|
if (userValue.value != "") {
|
|
currentUser = userValue.value;
|
|
sock = new SockJS('http://localhost:8080/chat');
|
|
sock.onheartbeat = function() {
|
|
console.log('heartbeat');
|
|
};
|
|
stompClient = Stomp.over(sock);
|
|
stompClient.connect({login: currentUser}, function (frame) {
|
|
document.getElementById("welcome").style.display = "none";
|
|
document.getElementById("chat").style.display = "";
|
|
document.getElementById("currentUser").innerHTML = currentUser;
|
|
userValue.value = "";
|
|
});
|
|
}
|
|
}
|
|
|
|
function subscribeToRoom(room) {
|
|
subscriptions[room] =
|
|
stompClient.subscribe('room' + room, function (message) {
|
|
var m = JSON.parse(message.body);
|
|
var tr = document.createElement('tr');
|
|
tr.innerHTML = "<td width='100'><div class='messageUser'>" +
|
|
m.user +
|
|
"</div><div class='messageDate'>" +
|
|
new Date(m.date).toLocaleTimeString(navigator.userLanguage,
|
|
{month: "short", day: "numeric", hour: "2-digit", minute: "2-digit"}) +
|
|
"</div></td><td>" +
|
|
m.message +
|
|
"</td>";
|
|
var messages = document.getElementById("messages" + room);
|
|
messages.appendChild(tr);
|
|
messages.scrollIntoView(false);
|
|
});
|
|
document.getElementById("join" + room).style.display = "none";
|
|
document.getElementById("leave" + room).style.display = "";
|
|
document.getElementById("message" + room).disabled = false;
|
|
document.getElementById("send" + room).disabled = false;
|
|
}
|
|
|
|
function sendMessage(room) {
|
|
var messageValue = document.getElementById("message" + room);
|
|
if (messageValue.value != "") {
|
|
stompClient.send('room' + room, {subscription: subscriptions[room].id}, messageValue.value);
|
|
messageValue.value = "";
|
|
}
|
|
}
|
|
|
|
function unsubscribeFromRoom(room) {
|
|
subscriptions[room].unsubscribe();
|
|
document.getElementById("join" + room).style.display = "";
|
|
document.getElementById("leave" + room).style.display = "none";
|
|
document.getElementById("message" + room).disabled = true;
|
|
document.getElementById("send" + room).disabled = true;
|
|
document.getElementById("messages" + room).innerHTML = "";
|
|
}
|
|
|
|
function disconnect() {
|
|
for (var key in subscriptions) {
|
|
if (subscriptions.hasOwnProperty(key)) {
|
|
unsubscribeFromRoom(key)
|
|
}
|
|
}
|
|
stompClient.disconnect(function (frame) {
|
|
document.getElementById("welcome").style.display = "";
|
|
document.getElementById("chat").style.display = "none";
|
|
});
|
|
}
|
|
</script>
|
|
<style>
|
|
.messageUser {
|
|
width: 100px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.messageDate {
|
|
text-align: center;
|
|
margin-top: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body style="margin: 0">
|
|
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript!
|
|
WebSocket relies on Javascript being enabled. Please enable Javascript and reload this page!</h2></noscript>
|
|
<div id="welcome"
|
|
style="position: absolute;
|
|
bottom: 0;
|
|
font-size: 200%;
|
|
height: 200px;
|
|
margin: auto;
|
|
text-align: center;
|
|
top: 0;
|
|
width: 100%;">
|
|
Welcome to the Simple WebSocket Stomp Chat!
|
|
<br/>
|
|
Enter your name to connect:
|
|
<br/>
|
|
<br/>
|
|
|
|
<div align="center">
|
|
<form onsubmit="connect();return false;">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<input id="user" type="text"
|
|
style="font-size: 24pt; width: 200px; font-weight: bold; margin-top: 2px;"/>
|
|
</td>
|
|
<td>
|
|
<input type="submit" value="Connect"
|
|
style="height: 43px; width: 200px; font-size: 24pt; font-weight: bold;"/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div id="chat" align="center" style="font-size: 200%; padding-top: 50px; display: none;">
|
|
Welcome, <span id="currentUser"></span>!
|
|
<br/>
|
|
Please, join to chat rooms to send and receive messages to/from other users:
|
|
<br/>
|
|
<br/>
|
|
<table>
|
|
<tr>
|
|
<td style="padding-right: 20px;">
|
|
<div align="center" style="font-size: 25pt;">
|
|
Room 1
|
|
</div>
|
|
<div align="center">
|
|
<input id="join1" type="button" value="Join"
|
|
onclick="subscribeToRoom(1)"
|
|
style="height: 43px; width: 150px; font-size: 20pt; font-weight: bold;"/>
|
|
|
|
<input id="leave1" type="button" value="Leave"
|
|
onclick="unsubscribeFromRoom(1)"
|
|
style="height: 43px; width: 150px; font-size: 20pt; font-weight: bold;display: none"/>
|
|
</div>
|
|
<br/>
|
|
|
|
<div style="height: 300px; border: 5px groove; overflow: auto; width: 500px;">
|
|
<table width="100%" border="1" cellspacing="0" style="border: 0">
|
|
<tbody id="messages1" valign="top">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<br/>
|
|
|
|
<form onsubmit="sendMessage(1);return false;" style="margin-left: -4px;">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<input id="message1" type="text" disabled
|
|
style="font-size: 20pt; width: 429px; margin-top: 2px;"/>
|
|
</td>
|
|
<td>
|
|
<input id="send1" type="submit" value="Send" disabled
|
|
style="height: 40px; width: 77px; font-size: 20pt; font-weight: bold;"/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</form>
|
|
</td>
|
|
<td style="padding-left: 20px;">
|
|
<div align="center" style="font-size: 25pt;">
|
|
Room 2
|
|
</div>
|
|
<div align="center">
|
|
<input id="join2" type="button" value="Join"
|
|
onclick="subscribeToRoom(2)"
|
|
style="height: 43px; width: 150px; font-size: 20pt; font-weight: bold;"/>
|
|
|
|
<input id="leave2" type="button" value="Leave"
|
|
onclick="unsubscribeFromRoom(2)"
|
|
style="height: 43px; width: 150px; font-size: 20pt; font-weight: bold; display: none"/>
|
|
</div>
|
|
<br/>
|
|
|
|
<div style="height: 300px; border: 5px groove; overflow: auto; width: 500px;">
|
|
<table width="100%" border="1" cellspacing="0" style="border: 0">
|
|
<tbody id="messages2" valign="top">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<br/>
|
|
|
|
<form onsubmit="sendMessage(2);return false;" style="margin-left: -4px;">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<input id="message2" type="text" disabled
|
|
style="font-size: 20pt; width: 429px; margin-top: 2px;"/>
|
|
</td>
|
|
<td>
|
|
<input id="send2" type="submit" value="Send" disabled
|
|
style="height: 40px; width: 77px; font-size: 20pt; font-weight: bold;"/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<br/><br/>
|
|
<input type="button" value="Disconnect" onclick="disconnect()"
|
|
style="height: 43px; width: 220px; font-size: 24pt; font-weight: bold;"/>
|
|
</div>
|
|
</body>
|
|
</html>
|