Skip to content

Connection test #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 12 commits into from
Closed

Connection test #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f544815
extract connection_test.js from main login page
Jul 29, 2015
79a1405
fix an error in JS testMessage condition
Jul 30, 2015
442749e
Update connection_test.js
Phrancis Jul 31, 2015
70686f3
Update login.html
Phrancis Aug 4, 2015
b736dce
Update login.js
Phrancis Aug 4, 2015
89e3c4e
Update login.js
Phrancis Aug 4, 2015
c018625
Update connection_test.js
Phrancis Aug 4, 2015
6747294
Update login.html
Phrancis Aug 4, 2015
10d0379
Update login.js
Phrancis Aug 4, 2015
111067a
merge in API changes from master
Aug 4, 2015
afd296a
resolve merge conflicts from master to connection-test
Aug 4, 2015
70d8bfa
add try/catch to connect function
Aug 5, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 111 additions & 0 deletions login/connection_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
loginInformation = document.login_information;

loginInformation.elements.test_websocket.addEventListener("click", init);
loginInformation.elements.disconnect_websocket.addEventListener("click", closeWebsocket);

var server,
username,
testMessage,
websocketOutput;

/**
* Get elements from web form to connect to WebSocket.
* @deprecated See login.js
*/
function init() {

server = document.getElementById("server").value;
if (server === "other") {
server = document.getElementById("server_other_input").value;
}
username = document.getElementById("username").value;
testMessage = document.getElementById("test_message").value;
if (!testMessage) {
testMessage = '{ "command": "login", "username": "' + username + '" }';
}

websocketOutput = document.getElementById("websocket_output");
testWebSocket();
}

/**
* Pass elements from web form to WebSocket and append messages to document.
* @deprecated See login.js
*/
function testWebSocket() {

// Append input values to document prior to printing test results

var wsHeader = document.createElement("h3");
wsHeader.innerHTML = "Testing WebSocket connection...";
websocketOutput.appendChild(wsHeader);

var wsInput = document.createElement("p");
wsInput.innerHTML =
"Server: " + server + "<br/>" +
"Username: " + username + "<br/>" +
"Message: " + testMessage;

websocketOutput.appendChild(wsInput);

// Begin WebSocket test

websocket = new WebSocket(server);
websocket.onopen = function(evt) {
onOpen(evt)
};
/*websocket.onclose = function(evt) {
onClose(evt)
};*/
websocket.onmessage = function(evt) {
onMessage(evt)
};
websocket.onerror = function(evt) {
onError(evt)
};

/* Close websocket if page is closed or refreshed */
window.onbeforeunload = function() {
websocket.onclose = function () {}; // disable onclose handler
websocket.close()
};
}

function closeWebsocket() {
websocket.onclose = function(evt) {
onClose(evt)
};
websocket.close();
//writeToScreen("DISCONNECTED");
}



function onOpen(evt) {
writeToScreen("CONNECTED");
doSend(testMessage);
}

function onClose(evt) {
writeToScreen("DISCONNECTED");
}

function onMessage(evt) {
writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data + '</span>');
}

function onError(evt) {
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}

function doSend(message) {
writeToScreen("SENT: " + message);
websocket.send(message);
}

function writeToScreen(message) {
var pre = document.createElement("p");
//pre.style.wordWrap = "break-word";
pre.innerHTML = message;
websocketOutput.appendChild(pre);
}
74 changes: 43 additions & 31 deletions login/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,37 +7,49 @@
</head>

<body>
<noscript>To play CardShifter, please either enable JavaScript or use a JavaScript-enabled browser.</noscript>
<h1>Cardshifter login</h1>
<form name="login_information" id="login_information">
<label for="server">Server:</label>
<select name="server" id="server">
<option value="ws://127.0.0.1:4243">Local host</option>
<option value="ws://dwarftowers.com:4243">dwarftowers.com</option>
<option value="ws://echo.websocket.org/">WebSocket.org echo test</option>
<option value="other">Other...</option>
</select>
<br/>
<div id="server_other">
<label for="server_other_input">Other Server:</label>
<input name="server_other_input" id="server_other_input" type="text" />
<br/>
<!-- Could localhost be secure too? (SirPython)-->
<label for="secure">Is secure server:</label>
<input name="secure" id="secure" type="checkbox" value="secure" />
<br/>
</div>
<label for="username">Username:</label>
<input name="username" id="username" type="text" placeholder="Enter name..." />
<br/>
<label for="test_message">Test message to server:</label>
<br/>
<input name="test_message" id="test_message" type="text" size="100" placeholder="Optional... Leave blank unless using for testing." />
<br/>
<input name="submit" id="submit" type="button" value="Log in" />
<input name="test_websocket" id="test_websocket" type="button" value="Test WebSocket" />
</form>
<script src="login.js"></script>
<noscript>To play CardShifter, please either enable JavaScript or use a JavaScript-enabled browser.</noscript>
<h1>Cardshifter login</h1>
<form name="login_information" id="login_information">
<label for="server">Server:</label>
<select name="server" id="server">
<option value="ws://127.0.0.1:4243">Local host</option>
<option value="ws://dwarftowers.com:4243">dwarftowers.com</option>
<option value="ws://echo.websocket.org/">WebSocket.org echo test</option>
<option value="other">Other...</option>
</select>
<br/>
<div id="server_other">
<label for="server_other_input">Other Server:</label>
<input name="server_other_input" id="server_other_input" type="text" />
<br/>
</div>
<label for="username">Username:</label>
<input name="username" id="username" type="text" placeholder="Enter name..." />
<br/>
<label for="secure">Is secure server:</label>
<input name="secure" id="secure" type="checkbox" value="secure" />
<br/>
<label for="test_message">Test message to server:</label>
<br/>
<input name="test_message" id="test_message" type="text" size="100" placeholder="Optional... Leave blank unless using for testing." />
<br/>
<input name="submit" id="submit" type="button" value="Log in" />
<br/>
<br/>
<input name ="test_websocket" id="test_websocket" type="button" value="Test WebSocket" />
<input name ="disconnect_websocket" id="disconnect_websocket" type="button" value="Disconnect WebSocket" />
</form>
<script src="login.js"></script>
<script src ="../server_interface/server_interface.js"></script>

<!-- Temporary WebSocket connection test prints result to document -->

<script src="connection_test.js"></script>


<div id="websocket_output"></div>

<!-- end temporary connection test -->

</body>

Expand Down
106 changes: 80 additions & 26 deletions login/login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,82 @@
(function(window, undefined) {
var login_information = document.login_information;

var server = login_information.server;
var serverOther = login_information.server_other_input;
var serverOtherContainer = document.getElementById("server_other");
var username = login_information.username;
var isSecure = login_information.secure;
var submit = login_information.submit;
var isOther = false;

submit.onclick = function() {
var finalServer = (isOther ? serverOther.value : server.value);
console.log(finalServer);
}

server.onclick = function() {
console.log(this.value);
if(this.value === "other") {
serverOtherContainer.style.display = "block";
isOther = true;
} else {
serverOtherContainer.style.display = "none";
isOther = false;
}
}


/* Login information data obtained from user input in HTML form */
var loginInformation = document.login_information;

var server = login_information.server;
var serverOther = loginInformation.server_other_input;
var serverOtherContainer = document.getElementById("server_other_input");
var username = loginInformation.username;
var isSecure = loginInformation.secure;
var testMessage = loginInformation.test_message;
var submit = loginInformation.submit;
var isOther = false;
var websocketOutput;


submit.onclick = function() {
// Verify if user selected one of the provided servers, or entered another server of their choosing
var finalServer = (isOther ? serverOther.value : server.value);

// For testing print values to console
console.log("Final server: " + finalServer);
console.log("Username: " + username.value);
console.log("Is Secure: " + isSecure.value);
console.log("Test message: " + testMessage.value);

// Append input values to document prior to printing test results

websocketOutput = document.getElementById("websocket_output");

var wsHeader = document.createElement("h3");
wsHeader.innerHTML = "Testing WebSocket connection...";
websocketOutput.appendChild(wsHeader);

var printTestMessage = (testMessage.value ? testMessage.value : "No test message");

var wsInput = document.createElement("p");
wsInput.innerHTML =
"Server: " + finalServer + "<br/>" +
"Username: " + username.value + "<br/>" +
"Message: " + printTestMessage;
websocketOutput.appendChild(wsInput);

// attempt connection to websocket server using input values

connect(finalServer, username.value, isSecure.value, testMessage.value);
}

function connect(server, username, isSecure, testMessage) {

CardshifterServerAPI.init(server, isSecure);

var loginMessage = new CardshifterServerAPI.messageTypes.LoginMessage(username);
try {
CardshifterServerAPI.sendMessage(loginMessage);
} catch (e) {
console.log(e);
}

if (!testMessage) {
testMessage = "Hello, Cardshifter!";
}
try {
CardshifterServerAPI.sendMessage(testMessage);
} catch(e) {
console.log(e);
}
}

server.onclick = function() {
console.log("Select server:" + this.value);
// Display a text input field if user select "other" as server so that server can be entered manually
if(this.value === "other") {
serverOtherContainer.style.display = "block";
isOther = true;
} else {
serverOtherContainer.style.display = "none";
isOther = false;
}
}

})(Function("return this")());
23 changes: 19 additions & 4 deletions server_interface/server_interface.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
(function(window, undefined) {
// checks if the string begins with either ws:// or wss://
var wsProtocolFinder = /ws(s)*:\/\//;
var wsProtocolFinder = /ws(s)*:\/\//;
var SOCKET_OPEN = 1;

function Message(command) {
this.command = command;
}

function NotInitializedException(message) {
this.name = "NotInitializedException";
this.message = message;
}
function SocketNotReadyException(message, readyState) {
this.name = "SocketNotReadyException"
this.message = message;
this.readyState = readyState;
}

window.CardshifterServerAPI = {
socket: null,
messageTypes: {
Expand Down Expand Up @@ -208,6 +216,8 @@
// if the protocol is not found in the string, store the correct protocol (is secure?)
var protocolAddon = (wsProtocolFinder.test(server) ? "" : "ws" + secureAddon + "://");
var socket = new WebSocket(protocolAddon + server);


this.socket = socket;
},

Expand All @@ -220,11 +230,16 @@
* This will use websocket setup by `this.init` to send a message to the server.
*/
sendMessage: function(message) {
if(this.socket) {
this.socket.send(JSON.stringify(message));
var socket = this.socket;
if(socket) {
if(socket.readyState === SOCKET_OPEN) {
this.socket.send(JSON.stringify(message));
} else {
throw new SocketNotReadyException("The Websocket is not yet ready to be used", socket.readyState);
}
} else {
throw new NotInitializedException("The API has not yet been initialized.");
}
}
};
})(Function("return this")());
})(Function("return this")());