java-tutorials/play-framework/websockets/app/views/index.scala.html

98 lines
2.7 KiB
HTML
Raw Normal View History

@(url: String)
@main("Welcome to Play") {
<h1>Welcome to Play WebSockets!</h1>
<div id="messageContent"></div>
<form>
<textarea id="messageInput"></textarea>
<button id="sendButton">Send</button>
</form>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
var webSocket;
var messageInput;
function init() {
initWebSocket();
}
function initWebSocket() {
webSocket = new WebSocket("@url");
webSocket.onopen = onOpen;
webSocket.onclose = onClose;
webSocket.onmessage = onMessage;
webSocket.onerror = onError;
}
function onOpen(evt) {
writeToScreen("CONNECTED");
}
function onClose(evt) {
writeToScreen("DISCONNECTED");
appendMessageToView(":", "DISCONNECTED");
}
function onError(evt) {
writeToScreen("ERROR: " + evt.data);
writeToScreen("ERROR: " + JSON.stringify(evt));
}
function onMessage(evt) {
var receivedData = JSON.parse(evt.data);
console.log("New Data: ", receivedData);
appendMessageToView("Server", receivedData.body);
}
function appendMessageToView(title, message) {
$("#messageContent").append("<p>" + title + ": " + message + "</p>");
}
function writeToScreen(message) {
console.log("New message: ", message);
}
function doSend(protocolMessage) {
if(webSocket.readyState == WebSocket.OPEN) {
writeToScreen("SENT: " + protocolMessage.message);
webSocket.send(JSON.stringify(protocolMessage));
} else {
writeToScreen("Could not send data. Websocket is not open.");
}
}
window.addEventListener("load", init, false);
$(".sendButton").click(function () {
console.log("Submitting.");
newMessage();
});
$(window).on("keydown", function (e) {
if (e.which == 13) {
console.log("Enter pressed.");
newMessage();
return false;
}
});
function newMessage() {
messageInput = $("#messageInput").val();
$("#messageInput").val("");
if ($.trim(messageInput) == "") {
return false;
}
appendMessageToView("Me", messageInput);
var message = {
message: messageInput
};
doSend(message);
}
</script>
}