98 lines
2.7 KiB
HTML
98 lines
2.7 KiB
HTML
@(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>
|
|
}
|