Socket.IO connection polling saying error 404 not found

Question

Am working with whiteboard drawing canvas found in the link below. https://socket.io/demos/whiteboard/

I have followed all the setup requirements but when i run the application, am having this error below from console

Failed to load resource: the server responded with a status of 404 (Not Found)
socket.io.js:1 
GET http://localhost/socket.io/?EIO=3&transport=polling&t=1505327119965-1 404 (Not Found)
i.create @ socket.io.js:1
i @ socket.io.js:1
o.request @ socket.io.js:1
o.doPoll @ socket.io.js:1
n.poll @ socket.io.js:2
n.doOpen @ socket.io.js:2
n.open @ socket.io.js:1
r.open @ socket.io.js:1
r @ socket.io.js:1
r @ socket.io.js:1
n.open.n.connect @ socket.io.js:1
(anonymous) @ socket.io.js:1
setTimeout (async)
n.reconnect @ socket.io.js:1
n.maybeReconnectOnOpen @ socket.io.js:1
(anonymous) @ socket.io.js:1
n.emit @ socket.io.js:1
r.onError @ socket.io.js:1
(anonymous) @ socket.io.js:1
n.emit @ socket.io.js:1
n.onError @ socket.io.js:1
(anonymous) @ socket.io.js:1
n.emit @ socket.io.js:1
i.onError @ socket.io.js:1
(anonymous) @ socket.io.js:1
setTimeout (async)
hasXDR.e.onreadystatechange @ socket.io.js:1
socket.io.js:1 
GET http://localhost/socket.io/?EIO=3&transport=polling&t=1505327122954-2 404 (Not Found)

It seems like Socket.Io is not getting response to the listner. please can someone help me fix the issue.

Here is the server.js

const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const port = process.env.PORT || 3000;

app.use(express.static(__dirname + '/public'));

function onConnection(socket){
  socket.on('drawing', (data) => socket.broadcast.emit('drawing', data));
}

io.on('connection', onConnection);

http.listen(port, () => console.log('listening on port ' + port));

here is the index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>


<script src="jquery.min.js"></script>

  <style>

.whiteboard {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}


</style>
</head>
<body>

  <canvas class="whiteboard" ></canvas>

  <script src="./socket.io/socket.io.js"></script>
  <script>
'use strict';

(function() {

  var socket = io();
  var canvas = document.getElementsByClassName('whiteboard')[0];
  var colors = document.getElementsByClassName('color');
  var context = canvas.getContext('2d');

  var current = {
    color: 'black'
  };
  var drawing = false;

  canvas.addEventListener('mousedown', onMouseDown, false);
  canvas.addEventListener('mouseup', onMouseUp, false);
  canvas.addEventListener('mouseout', onMouseUp, false);
  canvas.addEventListener('mousemove', throttle(onMouseMove, 10), false);

  for (var i = 0; i < colors.length; i++){
    colors[i].addEventListener('click', onColorUpdate, false);
  }

  socket.on('drawing', onDrawingEvent);

  window.addEventListener('resize', onResize, false);
  onResize();


  function drawLine(x0, y0, x1, y1, color, emit){
    context.beginPath();
    context.moveTo(x0, y0);
    context.lineTo(x1, y1);
    context.strokeStyle = color;
    context.lineWidth = 2;
    context.stroke();
    context.closePath();

    if (!emit) { return; }
    var w = canvas.width;
    var h = canvas.height;

    socket.emit('drawing', {
      x0: x0 / w,
      y0: y0 / h,
      x1: x1 / w,
      y1: y1 / h,
      color: color
    });
  }

  function onMouseDown(e){
    drawing = true;
    current.x = e.clientX;
    current.y = e.clientY;
  }

  function onMouseUp(e){
    if (!drawing) { return; }
    drawing = false;
    drawLine(current.x, current.y, e.clientX, e.clientY, current.color, true);
  }

  function onMouseMove(e){
    if (!drawing) { return; }
    drawLine(current.x, current.y, e.clientX, e.clientY, current.color, true);
    current.x = e.clientX;
    current.y = e.clientY;
  }

  function onColorUpdate(e){
    current.color = e.target.className.split(' ')[1];
  }

  // limit the number of events per second
  function throttle(callback, delay) {
    var previousCall = new Date().getTime();
    return function() {
      var time = new Date().getTime();

      if ((time - previousCall) >= delay) {
        previousCall = time;
        callback.apply(null, arguments);
      }
    };
  }

  function onDrawingEvent(data){
    var w = canvas.width;
    var h = canvas.height;
    drawLine(data.x0 * w, data.y0 * h, data.x1 * w, data.y1 * h, data.color);
  }

  // make the canvas fill its parent
  function onResize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }

})();
</script>
</body>
</html>

Answer 1

I think the problem is how you set up your server, please try setting up this way:

const http = require('http');
const express = require('express');
const socketIO = require('socket.io');

var app = express();
var server = http.createServer(app);
var io = socketIO(server);

app.use(express.static(__dirname + '/public'));
const port = process.env.PORT || 3000;

// add your socketio code here

server.listen(port, () => {
    console.log(`Server is up on port ${port}!`);
});

Socket.IO connection polling saying error 404 not found

Question

1 answers

solution1
0 ACCPTED 2017-09-13 19:46:09

Socket.IO connection polling saying error 404 not found

Question

1 answers

solution1 0 ACCPTED 2017-09-13 19:46:09

solution1
0 ACCPTED 2017-09-13 19:46:09