CODEWITHSUNDEEP
javascriptnode.jssocketssocket.io
Vikas Kumar
Vikas Kumar

Reputation: 739

Socket.io connection not working

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');
});

Upvotes: 4

Views: 13512

Answers (4)

Aronno Ahsan
Aronno Ahsan

Reputation: 33

You should use options when running the server; otherwise, it doesn't work properly. Here is an example snippet from one of my projects.

  init: (httpServer) => {
    const options = {
      cors: true,
      origins: ["http://localhost:8080/"],
    };

    io = require("socket.io")(httpServer, options);
    return io;
  },

After that,

    const server = app.listen(8080);
    const io = init(server);

    io.on("connection", (socket) => {
      console.log("client connected");
    });

    io.on("disconnect", (socket) => {
      console.log(`client disconnected`);
    });

Upvotes: 0

Peter G
Peter G

Reputation: 2821

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);

Upvotes: 2

Paresh Bhave
Paresh Bhave

Reputation: 21

Couple of things i can suggest you to try here.

First please check if socket.io.js is loaded properly.

Second, first start the server and then hit http://localhost:8080 or http://127.0.0.1:8080

Also as far as i know you don't need to mention the host name on client side js when connecting. E.g.

instead of this

 var socket = io.connect('http://127.0.0.1:8080');

you can do this

 var socket = io.connect();

Upvotes: 2

Murf
Murf

Reputation: 1719

It is not working since you are opening the tab before you started your node application. It will request the socket.io.js file which can not be found and not will be reloaded. You need to start the server before you access the page and then it should work.

Upvotes: 0

Related Questions