I am trying to create a simple Io-web-chat.
I recently wanted to seperate 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');
});
I also tried putting my files in this public type structure that they have on the socket.io examples:
Chat
|-- Public
| |-- index.html
| `-- index.js
`-- server.js
in that case I changed:
src="/index.js" in html
added /public/index.html into the server.js file
But no luck.
This is all running in localhost. What am I doing wrong here?
This question is related to
javascript
sockets
As mentionned in comments: you need a way to send your static files to the client. This can be achieved with a reverse proxy like Nginx, or simply using express.static().
Put all your "static" (css, js, images) files in a folder dedicated to it, different from where you put your "views" (html files in your case). I'll call it static for the example. Once it's done, add this line in your server code:
app.use("/static", express.static('./static/'));
This will effectively serve every file in your "static" folder via the /static route.
Querying your index.js file in the client thus becomes:
<script src="static/index.js"></script>
Source: Stackoverflow.com