Socket.io http:// localhost:3000 / socket.io / socket.io.js 404(未找到) - 如何配置socket.IO - nodejs,apache2,websockets

时间:2018-06-13 21:31:05

标签: javascript node.js sockets socket.io

好的我再次遇到socket.io和express问题。当我运行我的节点js应用程序时,它会在遇到错误之前开始构建"获取http://localhost:3000/socket.io/socket.io.js 404(未找到)"和"未捕获的ReferenceError:io未定义"这是我第二次使用Web套接字并收到相同的错误。对于以前的应用程序,我通过在我的apache服务器上设置反向代理来解决此问题。它看起来像这样;

ProxyPass /socket.io http://localhost:3000/socket.io

但是对于当前的nodejs应用程序,这并不能解决问题。这两个应用程序之间的主要区别在于,当用户将自己引导至localhost:3000 / bomber-kids-online游戏页面时,当前应用程序才开始使用socket.io。当前的应用程序是第一个应用程序的扩展,也就是这个nodejs应用程序提供了一个网站以及我以前的应用程序,这是一个在zEyeland.com/bomber-kids-online上托管的游戏。

以下是我的js文件,它会向浏览器发送正确的html文件进行加载:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var express = require('express');
var router = express.Router();

var updatedMAP;
var updatedOBJECTS;

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

io.on('connection', function(socket){
  console.log("a user connected");

  socket.on('sendNoramlBomb', function(xPosition, yPosition, power){

  socket.broadcast.emit('sendNoramlBomb', xPosition, yPosition, 
power);
  });
  socket.on('sendRedBomb', function(xPosition, yPosition, power){

    socket.broadcast.emit('sendRedBomb', xPosition, yPosition, power);
});
  socket.on('sendBlueBomb', function(xPosition, yPosition, power){

    socket.broadcast.emit('sendBlueBomb', xPosition, yPosition, 
power);
  });
  socket.on('sendGreyBomb', function(xPosition, yPosition, power){

    socket.broadcast.emit('sendGreyBomb', xPosition, yPosition, 
power);
  });
  socket.on('sendGreenBomb', function(xPosition, yPosition, power){

    socket.broadcast.emit('sendGreenBomb', xPosition, yPosition, 
power);
  });

  socket.on('sendPlayer', function(locationY, locationX, direction){


    io.emit('sendPlayer',locationY, locationX, direction);
  });

  socket.on('chat message', function(msg){
   io.emit('chat message', msg);
 });

 socket.on('disconnect', function(){
   console.log("user disconnected");
     });
   });

//http.listen(3000, function(){
// console.log('listening on *:3000');
//});

module.exports = router;

这是我当前项目的apache配置

    ProxyPass        /socket.io http://localhost:3000/bomber-kids-online/socket.io
    ProxyPassReverse /socket.io http://localhost:3000/bomber-kids-online/socket.io


    <Proxy *>
        Order deny,allow
    Allow from all 
    </Proxy>    
ProxyRequests Off
ProxyPreserveHost On

ProxyPass    / http://localhost:3000/
ProxyPassReverse / http://localhost:3000/

所以回顾一下最新情况。我试图运行使用websockets的nodejs游戏。当我在localhost:3000 / bomber-kids-online网站上访问我的游戏时,得到一个(GET http://localhost:3000/socket.io/socket.io.js 404(未找到))如何解决这个问题?这次我的反向代理似乎无法修复它。您可以在zeyeland.com/bomber-kids-online上查看我的游戏的工作版本。我当前的项目使用完全相同的html和javascript文件来运行。但是,通过检查上面的reverseProxy,您会注意到在我当前的项目中,游戏不是直接从localhost:3000访问,而是从服务器上另一个js文件提供的路径访问。

以下是我的app js文件的样子;

 var createError = require('http-errors');
 var express = require('express');
 var path = require('path');
 var cookieParser = require('cookie-parser');
 var logger = require('morgan');

 var indexRouter = require('./routes/index');
 var usersRouter = require('./routes/users');
 var bomberKidsRouter = require('./routes/games/bomber-kids-online- 
game');

 var app = express();

 // view engine setup
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'pug');

 app.use(logger('dev'));
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'public')));

 app.use('/', indexRouter);
 app.use('/users', usersRouter);
 app.use('/bomber-kids-online', bomberKidsRouter);

 // catch 404 and forward to error handler
 app.use(function(req, res, next) {
 next(createError(404));
 });

 // error handler
 app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
 res.locals.error = req.app.get('env') === 'development' ? err : {};

 // render the error page
 res.status(err.status || 500);
res.render('error');
 });

 module.exports = app;

2 个答案:

答案 0 :(得分:1)

问题是expresssocket.io不共享同一台服务器。 我没有看到任何server.listen所以我猜我socket.io甚至不会在任何端口上听。

您收到该错误,因为http://localhost:3000/socket.io/socket.io.js正在为express提供服务,当然您还没有设置该路线(而且您不应该这样做)。

修复方法是将快速服务器附加到socket.io

<强> index.js

const app = express();

const server = require('http').Server(app);
const io = require('socket.io')(server); // Pass server to it instead of port

// Now you can pass `io` to any file you want, and setup your socket logic
// Do the same for express app.
// Or handle the logic here, whatever you prefer

server.listen(3000); // Listen

您可以这样做,或为socket.io使用其他端口。

  

您能否进一步解释或指出我如何撰写文件   socket.io工作,为什么它不能在我的节点应用程序的同一端口上运行

您无法访问应用程序或服务器在同一端口上侦听,否则您将获得:Error: listen EADDRINUSE

这就是为什么如果你想使用快递和&amp; socket.io在同一个端口上,你必须使用同一个服务器监听那个特定端口。

答案 1 :(得分:0)

我遇到了同样的问题,并按照@Marcos 建议的这些步骤进行了操作,但在我的情况下不起作用,所以我删除了所有的 socket.io、socketio 和 express 包,重新安装如下

npm i express --save
npm i socket.io@2.4.1 --save

并确保它们已更新,就像之前 Ubunto 下载 socket.io 的 2.1 版本一样,它有一些漏洞问题,然后我没有使用“require”格式,而是使用“import”,如下所示

import express from 'express';
import http from 'http';
import createGame from './public/game.js';
import socketio from 'socket.io';

const app = express();
const server = http.createServer(app);
const sockets = socketio(server);

它终于奏效了。经过一整天的努力,我认为如果将来有人遇到类似问题,这会有所帮助。