diff --git a/server/src/main/resources/static/client.js b/server/src/main/resources/static/client.js index 7cba2d4..e92bd51 100644 --- a/server/src/main/resources/static/client.js +++ b/server/src/main/resources/static/client.js @@ -168,16 +168,16 @@ var vm = new Vue({ return null; }, hostGame: function(e) { - client.send('/app/hostGame'); + client.publish({destination: '/app/hostGame'}) }, joinGame: function(e) { // Discard 'game-' prefix var buttonId = e.target.id; var gameId = buttonId.substr(5); - client.send('/app/joinGame', {}, gameId); + client.publish({destination: '/app/joinGame', body: gameId}) }, leaveGame: function(e) { - client.send('/app/leaveGame'); + client.publish({destination: '/app/leaveGame'}) }, removeGame: function(gameId) { var indexToRemove = null; @@ -197,7 +197,7 @@ var vm = new Vue({ } else if (e.which === KEYCODE_RETURN) { if (this.myGuess.length === 5) { - client.send("/app/guess", {}, this.myGuess); + client.publish({destination: '/app/guess', body: this.myGuess}) this.myGuess = ''; this.repaint(); } @@ -227,7 +227,7 @@ var vm = new Vue({ return; } messageInput.value = ''; - client.send('/app/chat', {}, text); + client.publish({destination: '/app/chat', body: text}) addChatMessage(this.username, text); } } @@ -279,13 +279,45 @@ function main() { webSocketProtocol = 'wss'; } - client = Stomp.client(`${webSocketProtocol}://${location.host}/stomp`); - client.heartbeat.outgoing = 25000; // send PING every 25 seconds - client.heartbeat.incoming = 0; // do NOT want PONGs from server - client.connect({}, afterConnected, function(errorMessage) { + client = new StompJs.Client({ + brokerURL: `${webSocketProtocol}://${location.host}/stomp`, + connectHeaders: {}, + //reconnectDelay: 5000, // TODO: implement reconnect functionality + reconnectDelay: 0, // Disable automatic reconnects + heartbeatIncoming: 25000, // send PING every 25 seconds + heartbeatOutgoing: 25000, // receive PONG every 25 seconds + //debug: function (str) { console.log(str); } // Print debug logs + }); + + client.onConnect = function(frame) { + afterConnected(frame); + } + + // Will be invoked in case of error encountered at broker. + // Bad login/passcode typically will cause an error. + // Complaint brokers will set `message` header with a brief message. Body may contain details. + // Compliant brokers will terminate the connection after any error. + client.onStompError = function(frame) { + console.log('Broker reported error: ' + frame.headers['message']); + console.log('Additional details: ' + frame.body); + var errorMessage = frame.headers['message']; addChatAnnouncement(errorMessage); addChatAnnouncement('Please reload the page!'); - }); + } + + client.onWebSocketClose = function(wsCloseEvent) { + console.log('WebSocket close event: ' + JSON.stringify(wsCloseEvent)); + addChatAnnouncement('WebSocket closed!'); + addChatAnnouncement('Please reload the page!'); + } + + client.onWebSocketError = function(wsErrorEvent) { + console.log('WebSocket error event: ' + JSON.stringify(wsErrorEvent)); + addChatAnnouncement('WebSocket error!'); + addChatAnnouncement('Please reload the page!'); + } + + client.activate(); var usernameInput = document.getElementById('nicknameInput'); @@ -318,7 +350,7 @@ function main() { usernameSubscription = client.subscribe(usernameTopic, usernameHandler); client.subscribe('/topic/userJoined', onUserJoined); } - client.send('/app/setUsername', {}, usernameValue); + client.publish({destination: '/app/setUsername', body: usernameValue}) } }); usernameInput.addEventListener('keyup', function(e) { @@ -414,15 +446,6 @@ function isCharacterUppercase(charCode) { return charCode >= 65 && charCode <= 90; } -function isValidResult(result) { - for (var i = 0; i < 5; i++) { - if (result[i] !== 0 && result[i] !== 1 && result[i] !== 2) { - return false; - } - } - return true; -} - function onChat(message) { var chatMessage = JSON.parse(message.body); var messageSender = chatMessage.username; @@ -432,7 +455,7 @@ function onChat(message) { } else if (messageSender === vm.username) { // Ignore messages sent by yourself } else { - console.log('Message from ' + messageSender + ": " + messageBody); + console.log('Message from ' + messageSender + ': ' + messageBody); addChatMessage(messageSender, messageBody); } } @@ -524,30 +547,28 @@ function onOpponentJoined(message) { } function onOpponentReport(message) { + console.log('Opponent report: ' + message.body); var report = JSON.parse(message.body); if (report.correct === true) { var guess = report.guess; var firstLetter = report.firstLetter; - console.log('Opponent guessed correctly! ' + guess); vm.opponentScore = vm.opponentScore + 100; vm.lastWord = guess; vm.reset(firstLetter, false); vm.repaint(); } else { var result = report.result; - console.log('Opponent result: ' + result); vm.opponentResults.push(result); vm.repaint(); } } function onPlayerReport(message) { + console.log('My report: ' + message.body); var report = JSON.parse(message.body); - console.log('My report: ' + report); if (report.correct === true) { var guess = report.guess; var firstLetter = report.firstLetter; - console.log('I guessed correctly!'); vm.myScore = vm.myScore + 100; vm.lastWord = guess; vm.reset(firstLetter, false); @@ -555,8 +576,6 @@ function onPlayerReport(message) { } else { var guess = report.guess; var result = report.result; - console.log('My result: ' + result); - // TODO: use isValidResult function if (result[0] === 9) { vm.myGuesses.push('-----'); } else { diff --git a/server/src/main/resources/static/index.html b/server/src/main/resources/static/index.html index 7c59814..79a9c41 100644 --- a/server/src/main/resources/static/index.html +++ b/server/src/main/resources/static/index.html @@ -5,7 +5,8 @@