Socket.IO连接轮询，提示未找到错误404

Question

Am working with whiteboard drawing canvas found in the link below. 我正在使用以下链接中的白板绘图画布。 https://socket.io/demos/whiteboard/ 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. 似乎Socket.Io没有收到对列表器的响应。 please can someone help me fix the issue. 请有人可以帮助我解决此问题。

Here is the server.js 这是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 这是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连接轮询，提示未找到错误404

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-09-13 19:46:09

Socket.IO连接轮询，提示未找到错误404

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-09-13 19:46:09

解决方案1
0 已采纳 2017-09-13 19:46:09