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') for anon function.

나는 주로 백엔드 사람이므로 클라이언트 측 자바 스크립트는 내 강점이 아닙니다.

업데이트: 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> 태그를 통해 로드되도록 패키지화되었기 때문에 발생합니다.

아니요.

그것이 작동하지 않는 이유는 중첩된 require()에서 완전히 제대로 작동하지 않는 Bower 모듈을 해결하기 위해 플러그인을 사용하고 있었기 때문입니다. 그래서 제가 한 것은 그 요소를 바꾸는 것이었습니다.

"bower-webpack-plugin" 또는 이와 유사한 플러그인을 사용 중이라면 버리십시오. 실제 솔루션은 다음과 같습니다.

var bowerProvider = 새로운 webpack.ResolverPlugin([
새로운 webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["메인"]),
새로운 webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(".bower.json", ["메인"])
], ["정상", "로더"]);

완전히 어색해 보입니다. 동의합니다. 하지만 몇 번이고 읽어보면 모듈이 해결되고 필요한 방식이 변경된다는 것을 알게 될 것입니다.

그래도 작동하지 않으면 모듈 별칭을 사용할 수 있습니다.

클라이언트 내에서 디버그 라이브러리는 다음과 같이 로드됩니다.

var 디버그 = 요구("디버그")(…); // 인용을 실례합니다. 제 메일 클라이언트는 형편없습니다.

따라서 webpack.config.js에 모듈 별칭을 추가할 수 있습니다.

// 구성의 resolve 섹션에 alias 섹션을 추가합니다.
module.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를 통해 설치하여 이 문제를 해결했습니다.

나는이 같은 문제가 있습니다. 저는 바우처를 사용하지 않습니다. 다른 방법이 있습니까?

웹팩 구성에서 별칭을 사용할 수 있습니다.
또는 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은 require.resolve가 아닌 _only_ 필요를 해결합니다. 다음과 같이 _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 웹팩 빌드 문제도 발생합니다.

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

다음을 포함하도록 웹팩 구성을 수정했습니다.
resolve: { alias: { 'socket.io-client': path.join( __dirname, 'node_modules', 'socket.io-client', 'socket.io.js' ) } }, , 클라이언트의 noparse 및 대상: '노드'.

여기에 몇 가지 다른 문제가 있는 것 같습니다. 여기 에서 클라이언트와 서버를 모두 묶을 수 있었던 것 같습니다. 누구든지 그 예를 확인할 수 있습니까?

Webpack 2.2 및 socket.io-client 1.7.2에서 이 오류가 발생했습니다. 여기에 나열된 거의 모든 것을 시도했지만 아무 것도 작동하지 않았습니다. 결국 나는 디버그 모듈을 node_modules, npm i debug -S 에 설치하고 'debug'를 내 webpack 구성 externals: ['debug'], 에 외부로 나열하여 오류를 중지했습니다.

폐쇄 https://github.com/socketio/socket.io/pull/2828.

안녕하세요, socket.io-client에서는 매력처럼 작동하지만 서버에서는 작동하지 않기 때문에 이 문제를 다시 열고 싶습니다!

따라서 socket.io를 Webpack과 함께 사용하여 NodeJS 서버를 번들로 묶을 수 없습니다! 나는 작동하지 않는 몇 가지 라이브러리와 함께 웹팩의 "외부"에 socket.io를 넣어야 합니다(웹팩 자체 포함)

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"
  }
}

웹팩.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
그런 다음 $ webpack.optimize.UglifyJsPlugin({...}) UglifyJsPlugin(...) 를 사용하십시오.
옵션이 변경된다는 점에 유의하십시오. 개체 내부에 uglifyOptions를 추가해야 합니다.

참조: https://github.com/webpack-contrib/uglifyjs-webpack-plugin