ooticorn ooticorn - 1 month ago 10
Node.js Question

How to link external socket.io client code into an HTML page?

I haven't had any luck searching for an answer so far -- the closest I got was this topic

Using socket.io without client embedded in html

But that didn't really resolve the issue.

I have been learning about WebSockets recently, particularly with node.js, and many tutorials use socket.io as the node module of choice.

However, it seems like all of the resources online have example code that embeds all of the client side functionality inside the

<script></script>
tags on the HTML page, rather than linking it to an external Javascript file.

I've been following a tutorial that demonstrates a simple chat app using socket.io -- the example code contains just two files (index.html and server.js). There is some client code that is embedded inside script tags in the HTML:

<script>
var socket = io('http://localhost:5000');

socket.on('message.sent', function (data) {
$('#messages').prepend(`
<div>
<hr />
<div><strong>${data.username}</strong></div>
<p>${data.message}</p>
</div>
`);
});

$(function () {
$('#message-form').on('submit', function (e) {
e.preventDefault();
socket.emit('message.send', {
message: $('#message').val(),
username: $('#username').val()
});
});
});
</script>


but I want to figure out how to link to an external file.

I've tried putting client code into an external file (e.g. "client.js") and linking it into the HTML page:

<script src="client.js"></script>


However, when I do this, the console shows me a 404 error telling me that it cannot find http://localhost:5000/client.js

This app is simple, but as the tutorial goes on, it just keeps piling tons of client code into those script tags. I would rather learn how to link the code externally if it's at all possible.

I've pasted both files below in case any of it might be relevant:

index.html:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<form id="message-form">
<p>
<label>Username</label>
<input class="form-control" id="username" />
</p>
<p>
<label>Message</label>
<textarea class="form-control" id="message"></textarea>
</p>
<button class="btn btn-primary" type="submit">Send</button>
</form>
<div id="messages"></div>
</div>


<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io('http://localhost:5000');

// Update the users count
socket.on('message.sent', function (data) {
$('#messages').prepend(`
<div>
<hr />
<div><strong>${data.username}</strong></div>
<p>${data.message}</p>
</div>
`);
});

$(function () {
$('#message-form').on('submit', function (e) {
e.preventDefault();
socket.emit('message.send', {
message: $('#message').val(),
username: $('#username').val()
});
});
});
</script>


</body>
</html>


server.js, in case it's relevant:

var express = require('express'),
app = express(),
http = require('http'),
socketIO = require('socket.io'),
server, io;

app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});

server = http.Server(app);
server.listen(5000);

io = socketIO(server);

io.on('connection', function (socket) {
socket.on('message.send', function (data) {
io.emit('message.sent', data);
});
});

Answer

the console shows me a 404 error telling me that it cannot find

Because your web server doesn't serve static content.

Just add this line to your server.js:

app.use(express.static('public'));

before the app.get... line, create a new folder named 'public' and move your client.js file to this folder.

Read more about it here