I am trying to separate my <script> inside my HTML file to an external js file.
This is my very simple folder structure:
Chat
|-- index.html
|-- index.js
`-- server.js
Relevant part of html file:
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="index.js"></script>
</body>
</html>
Relevant part of index.js file:
$(function() {
//Initialize variables
var $messageArea = $('#messages');
var $InputMessage = $('#InputMessage');
var $InputName = $('#InputName');
//Initialize Socket
var socket = io();
//Send server Your message
socket.emit('chat message', $InputMessage.val());
});
Relevant part of server.js file:
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
This is all running in localhost. What am I doing wrong here?