86 lines
2.7 KiB
HTML
86 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<title>Echo Chamber</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width">
|
|
</head>
|
|
<body>
|
|
|
|
<div>
|
|
<input type="text" id="messageinput"/>
|
|
</div>
|
|
<div>
|
|
<button type="button" onclick="openSocket();" >Open</button>
|
|
<button type="button" onclick="send();" >Send</button>
|
|
<button type="button" onclick="closeSocket();" >Close</button>
|
|
</div>
|
|
<!-- Server responses get written here -->
|
|
<div id="messages"></div>
|
|
|
|
<!-- Script to utilise the WebSocket -->
|
|
<script type="text/javascript">
|
|
|
|
var webSocket;
|
|
var messages = document.getElementById("messages");
|
|
|
|
|
|
function openSocket(){
|
|
// Ensures only one connection is open at a time
|
|
if(webSocket !== undefined && webSocket.readyState !== WebSocket.CLOSED){
|
|
writeResponse("WebSocket is already opened.");
|
|
return;
|
|
}
|
|
// Create a new instance of the websocket
|
|
webSocket = new WebSocket("ws://localhost:2015/echo");
|
|
|
|
/**
|
|
* Binds functions to the listeners for the websocket.
|
|
*/
|
|
webSocket.onopen = function(event){
|
|
// For reasons I can't determine, onopen gets called twice
|
|
// and the first time event.data is undefined.
|
|
// Leave a comment if you know the answer.
|
|
if(event.data === undefined)
|
|
return;
|
|
|
|
writeResponse(event.data);
|
|
};
|
|
|
|
webSocket.onerror = function(event){
|
|
console.log("Oh nooooo!");
|
|
console.log(event);
|
|
|
|
};
|
|
|
|
webSocket.onmessage = function(event){
|
|
writeResponse(event.data);
|
|
};
|
|
|
|
webSocket.onclose = function(event){
|
|
writeResponse("Connection closed");
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Sends the value of the text input to the server
|
|
*/
|
|
function send(){
|
|
var text = document.getElementById("messageinput").value;
|
|
webSocket.send(text);
|
|
}
|
|
|
|
function closeSocket(){
|
|
webSocket.close();
|
|
}
|
|
|
|
function writeResponse(text){
|
|
messages.innerHTML += "<br/>" + text;
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|