How to correctly setup devServer for WebSocket proxying in a vue-cli app

Question

I have a Node.JS server running at http://localhost:8080 with 2 routes:

"/": Serves /public/index.html.
"/rest": Returns { ok: true }.

This server is also running a Websocket connection on the same port. Inside index.html I connect to the server with const socket = new WebSocket("ws://" + window.location.host).

When I run this server and visit http://localhost:8080 the following works:

Index is served: Yes ✅
The JSON is returned: Yes ✅
WebSocket messaging: Yes ✅

Additionally, I am also running a vue-cli app at http://localhost:8079 in development mode with the following vue.config.js configuration:

...
devServer: {
  port: 8079,
  "/": {
    target: "http://localhost:8080/",
    ws: true
  },
}

When I run this app and visit http://localhost:8079 the following happens:

Index is served: Yes ✅, it means the proxy is working for this route.
The JSON is returned: Yes ✅, it means the proxy is working for this route.
WebSockets messaging: No ❌, I get the error "WebSocket connection to 'ws://localhost:8079/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED"

What I am doing wrong? How can I fix it?

As you can see I have included ws: true which is used to proxy WebSocket connections as well.

Viktor Varga · Accepted Answer · 2021-12-08 08:03:44Z

5

I have the following in the vue.config.js:

  devServer: {
    proxy: {
      '^/': {
        target: 'http://localhost:8089',
        ws: true,
        changeOrigin: true
      }
    }
  }

The websocket backend runs on port 8089. All ws traffic proxied to the backend.

answered Dec 8, 2021 at 8:03

Viktor Varga

591 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tmslnz · Accepted Answer · 2024-04-29 16:46:26Z

0

Tip:

To get protocol/hostname/port from browser use

webSocketURL: 'auto://0.0.0.0:0/ws'

https://webpack.js.org/configuration/dev-server/#devserverserver

edited Apr 29, 2024 at 16:46

tmslnz

1,8132 gold badges15 silver badges25 bronze badges

answered Apr 26, 2024 at 10:21

Ádám Tóth

1

Collectives™ on Stack Overflow

How to correctly setup devServer for WebSocket proxying in a vue-cli app

What I am doing wrong? How can I fix it?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

What I am doing wrong? How can I fix it?

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related