问题 浏览器无法使用express获取socket.io.js文件


我有socket.io示例的问题。我的浏览器无法获取socket.io.js文件(控制台中出现404错误)。


有效的代码:

server.js

var app = require('express').createServer()
  , io = require('socket.io').listen(81);

app.listen(80);

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

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

的index.html

<script src="http://192.168.1.104:81/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://192.168.1.104:81');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
</script>


但这不是:

server.js

var app = require('express').createServer()
  , io = require('socket.io').listen(app);

app.listen(80);

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

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

的index.html

<script src="http://192.168.1.104:80/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://192.168.1.104:80');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
</script>

在这种情况下,我的浏览器无法获取socket.io.js文件。


12271
2018-04-17 07:43


起源



答案:


编辑 :以下所有文字都是错误的,直到下一个“编辑”。把它留在那里作为痕迹......

你应该知道一件事,你应该做的两件事+所需要的一切 Express doc就在这里 :

  1. 快速过滤/处理对节点服务器的每次访问。这意味着当您尝试访问您的socket.io脚本文件时,Express会尝试在您声明的路由中找到它并失败,因为您没有(并且您没有这样做)。
  2. 最重要的是:声明一个静态的非“计算”文件夹 表示放置所有静态文件(css,客户端脚本,图像)的位置:

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

    这条线必须放在你的身上 app.configure 之前打电话 app.use(app.router) (我实际上把它放在第一位)

    我喜欢这个/ static / scripts; / static / css; / static / img文件夹组织,但您可以自由地适应您的需求。

  3. 将socket.io脚本文件的链接更改为相对路径 (可选但强烈建议): src='/static/scripts/socket.io/socket.io.js'

编辑 :我错了,非常非常错,我很抱歉。 Socket.io生成所需的不同路径/文件,您不必声明它们,也不必复制任何客户端脚本文件。

请尝试切换 <script src="http://192.168.1.104:81/socket.io/socket.io.js"></script> 客户线到正常的相对一个 <script src="/socket.io/socket.io.js"></script> 因为这是您的代码和快速指南代码之间的唯一区别。


7
2018-04-17 08:24



好的,现在浏览器可以获得socket.io.js,但是有下一个错误,行“var client = require('socket.io-client');”在socket.io.js中:未捕获的ReferenceError:未定义require。 - Jakub Martin
我错了,抱歉误导了。我更新了我的答案。 - Arnaud Rinquin
当我将<script src =“/ socket.io/socket.io.js”>添加到我的html时,它仍然无法正常工作。在我的js代码中,io = require('socket.io')。listen(app)和io = require('socket.io')。listen(81)。 - Jakub Martin
首先,如果你使用快递,只能使用 require('socket.io').listen(app);。那么请告诉我们什么不起作用?它是客户端还是服务器端?您是否有客户端错误消息?如果请求成功完成,你可以检查(使用firebug或chrome web工具),如果不是,那么问题是什么? - Arnaud Rinquin
好的,有解决方案: stackoverflow.com/questions/10191048/socket-io-js-not-found - Jakub Martin


答案:


编辑 :以下所有文字都是错误的,直到下一个“编辑”。把它留在那里作为痕迹......

你应该知道一件事,你应该做的两件事+所需要的一切 Express doc就在这里 :

  1. 快速过滤/处理对节点服务器的每次访问。这意味着当您尝试访问您的socket.io脚本文件时,Express会尝试在您声明的路由中找到它并失败,因为您没有(并且您没有这样做)。
  2. 最重要的是:声明一个静态的非“计算”文件夹 表示放置所有静态文件(css,客户端脚本,图像)的位置:

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

    这条线必须放在你的身上 app.configure 之前打电话 app.use(app.router) (我实际上把它放在第一位)

    我喜欢这个/ static / scripts; / static / css; / static / img文件夹组织,但您可以自由地适应您的需求。

  3. 将socket.io脚本文件的链接更改为相对路径 (可选但强烈建议): src='/static/scripts/socket.io/socket.io.js'

编辑 :我错了,非常非常错,我很抱歉。 Socket.io生成所需的不同路径/文件,您不必声明它们,也不必复制任何客户端脚本文件。

请尝试切换 <script src="http://192.168.1.104:81/socket.io/socket.io.js"></script> 客户线到正常的相对一个 <script src="/socket.io/socket.io.js"></script> 因为这是您的代码和快速指南代码之间的唯一区别。


7
2018-04-17 08:24



好的,现在浏览器可以获得socket.io.js,但是有下一个错误,行“var client = require('socket.io-client');”在socket.io.js中:未捕获的ReferenceError:未定义require。 - Jakub Martin
我错了,抱歉误导了。我更新了我的答案。 - Arnaud Rinquin
当我将<script src =“/ socket.io/socket.io.js”>添加到我的html时,它仍然无法正常工作。在我的js代码中,io = require('socket.io')。listen(app)和io = require('socket.io')。listen(81)。 - Jakub Martin
首先,如果你使用快递,只能使用 require('socket.io').listen(app);。那么请告诉我们什么不起作用?它是客户端还是服务器端?您是否有客户端错误消息?如果请求成功完成,你可以检查(使用firebug或chrome web工具),如果不是,那么问题是什么? - Arnaud Rinquin
好的,有解决方案: stackoverflow.com/questions/10191048/socket-io-js-not-found - Jakub Martin


什么 快递版 你正在用吗?

API已经从Express 2.x更改为3.x,所以答案就在于 Socket.IO兼容性 的部分 从2.x迁移到3.x 维基:

Socket.IO的 .listen() 方法需要一个 http.Server 实例作为参数。
截至3.x,返回值 express() 不是 http.Server 实例。要让Socket.IO与Express 3.x一起使用,请确保手动创建并传递 http.Server 实例到Socket.IO的 .listen() 方法:

var app = express()
  , http = require('http')
  , server = http.createServer(app)
  , io = require('socket.io').listen(server);

server.listen(3000);

6
2018-01-19 18:07