Socket.io connection not working

Question

I'm trying to build a simple socket.io connection on localhost but it's not working.

What I expect from my code is that when I enter command node socket.js it should console "connected" and at the same time on browser's console (I've already opened index.html page in a browser) I should see in console "Connected..." and "Some thing to show". But it's not working.

The server runs fine but I don't see data in both terminal and browser's console.

Am I doing something wrong?

Here's my code:

index.html

<html lang="en">
<head>
</head>
<body>
<script src="/socket.io/socket.io.js"></script>
<script>
    var socket = io.connect('http://127.0.0.1:8080');
    socket.on('connect', function(data) {
        console.log("Connected...");
        socket.on("message", function(data){
            console.log(data);
        });
    });
</script>
</body>
</html>

socket.js

var express = require('express');
var app = express();

var bodyParser = require('body-parser');
app.use(bodyParser.json({type: '*/*'}));
var server = require('http').createServer(app);

var io = require('socket.io')(server);

app.use(express.static('/opt/lampp/htdocs/testproject/node_modules'));

io.on('connection', function(client) {
    console.log("connected");
   client.emit("message", "Some thing to show");
});
server.listen(8080);

My directory structure is like this:

htdocs/testproject/

..node_modules/

..index.html

..socket.js

EDIT: However, my code works when I add this in socket.js

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

Yup. No errors. Let me tell you something. It works when I add a get route in socket.js and write res.sendFile('/opt/lampp/htdocs/testproject/index.html'); in it. I want to do it without route. — Vikas Kumar
Try changing your app.use to app.use(express.static('/opt/lampp/htdocs/testproject/')); then, that should cause the server to serve the index.html properly at least. If that still doesn't work then something very strange is happening since your socket.io code works on my node.js server. — Peter G
Well it worked when I changed the directory like yours. But it works only when I hit 127.0.0.1:8080 in browser. Why wouldn't it should any output to 127.0.0.1:8080/testproject/index.html ? — Vikas Kumar
"localhost:8080/" was pointing to that folder. But, index.html was one level higher. If you take out node_modules, "localhost:8080/" points to the same folder as index.html. If it helps, it was trying to get the file "/opt/lampp/htdocs/testproject/node_modules/index.html" and failing silently since it didn't exist. — Peter G
Make a new question if you have a new question, link it here if you want. Don't forget to see my below answer as well — Peter G

Peter G Peter G · Accepted Answer · 2017-03-03T09:12:55

The socket.io library is designed to work in tandem with a node.js server, so the page the connection comes from needs to be recognizable to the server (through a route). Otherwise, how can it send anything back? If you change the express.static statement to be app.use(express.static('/opt/lampp/htdocs/testproject/'));, you'll get an automatic route that will allow the library to do its thing properly. It's worth noting that you'll need to hit the base URL (that is, localhost:8080/ or localhost:8080/index.html) when loading your page in the future if you use this. If you change the file name then use localhost:8080/newfilename.html.

In socket.js:

var express = require('express');
var app = express();

var bodyParser = require('body-parser');
app.use(bodyParser.json({type: '*/*'}));
var server = require('http').createServer(app);

var io = require('socket.io')(server);

app.use(express.static('/opt/lampp/htdocs/testproject/'));

io.on('connection', function(client) {
    console.log("connected");
   client.emit("message", "Some thing to show");
});
server.listen(8080);

Socket.io connection not working

3 Answers