I am trying to learn websockets in javascript, and am making a basic multiplayer game with multiple lobbies. Currently I'm trying to send a message to the server when a client clicks a join button, then send a message to the server that a client has joined to initialize controls for it.
However when trying to call the function from a js file in my html it didn't run, and while troubleshooting I found that it only stopped running when I used the global var io in the the file.
How would I run the function to send a message to the server when a button is clicked, or fix the function not running due to using the global variable?
my html file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<meta charset="UTF-8">
<meta name="description" content="A multiplayer online tank game!">
<meta name="keywords" content="Tank, Multiplayer, Cursed">
<meta name="author" content="3love">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tonk Treble</title>
</head>
<body>
<div class="center-container">
<div id="main-menu">
<div class="top-text" id="testing">Nothing Recieved</div>
<select style="width:80%; text-align: center" id="server">
<option value="0" selected>Server 1 (0)</option>
<option value="1">Server 2 (0)</option>
<option value="2">Server 3 (0)</option>
<option value="D">Developer</option>
</select>
<button style="top:50%; width:80%" onclick="joinlobby(document.getElementById('server').value)">Join Lobby</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/main.js"></script>
<script src="/util.js"></script>
<script src="/lobbymanager.js"></script>
</body>
</html>
my js file (lobbymanager.js):
/* global io */
//initialize the socket
const socket = io();
function joinlobby(room) {
document.getElementById("testing").innerHTML = "Script Running";
socket.emit("userJoined", room);
}