Using Messaging over WebSocket with STOMP - The Definitive Guide to HTML5 WebSocket - page 98

<input id="opponentName" type="text" placeholder="Opponent's name"/>
<button id="goBtn" onclick="startGame();">
Go
</button>
</div>
<!-- Instructions and buttons for the users to make their selections,
hidden initially -->
<div id="instructions" style="visibility:hidden;">
<p>Select one:</p>
</div>
<div id="buttons" style="visibility:hidden;">
<button id="rockBtn" name="rock" onclick="buttonClicked(this);">
Rock
</button>
<button id="paperBtn" name="paper" onclick="buttonClicked(this);">
Paper
</button>
<button id="scissorsBtn" name="scissors" onclick="buttonClicked(this);">
Scissors
</button>
</div>
<!-- div to display opponent's choice, initially empty; populated by
JavaScript code in rps.js -->
<div id="opponentsButtons"></div>
</body>
</html>
Writing the Game Code
Now, that we've built a simple user interface for our app, let's take a closer look at the
JavaScript code. First, we declare the variables, as shown in Listing 5-7. Notice that we
include our connection URL to our WebSocket-enabled STOMP-based message broker,
ActiveMQ.
Listing 5-7. Declaring the Variables Used in the JavaScript Code
// ActiveMQ STOMP connection URL
var url = "ws://0.0.0.0:61614/stomp";
// ActiveMQ username and password. Default value is "guest" for both.
var un, pw = "guest";
var client, src, dest;
// Variables holding the state whether the local and
// remote user had his/her turn yet
var hasUserPicked, hasOpponentPicked = false;