Блог

Главная - Вопросы по программированию - Socketio не работает с webpack, но работает с CDN

Socketio не работает с webpack, но работает с CDN

#webpack #socket.io #feathersjs

Вопрос:

У меня есть приложение feathersjs, которое использует socketio для транспортного протокола. На стороне моего клиента я использую webpack для связывания приложения, но у меня возникли проблемы с подключением клиента socketio к серверу. Я не уверен, что это проблема с Webpack, socketio или feathersjs.

Проблема в том, что при комплектации socketio с webpack клиент socket.io всегда отключается после 5000 мс. Но если я использую CDN-версию socketio, она отлично подключается.

 // Timeout when imported in app.js
import io from 'socket.io-client';

// Connects fine when using a CDN in template.html
<script src="//unpkg.com/socket.io-client@^2.3.0/dist/socket.io.js"></script>

Я создал очень простой демонстрационный репозиторий, показывающий мою проблему:

https://github.com/jrj2211/feathers-socketio-issue

Если вы запустите его с помощью «npm start» и перейдете к «localhost:3030», при нажатии кнопки «Вход» появится ошибка «Превышен тайм-аут 5000 мс при вызове»Создать при аутентификации».

введите описание изображения здесь

Входя в app/app.js файл и закомментируйте «импорт ввода-вывода из » socket.io-клиента»;» и перезапуск приложения покажет «успех».

Я проверил, что как CDN, так и npm версии socketio.client являются 2.3.

Исходя из этого, я полагаю, что это как-то связано с настройкой моего веб-пакета, но я не уверен, как это исправить.

Соответствующий код:

app.js

 import feathers from '@feathersjs/client';
import io from 'socket.io-client';
import auth from '@feathersjs/authentication-client';

const app = feathers();
app.io = io();

app.configure(feathers.socketio(app.io));
app.configure(feathers.authentication());

export default {
  client: app,
}

template.html

 <html theme='light'>
  <head>
    <meta charset="utf-8">
    <title>ZyPhox MRP</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,300;1,400amp;display=swap" rel="stylesheet">
    <base href="/" target="_blank">

    <script src="//unpkg.com/socket.io-client@^2.3.0/dist/socket.io.js"></script>

  </head>
  <body>
    <div class='message'></div>
    <input name='username' type='text' placeholder='Username'>
    <input name='password' type='password' placeholder='Password'>
    <input name='signin' type='submit' value='Signin'>
  </body>
</html>

webpack.common.js

 const webpack = require('webpack');
const path = require('path');

// Plugins
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  mode: "development",
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: '[name].js',
  },
  entry: {
    app: path.resolve(__dirname, 'app', 'index.js'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './app/template.html',
      filename: 'index.html',
    }),
  ],
  module: {
    rules: [
      {
        test: /.m?js/,
        resolve: {
          fullySpecified: false
        }
      },
      {
        test: /.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /.jsx?$/,
        exclude: /node_modules(/|\)(?!(@feathersjs|debug))/,
        loader: 'babel-loader'
      },
      {
        test: /.js$/,
        enforce: 'pre',
        use: ['source-map-loader'],
      },
    ],
  },
  resolve: {
    modules: [path.resolve(__dirname, './app/'), path.resolve('./node_modules')],
  },
};

Ответ №1:

Вам необходимо убедиться, что socket.io-client версия, которую вы установили (и сохранили package.json ), соответствует версии сервера. Для перьев 4 это должно быть ^2.3.0 (как вы использовали в CDN), для перьев 5 это должно быть ^3.0.0 или позже. Так как в сокете происходят критические изменения.io несоответствие версий приведет только к тайм-ауту.

Комментарии:

1. Я убедился, что версия в папке node_modules равна 2.3.0, и проверка различий в предварительно скомпилированной библиотеке в папке dist идентична версии в unpkg. Это происходит только при импорте через webpack, который истекает по времени, поэтому я предполагаю, что это должно быть связано с тем, как я настроил webpack. Я дважды начинал новые проекты, чтобы попытаться заставить это работать, и каждый раз у меня возникает эта проблема.

Метки: ,