I am writing frontend on react for spring backend server and in the last days i am fighting with the issue with websockets. When i run both parts (front/back) locally everything works just fine without any error, but when i put them in docker containers then i get WebSocket connection to 'ws://localhost:9060/ws' failed: in browser and i get this:

[webpack-dev-server] [HPM] WebSocket error: Error [ERR_STREAM_WRITE_AFTER_END]: write after end
<e>     at _write (node:internal/streams/writable:489:11)
<e>     at Writable.write (node:internal/streams/writable:510:10)
<e>     at Sender.sendFrame (/app/node_modules/ws/lib/sender.js:561:20)
<e>     at Sender.close (/app/node_modules/ws/lib/sender.js:222:12)
<e>     at WebSocket.close (/app/node_modules/ws/lib/websocket.js:315:18)
<e>     at Receiver.receiverOnConclude (/app/node_modules/ws/lib/websocket.js:1162:18)
<e>     at Receiver.emit (node:events:518:28)
<e>     at Receiver.controlMessage (/app/node_modules/ws/lib/receiver.js:658:14)
<e>     at Receiver.getData (/app/node_modules/ws/lib/receiver.js:477:12)
<e>     at Receiver.startLoop (/app/node_modules/ws/lib/receiver.js:167:16) {
<e>   code: 'ERR_STREAM_WRITE_AFTER_END'
<e> } 

in frontend container logs. I thought that i should concretize host and i tried to add ( host: '0.0.0.0', ) but the error with ws://localhost... left. Then i tried to rename host as the name of container and i get the same error just as follows WebSocket connection to 'ws://cont-name:9060/ws' failed:. i tried to verify in the terminal of container if he hears host i specify in config and yes he does so but, another problem is that when i write host: 0.0.0.0 then in container i get ( Connecting to localhost:9060 ([::1]:9060) wget: can't connect to remote host: Connection refused ) and i get page with ( Connecting to 0.0.0.0:9060 (0.0.0.0:9060) Writing to stdout ) but when i change host on localhost i can get page with wget -O- http://localhost:9060 but wget -O- :9060 cant find anything and browser cant reach container and i get PAGE NOT FOUND. Part of config in webpack-dev.js -

devServer: {
      hot: true,
      static: {
        directory: './target/classes/static/',
      },
      host: '0.0.0.0',
      port: 9060,
      client: {
        webSocketURL: `ws://localhost:9060/ws`,
      },
      proxy: [
        {
          context: ['/api', '/services', '/management', '/v3/api-docs', '/h2-console', '/ws'],
          target: `http${options.tls ? 's' : ''}://l5backcont:8080`,
          secure: false,
          ws: true,
          changeOrigin: options.tls,
        },
      ],
      historyApiFallback: true,
    },

    stats: process.env.JHI_DISABLE_WEBPACK_LOGS ? 'none' : options.stats,
    plugins: [
      process.env.JHI_DISABLE_WEBPACK_LOGS
        ? null
        : new SimpleProgressWebpackPlugin({
            format: options.stats === 'minimal' ? 'compact' : 'expanded',
          }),
      new BrowserSyncPlugin(
        {
          https: options.tls,
          host: '0.0.0.0',
          port: 9000,
          proxy: {
            target: `http${options.tls ? 's' : ''}://l5backcont:${options.watch ? '8080' : '9060'}`,
            ws: true,
            proxyOptions: {
              changeOrigin: false, 
            },
          },
          socket: {
            clients: {
              heartbeatTimeout: 60000,
            },
          },
        },
        {
          reload: false,
        },
      ),

I am writing frontend on react for spring backend server and in the last days i am fighting with the issue with websockets. When i run both parts (front/back) locally everything works just fine without any error, but when i put them in docker containers then i get WebSocket connection to 'ws://localhost:9060/ws' failed: in browser and i get this:

[webpack-dev-server] [HPM] WebSocket error: Error [ERR_STREAM_WRITE_AFTER_END]: write after end
<e>     at _write (node:internal/streams/writable:489:11)
<e>     at Writable.write (node:internal/streams/writable:510:10)
<e>     at Sender.sendFrame (/app/node_modules/ws/lib/sender.js:561:20)
<e>     at Sender.close (/app/node_modules/ws/lib/sender.js:222:12)
<e>     at WebSocket.close (/app/node_modules/ws/lib/websocket.js:315:18)
<e>     at Receiver.receiverOnConclude (/app/node_modules/ws/lib/websocket.js:1162:18)
<e>     at Receiver.emit (node:events:518:28)
<e>     at Receiver.controlMessage (/app/node_modules/ws/lib/receiver.js:658:14)
<e>     at Receiver.getData (/app/node_modules/ws/lib/receiver.js:477:12)
<e>     at Receiver.startLoop (/app/node_modules/ws/lib/receiver.js:167:16) {
<e>   code: 'ERR_STREAM_WRITE_AFTER_END'
<e> } 

in frontend container logs. I thought that i should concretize host and i tried to add ( host: '0.0.0.0', ) but the error with ws://localhost... left. Then i tried to rename host as the name of container and i get the same error just as follows WebSocket connection to 'ws://cont-name:9060/ws' failed:. i tried to verify in the terminal of container if he hears host i specify in config and yes he does so but, another problem is that when i write host: 0.0.0.0 then in container i get ( Connecting to localhost:9060 ([::1]:9060) wget: can't connect to remote host: Connection refused ) and i get page with ( Connecting to 0.0.0.0:9060 (0.0.0.0:9060) Writing to stdout ) but when i change host on localhost i can get page with wget -O- http://localhost:9060 but wget -O- http://0.0.0.0:9060 cant find anything and browser cant reach container and i get PAGE NOT FOUND. Part of config in webpack-dev.js -

devServer: {
      hot: true,
      static: {
        directory: './target/classes/static/',
      },
      host: '0.0.0.0',
      port: 9060,
      client: {
        webSocketURL: `ws://localhost:9060/ws`,
      },
      proxy: [
        {
          context: ['/api', '/services', '/management', '/v3/api-docs', '/h2-console', '/ws'],
          target: `http${options.tls ? 's' : ''}://l5backcont:8080`,
          secure: false,
          ws: true,
          changeOrigin: options.tls,
        },
      ],
      historyApiFallback: true,
    },

    stats: process.env.JHI_DISABLE_WEBPACK_LOGS ? 'none' : options.stats,
    plugins: [
      process.env.JHI_DISABLE_WEBPACK_LOGS
        ? null
        : new SimpleProgressWebpackPlugin({
            format: options.stats === 'minimal' ? 'compact' : 'expanded',
          }),
      new BrowserSyncPlugin(
        {
          https: options.tls,
          host: '0.0.0.0',
          port: 9000,
          proxy: {
            target: `http${options.tls ? 's' : ''}://l5backcont:${options.watch ? '8080' : '9060'}`,
            ws: true,
            proxyOptions: {
              changeOrigin: false, 
            },
          },
          socket: {
            clients: {
              heartbeatTimeout: 60000,
            },
          },
        },
        {
          reload: false,
        },
      ),

• reactjs
• docker
• websocket

• Please do not upload images of code/data/errors. Can you edit the question to include a minimal reproducible example, making sure to include the code an error messages in plain text? – David Maze Commented 10 hours ago

1 Answer 1

the problem is definitely related to the backend because port 9060 is usually listened there