Socket.io: Kesalahan saat membangun untuk WebPack

Saya juga tidak yakin bagaimana menambahkan perpustakaan socket.io-client ke aplikasi sisi klien saya untuk terhubung kembali ke server.

Saya mencoba memintanya seperti ini:

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

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

...dan saya mendapatkan kesalahan ini: TypeError: undefined is not an object (evaluating 'global.WebSocket') untuk fungsi anon.

Saya kebanyakan orang back-end jadi javascript sisi klien bukan setelan kuat saya.

Pembaruan: require("socket.io-client/socket.io") tampaknya berhasil, tetapi dengan peringatan yang menyarankan apa yang disebutkan di atas: 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 : lakukan saja require("socket.io-client") , Webpack akan menemukan sumber yang benar melalui entri package.json. Peringatan datang karena file tersebut dikemas untuk dimuat melalui tag <script> .

Tidak.

Alasan mengapa itu tidak berhasil bagi saya adalah karena saya menggunakan plugin untuk menyelesaikan modul Bower, yang tidak berfungsi sepenuhnya dengan baik pada kebutuhan bersarang (). Jadi yang saya lakukan adalah mengubah faktor itu.

Jika Anda menggunakan plugin bernama sesuatu seperti "bower-webpack-plugin" atau serupa, buang saja. solusi sebenarnya adalah ini:

var bowerProvider = webpack baru.ResolverPlugin([
webpack baru.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"]),
webpack baru.ResolverPlugin.DirectoryDescriptionFilePlugin(".bower.json", ["main"])
], ["normal", "pemuat"]);

Ini benar-benar terlihat canggung, setuju. Tetapi jika Anda membacanya beberapa kali, Anda akan menyadari bahwa itu mengubah cara modul diselesaikan, dan karenanya diperlukan.

Jika itu masih tidak berhasil, maka Anda bisa menggunakan alias modul.

Di dalam klien, perpustakaan debug dimuat seperti ini:

var debug = membutuhkan(„debug“)(…); // maaf mengutip, klien email saya payah.

Jadi Anda dapat menambahkan alias modul di webpack.config.js Anda:

// Tambahkan bagian alias ke dalam bagian penyelesaian konfigurasi.
modul.ekspor = {
menyelesaikan: {
alias: {
// Pastikan kompatibilitas dengan bootstrap asli
"debug$": path.join("node_modules","debug","index.js")
}
}
};

Jika itu masih tidak berhasil, beri tahu saya. :)

Apakah Anda menggunakan babel ?

Aku tidak. Saya beralih ke SocketCluster sementara itu sejak itu berhasil.

jadi solusi terbaik adalah?

import IO from 'socket.io-client'

harus bekerja dengan baik dengan webpack + babel

Ketika saya menggunakannya, saya pikir saya akan memanggil file index.js secara langsung. Tapi itu cukup lama... jadi saya tidak bisa memastikan.

Pikirkan ini bisa ditutup.

Saya masih mendapatkan kesalahan ini, saya rasa ini belum harus ditutup.

Saya memperbaikinya dengan menghapus socket.io-client dari npm dan menginstal melalui bower

Saya mengalami masalah yang sama ini. Saya tidak menggunakan bower. Apakah ada cara lain?

Anda dapat menggunakan alias di konfigurasi webpack Anda.
Atau pengembang SIO menemukan solusi yang lebih baik.

Saya menemukan masalah yang sama saat memperbarui ke
npm 3.3.9 webpack 1.12.13 socket.io-client 1.4.5

Memecahkan ini dengan menambahkan

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

Adakah yang punya solusi yang lebih baik?

@faller apa yang kita masukkan untuk root node? seperti di direktori publik atau apakah itu sesuatu dari file HTML?
Saya buruk jika itu pertanyaan yang buruk, tidak pernah menggunakan semua ini sebelumnya.

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

saya mendapatkan banyak kesalahan tetapi menggunakan require('socket.io/lib/socket.js') menyelesaikannya, tetapi sekarang saya mendapatkan kesalahan baru

kode panggilan
var socket = require('socket.io/lib/socket.js')('http://appdev:3000');

Saya juga mendapatkan kesalahan yang sama. Saya pikir saya berhasil menyadari apa yang terjadi.
Webpack menyelesaikan _only_ membutuhkan, tidak membutuhkan.resolve. Saya pikir masalahnya adalah ini, karena digunakan dalam file _lib/index.js_ sebagai berikut:

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

Ini adalah masalah untuk webpack, karena tidak seharusnya bekerja dengan arahan itu, bagaimana mungkin untuk melihat di sini .
Setelah saya memahami ini, saya melihat bahwa baris kode yang disebutkan di atas hanya berguna untuk fungsi yang menangani permintaan yang melayani /socket.io.js .
Karena fungsi ini sama sekali tidak berguna untuk aplikasi saya (saya hanya menggunakan require('modulename') , saya mengomentari baris di atas dan seluruh fungsi serve dalam file _lib/index.js_. Sekarang berfungsi seperti pesona.
Saya tidak tahu apakah ini harus dianggap sebagai bug atau tidak, tetapi butuh beberapa waktu untuk benar-benar memahami apa yang sedang terjadi dan bagaimana cara memperbaikinya.

Saya juga mendapatkan sejumlah masalah pembuatan webpack 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

Saya telah memodifikasi konfigurasi webpack saya untuk menyertakan
resolve: { alias: { 'socket.io-client': path.join( __dirname, 'node_modules', 'socket.io-client', 'socket.io.js' ) } }, , noparse pada klien, dan target: 'simpul'.

Tampaknya ada beberapa masalah berbeda di sini.. Sepertinya saya dapat menggabungkan klien dan server di sini , adakah yang bisa memeriksa contoh itu?

Saya mendapatkan kesalahan ini dengan Webpack 2.2 dan socket.io-client 1.7.2. Saya mencoba hampir semua yang tercantum di sini dan tidak ada yang berhasil. Akhirnya saya menghentikan kesalahan dengan menginstal modul debug ke node_modules, npm i debug -S dan mencantumkan 'debug' sebagai eksternal di konfigurasi webpack saya, externals: ['debug'], .

Ditutup oleh https://github.com/socketio/socket.io/pull/2828.

Hai, saya ingin membuka kembali masalah ini karena ini berfungsi seperti pesona untuk socket.io-client, tetapi tidak untuk server!

Jadi saya tidak dapat menggabungkan server NodeJS saya menggunakan socket.io dengan Webpack ! Saya harus meletakkan socket.io di "eksternal" webpack bersama dengan beberapa perpustakaan yang tidak berfungsi (termasuk webpack itu sendiri)

Lihat masalah terkait ini di Webpack dan Yargs :

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

@rgranger Ini adalah contoh bagaimana menggunakan webpack dan socket.io untuk server:

package.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"
      }
    ]
  }
};

server.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));
}

Contoh pembuatan Webpack untuk server: https://github.com/socketio/socket.io/tree/master/examples/webpack-build-server

Terima kasih banyak @Arbaoui-Mehdi, kunci untuk memperbaikinya adalah dengan menonaktifkan layanan socket.js klien.

@freemh kamu menyelamatkan hidupku bro

Saat menggunakan Webpack v3, saya baru saja melakukannya
npm install --save-dev uglifyjs-webpack-plugin@1
lalu gunakan saja UglifyJsPlugin(...) alih-alih webpack.optimize.UglifyJsPlugin({...})
ketahuilah bahwa opsi berubah.. Anda perlu menambahkan uglifyOptions di dalam objek..

ref: https://github.com/webpack-contrib/uglifyjs-webpack-plugin