javascript - 浏览器如何知道在哪里可以找到 socket.io？

Question

<script src="/socket.io/socket.io.js"></script>

浏览器如何知道如何从该引用中获取 socket.io？上次检查时，我的公用文件夹中没有 socket.io.js 文件。

更新:Socket.io 工作正常，我只是好奇它是如何使用这个神秘的路由来获取客户端 socket.io 代码的。

感谢广泛的回答:)

Answer 1

实际上，这里有一些轻微的魔力。当您安装服务器端 socket.io 库并通过将其传递给您的网络服务器来对其进行初始化时，它会自动将路由处理程序安装到您的网络服务器中，以处理对 /socket.io/的任何请求socket.io.js 并且它将提供一个 socket.io.js 文件，该文件是在服务器端 socket.io 安装目录的深处为客户端设计的，每当特定的 /socket.io/socket.io.js 请求路由。

因此，该文件实际上并非来自所请求的确切路径(这只是为其安装处理程序的路径)。该文件实际上来自服务器端安装目录(在 node_modules/socket.io 内)。这样做的好处是，由于 socket.io 的服务器端实现和客户端实现都来自完全相同的 NPM 安装，因此它们始终保证是相同的版本，因此您永远不会遇到问题客户端和服务器版本不同步。

作为引用，这里是 socket.io server code 的相关部分服务于 /socket.io/socket.io.js:

var clientSource = read(require.resolve('socket.io-client/socket.io.js'), 'utf-8');

Server.prototype.serve = function(req, res){
  var etag = req.headers['if-none-match'];
  if (etag) {
    if (clientVersion == etag) {
      debug('serve client 304');
      res.writeHead(304);
      res.end();
      return;
    }
  }

  debug('serve client source');
  res.setHeader('Content-Type', 'application/javascript');
  res.setHeader('ETag', clientVersion);
  res.writeHead(200);
  res.end(clientSource);
};

/**
 * Attaches the static file serving.
 *
 * @param {Function|http.Server} http server
 * @api private
 */

Server.prototype.attachServe = function(srv){
  debug('attaching client serving req handler');
  var url = this._path + '/socket.io.js';
  var evs = srv.listeners('request').slice(0);
  var self = this;
  srv.removeAllListeners('request');
  srv.on('request', function(req, res) {
    if (0 === req.url.indexOf(url)) {
      self.serve(req, res);
    } else {
      for (var i = 0; i < evs.length; i++) {
        evs[i].call(srv, req, res);
      }
    }
  });
};