Как настроить Webpack на работу с WebSocket?

Question

[Олег]

Есть проект на React. Хотим внедрить туда WebSocket, чтобы изменения из бэкенда подтягивались без перезагрузки страницы.

У меня задача пока настроить webpack так, чтобы он коннектился, например, сюда https://www.websocket.org/echo.html. Собственно вопрос, как это сделать?

В конфиге webpack кусок с devServer выглядит так:

devServer: {
        contentBase: path.resolve(__dirname, `./${folder}`),
        compress: true,
        port: 9000,
        host: '0.0.0.0',
        open: false,
        historyApiFallback: true,
        proxy: [{
            context: ['/api', '/dash'],
            target: 'url_нашего_сервера',
            changeOrigin: true,
            secure: true
        }]
    },

Comments

[Антон Швец]

взяли бы cra и не мучались
https://habr.com/ru/company/plarium/blog/326520/

Answer 1

[Олег]

Примерное решение:

devServer: {
    contentBase: path.resolve(__dirname, `./${folder}`),
    compress: true,
    port: 9000,
    host: '0.0.0.0',
    open: false,
    historyApiFallback: true,
    proxy: [
        {
            context: ['/api', '/dash'],
            target: 'https://${systemUrl}/',
            changeOrigin: true,
            secure: true
        },
        {
            context: ['/websocket'],
            target: `wss://${systemUrl}/websocket/`,
            changeOrigin: true,
            ws: true
        }
    ]
},