GET 404 (File not found) and net::ERR_CONNECTION_REFUSED from socket.io

Question

I know similar issues has been posted on here before. But I have read and tried all the proposed solutions and I am still not getting it to work.

I am trying to connect two devices using socket.io. But every time I get this error:

GET http://localhost:4444/socket.io/?EIO=3&transport=polling&t=LZkz-Kk 404 (File not found) polling-xhr.js:261

Request.create @ polling-xhr.js:261
Request @ polling-xhr.js:166
XHR.request @ polling-xhr.js:93
XHR.doPoll @ polling-xhr.js:123
Polling.poll @ polling.js:118
Polling.doOpen @ polling.js:63
Transport.open @ transport.js:80
Socket.open @ socket.js:240
Socket @ socket.js:119
Socket @ socket.js:29
Manager.open.Manager.connect @ manager.js:213
Manager @ manager.js:68
Manager @ manager.js:37
lookup @ index.js:60
socketSetup @ sketch.js:9
init @ sketch.js:69

That error is then always followed by this, but I guess it is an issue that follows because it can't find my file, right?

GET http://localhost:4444/socket.io/?EIO=3&transport=polling&t=LZk-142 net::ERR_CONNECTION_REFUSED polling-xhr.js:261

I have tried every different way to SRC the socket.io file that I have ran into online, these are some examples:

< script type="text/javascript" src="http://localhost:4444/socket.io/socket.io.js">< /script ><br>
< script type="text/javascript" src="http://myipadress:4444/socket.io/socket.io.js">< /script ><br>
< script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.2/socket.io.js">< /script ><br>
< script type="text/javascript" src="/socket.io/socket.io.js">< /script><br>
< script src="libraries/socket.io.js">< /script><br>
< script type="text/javascript" src="/node_modules/socket.io-client/dist/socket.io.js">< /script>

Basically, they all give me the same error, except if I leave the SRC out, as some say the socket link shouldn't need to be implied. In that case I get:

Uncaught ReferenceError: io is not defined(…) sketch.js:9 socketSetup @ sketch.js:9
init @ sketch.js:69

This is my server side, app.js:

var express = require('express');<br>
var app = express();<br>
var PORT = 4444;<br>
// Routing<br>
app.use('/', express.static(__dirname + '/public'));<br>
// Socket.io setup<br>
var server = require('http').createServer(app);<br>
var io = require('socket.io')(server);<br>
server.listen(PORT, function(){<br>
    console.log('Server listening at port ' + PORT);<br>
});<br>
<br>
io.on('connection', function(socket) {<br>
A bunch of my io code.<br>
)};

This is my index.html code:

< !DOCTYPE html><br>
< html><br>
< head><br>
  < meta charset="UTF-8"><br>
    < link rel="stylesheet" href="css/style.css"><br>
< /head><br>
<br>
< body><br>
<br>
< script type="text/javascript" src="http://localhost:4444/socket.io/socket.io.js">< /script><br>
< !-- < script type="text/javascript" src="/socket.io/socket.io.js">< /script>-- ><br>
< script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/p5.js">< /script><br>
< script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/addons/p5.dom.js">< /script><br>
< script type="text/javascript" src="libraries/jquery-min.js">< /script><br>
< script type="text/javascript" src="sketch.js">< /script><br>
< /body><br>
< /html><br>

package.json

{
  "name": "public",
  "version": "1.0.0",
  "description": "Test",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "kim",
  "license": "ISC",
  "dependencies": {
    "express": "^4.14.0",
    "socket.io": "^1.7.2"
  }
}

This is the important part of my client side, sketch.js:

var app = app || {};

app.main = (function() {

var socket;

var socketSetup = function(callback){
    console.log('Called socketStart.');
      socket = io.connect();
      socket.on('movement', function(data) {
          Socket listeners..
        }
      );  
      callback();    
  } 
var init = function(){
    console.log('Initializing app.');
    //var myp5 = new p5(sketch, 'canvas-container');
    socketSetup(sketch);
  };

  return {
    init: init
  };

})();

window.addEventListener('DOMContentLoaded', app.main.init);

I have tried some different setups, but this logically should work?^^

And at last, here is my project structure:

app.js
package.json
node_modules
public
sketch.js
index.html
css
libraries

I even tried to npm install socket.io locally in the public folder, but that didn't work either.

Can anybody see what I am doing wrong? Is there something I haven't tried that I should? What has worked for you?

Sorry for such a long post, I just wanted to clear what I have tried out to avoid unnecessary answers. I even tried uninstalling and removing all node and npm files and reinstalling it all.

Answer 1

You may want to start from this simple setup:

server: (your code almost unchanged)

var express = require('express');
var app = express();
var PORT = 4444;
// Routing
app.use('/', express.static(__dirname + '/public'));
// Socket.io setup
var server = require('http').createServer(app);
var io = require('socket.io')(server);
server.listen(PORT, function(){
console.log('Server listening at port ' + PORT);
});

io.on('connection', function(socket) {
    console.log('a client has connected');
});

/public/index.html

<!doctype html>
<html>
  <head>
    <title>Testing socket.io</title>
  </head>
  <body>
    <h1 id="socketio"> not connected </h1>
    <script src="socket.io/socket.io.js"></script>
    <script src="sketch.js"></script>
  </body>
</html>

/public/sketch.js

var socket = io();
socket.on('connect', function() {
    document.getElementById("socketio").innerHTML = "socket connected";
});

1. Paste the above server code into server.js file,
2. Paste the above html code into public/index.html file
3. Paste above client javascript code into public/sketch.js file,
4. Run npm install ,
5. Start the server with node server

It should work and then you can build something more on it.