Correct way to connect to websocket using Kotlin/JS - kotlin

Question

I've got a Kotlin/JS project (version 1.6.21) and I'm trying to connect to a Websocket backend, both when running locally and in production.
(UPDATE I also get the same error with Kotlin/JS 1.7.0)
If I hardcode the websocket URL
val ws = WebSocket("ws://localhost:12080/ws")
it works, but obviously that isn't suitable for multiple environments.
I've followed another answer and created a helper function to take the window.location.href (http://localhost:3000) and transform it to ws://localhost:3000/ws.
import kotlinx.browser.window
val websocketServerUrl: String
get() = window.location.href
.replace("http://", "ws://")
.replace("https://", "wss://") +
"ws"
I can see that this works correctly.
However, when I develop locally the websocket server is running on a different port: http://localhost:12080. As I understand the solution to this is to use 'Webpack Dev Server' to create a proxy. I've done this in my Gradle settings.
// build.gradle.kts
kotlin {
js(IR) {
browser {
runTask {
outputFileName = "main.bundle.js"
sourceMaps = false
devServer = KotlinWebpackConfig.DevServer(
open = false,
port = 3000,
proxy = mutableMapOf(
"/ws" to mapOf(
"target" to "http://localhost:12080",
"secure" to false,
"ws" to true,
"changeOrigin" to true,
),
),
static = mutableListOf("$buildDir/processedResources/js/main")
)
}
}
binaries.executable()
}
}
However I this doesn't work. In the browser log I see an error
WebSocket connection to 'ws://localhost:3000/ws' failed: Invalid frame header
WebSocketClient # WebSocketClient.js:18
initSocket # socket.js:21
eval # socket.js:40
And in the network tab I can see the 'ws' connection repeatedly fails
{"type":"hot"} 14 19:08:56.913
{"type":"liveReload"} 21 19:08:56.913
{"type":"overlay","data":true} 30 19:08:56.913
{"type":"hash","data":"9f9f3c947008c06acba0"} 45 19:08:56.913
{"type":"ok"} 13 19:08:56.913
Invalid frame header N/A 19:08:56.915
In the application log for the frontend I can see a repeated error
<i> [webpack-dev-server] [HPM] Upgrading to WebSocket
<e> [webpack-dev-server] [HPM] WebSocket error: Error: read ECONNRESET
<e> at TCP.onStreamRead (node:internal/stream_base_commons:220:20) {
<e> errno: -4077,
<e> code: 'ECONNRESET',
<e> syscall: 'read'
<e> }
package.json
This is the package.json that Kotlin/JS generates
{
"name": "my-project",
"version": "0.0.1",
"main": "my-project.js",
"types": "my-project.d.ts",
"devDependencies": {
"webpack": "5.69.1",
"webpack-cli": "4.10.0",
"format-util": "1.0.5",
"webpack-dev-server": "4.7.4",
"source-map-loader": "3.0.1"
},
"dependencies": {},
"peerDependencies": {},
"optionalDependencies": {},
"bundledDependencies": []
}
What's the correct way to set up a websocket connection?