Socket.io: 为 WebPack 构建时出错

我也不确定如何将 socket.io-client 库添加到我的客户端应用程序中以连接回服务器。

我试图像这样要求它：

var io = require("socket.io-client");

var socket = io("http://localhost:3000");
socket.on("data", function(data) {
    console.log("data event", data);
});

...我得到这个错误： TypeError: undefined is not an object (evaluating 'global.WebSocket')用于匿名函数。

我主要是后端人员，所以客户端 javascript 不是我的强项。

更新： require("socket.io-client/socket.io")似乎奏效了，但带有提示上述内容的警告： This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.

@johnelliott ：只需执行require("socket.io-client") ，Webpack 将通过 package.json 条目找到正确的源。 出现警告是因为该文件被打包为通过<script>标记加载。

没有。

它对我不起作用的原因是我正在使用一个插件来解析 Bower 模块，它在嵌套的 require() 上表现不佳。 所以我所做的就是改变这个因素。

如果您使用的是名为“bower-webpack-plugin”或类似名称的插件，请将其转储。 实际的解决方案是这样的：

var bowerProvider = new webpack.ResolverPlugin([
新的 webpack.ResolverPlugin.DirectoryDe​​scriptionFilePlugin("bower.json", ["main"]),
new webpack.ResolverPlugin.DirectoryDe​​scriptionFilePlugin(".bower.json", ["main"])
], ["正常", "装载机"]);

完全看起来很尴尬，同意。 但是如果你读了几次，你会意识到它改变了模块的解析方式，因此是必需的。

如果这仍然不起作用，那么您可以使用模块别名。

在客户端中，调试库的加载方式如下：

var debug = require(„debug“)(...); // 请原谅引用，我的邮件客户端很烂。

所以你可以在你的 webpack.config.js 中添加一个模块别名：

// 将别名部分添加到配置的解析部分。
模块.exports = {
解决： {
别名：{
// 确保与原始引导程序的兼容性
"debug$": path.join("node_modules","debug","index.js")
}
}
};

如果这仍然不起作用，请告诉我。 :)

你在使用babel吗？

我不是。 在此期间，我切换到了 SocketCluster，因为它起作用了。

所以最好的解决方案是？

import IO from 'socket.io-client'

应该可以正常使用webpack + babel

当我使用它时，我想我直接调用了 index.js 文件。 但它是很久以前的......所以我不能确定。

认为这可以关闭。

我仍然收到此错误，我认为这还不应该关闭。

我通过从 npm 卸载 socket.io-client 并通过 bower 安装来解决此问题

我有同样的问题。 我不使用凉亭。 还有其他方法吗？

你可以在 webpack 配置中使用别名。
或者 SIO 开发人员找到了更好的解决方案。

我在更新到时遇到了同样的问题
npm 3.3.9 webpack 1.12.13 socket.io-client 1.4.5

通过添加解决这个问题

    resolve: {
        alias: {
            'socket.io-client': path.join( nodeRoot, 'socket.io-client', 'socket.io.js' )
        }
    },
    module: {
        noParse: [ /socket.io-client/ ]
    }

有人有更好的解决方案吗？

@faller我们为节点根放置了什么？ 就像在公共目录中一样，还是来自 HTML 文件？
如果这是一个不好的问题，我的不好，以前从未使用过任何一个。

@kennetpostigo var nodeRoot = path.join( __dirname, 'node_modules' ),

我遇到了很多错误，但使用require('socket.io/lib/socket.js')解决了它，但现在我遇到了一个新错误

调用代码
var socket = require('socket.io/lib/socket.js')('http://appdev:3000');

我也遇到了同样的错误。 我想我设法意识到发生了什么。
Webpack 解析_only_ requires，而不是requires.resolve。 我认为问题是这样的，因为它在 _lib/index.js_ 文件中使用如下：

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

这对 webpack 来说是个问题，因为它不应该与那个指令一起工作，怎么可能在这里看到。
一旦我理解了这一点，我就会发现上面提到的代码行只对处理服务/socket.io.js的请求的函数有用。
由于这个功能对我的应用程序完全没用（我只使用require('modulename') ，我在 _lib/index.js_ 文件中评论了上面的行和整个serve函数。现在它就像一个魅力。
我不知道这是否必须被视为一个错误，但需要一些时间才能真正了解发生了什么以及如何修复它。

我也遇到了一些 socket.io webpack 构建问题。

ERROR in ./~/socket.io/lib/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' /Users/mkozachek/development/webserver_development/node_modules/socket.io-client/socket.io.js in /Users/mkozachek/development/webserver_development/node_modules/socket.io/lib
 @ ./~/socket.io/lib/index.js 9:13-40


ERROR in ./~/socket.io/lib/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' /Users/mkozachek/development/webserver_development/node_modules/socket.io-client/socket.io.js/package in /Users/mkozachek/development/webserver_development/node_modules/socket.io/lib
 @ ./~/socket.io/lib/index.js 10:20-55

ERROR in ./~/socket.io/lib/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' /Users/mkozachek/development/webserver_development/node_modules/socket.io-client/socket.io.js/dist/socket.io.min.js in /Users/mkozachek/development/webserver_development/node_modules/socket.io/lib
 @ ./~/socket.io/lib/index.js 101:24-81

我已经修改了我的 webpack 配置以包含
resolve: { alias: { 'socket.io-client': path.join( __dirname, 'node_modules', 'socket.io-client', 'socket.io.js' ) } }, ，在客户端不解析，目标：'node'。

这里似乎有几个不同的问题..似乎我可以在这里捆绑客户端和服务器，任何人都可以检查那个例子吗？

我在使用 Webpack 2.2 和 socket.io-client 1.7.2 时遇到了这个错误。 我几乎尝试了此处列出的所有内容，但没有任何效果。 最终，我通过将调试模块安装到 node_modules 中npm i debug -S并在我的 webpack 配置externals: ['debug'],中将“调试”列为外部来停止错误。

由https://github.com/socketio/socket.io/pull/2828 关闭。

嗨，我想重新打开这个问题，因为它对 socket.io-client 来说就像一个魅力，但对服务器来说却不是！

所以我不能使用 socket.io 和 Webpack 捆绑我的 NodeJS 服务器！ 我必须将 socket.io 以及一些不起作用的库（包括 webpack 本身）放在 webpack 的“外部”中

在 Webpack 和 Yargs 中查看这些相关问题：

https://github.com/webpack/webpack/issues/1434
https://github.com/yargs/yargs/issues/312

@rgranger这是一个关于如何为服务器使用webpack和socket.io的示例：

包.json

{
  "name": "whatever",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "John Doe",
  "license": "ISC",
  "dependencies": {
    "brfs": "^1.4.3",
    "bufferutil": "^3.0.0",
    "socket.io": "^1.7.3",
    "transform-loader": "^0.2.4",
    "utf-8-validate": "^3.0.1"
  },
  "devDependencies": {
    "json-loader": "^0.5.4",
    "null-loader": "^0.1.1",
    "webpack": "^2.4.1"
  }
}

webpack.config.js

const path    = require("path");

module.exports = {
  entry: './server.js',
  target: 'node',
  output: {
    path: __dirname,
    filename: 'bundle.server.js'
  },
  module: {
    loaders: [
      {
        test: /(\.md|\.map)$/,
        loader: 'null-loader'
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.js$/,
        exclude: '/node_modules/',
        loader: "transform-loader?brfs"
      }
    ]
  }
};

服务器.js

const server = require('http').createServer();
const io = require('socket.io')(server, {
  // serveClient: false // do not serve the client file, in that case the brfs loader is not needed
});
const port = process.env.PORT || 3000;

io.on('connect', onConnect);
server.listen(port, () => console.log('server listening on port ' + port));

function onConnect(socket){
  console.log('connect ' + socket.id);

  socket.on('disconnect', () => console.log('disconnect ' + socket.id));
}

服务器的示例 Webpack 构建： https ://github.com/socketio/socket.io/tree/master/examples/webpack-build-server

非常感谢@Arbaoui-Mehdi，解决此问题的关键是禁用为客户端 socket.js 提供服务。

@freemh你救了我的命兄弟

使用 Webpack v3 时，我只是做了
npm install --save-dev uglifyjs-webpack-plugin@1
然后只需使用UglifyJsPlugin(...)而不是webpack.optimize.UglifyJsPlugin({...})
请注意选项会更改..您需要在对象中添加 uglifyOptions ..

参考： https ://github.com/webpack-contrib/uglifyjs-webpack-plugin