I have a Stomp client to do websocket communication with. To avoid hardcoding the URL to the websocket broker server I’d like to use a proxy.
I use http-proxy (especially the NuxtJS module nuxt-proxy) in this case. Here is my configuration for it:
// nuxt.config.js
proxy: {
'/websocket': {
target: 'ws://localhost:1001/dispatcher',
ws: true
}
},
I am using the Stomp client the following way:
// stomp client logic
this.client = new Client()
this.client.brokerURL = 'websocket'
if (!this.debug) {
this.client.debug = () => {
}
}
this.client.onConnect = (_: IFrame) => {
connectedCallback()
console.debug('websocket connection established')
resolve()
}
this.client.onStompError = (frame: IFrame) => {
console.error('Broker reported error: ' + frame.headers.message)
console.error('Additional details: ' + frame.body)
}
this.client.activate()
When testing the whole I see the following error:
Uncaught (in promise) DOMException: Failed to construct 'WebSocket': The URL 'websocket' is invalid.
at Client._createWebSocket (webpack-internal:///./node_modules/@stomp/stompjs/esm6/client.js:286:25)
at Client.eval (webpack-internal:///./node_modules/@stomp/stompjs/esm6/client.js:216:36)
at Generator.next (<anonymous>)
at fulfilled (webpack-internal:///./node_modules/@stomp/stompjs/esm6/client.js:9:58)
_createWebSocket @ client.js?453e:281
eval @ client.js?453e:211
fulfilled @ client.js?453e:4
Promise.then (async)
step @ client.js?453e:6
eval @ client.js?453e:7
__awaiter @ client.js?453e:3
_connect @ client.js?453e:183
activate @ client.js?453e:180
eval @ websocket.ts?c9d7:32
_callee$ @ websocket.ts?c9d7:14
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:294
eval @ runtime.js?96cf:119
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
connect @ websocket.ts?c9d7:5
_callee$ @ GameServer.ts?226d:24
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:294
eval @ runtime.js?96cf:119
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
connect @ GameServer.ts?226d:16
create @ BootScene.ts?536d:48
create @ phaser.js?d4ef:100338
loadComplete @ phaser.js?d4ef:100250
emit @ phaser.js?d4ef:1908
loadComplete @ phaser.js?d4ef:196794
fileProcessComplete @ phaser.js?d4ef:196760
onProcessComplete @ phaser.js?d4ef:4961
data.onload @ phaser.js?d4ef:19311
load (async)
onProcess @ phaser.js?d4ef:19307
nextFile @ phaser.js?d4ef:196694
onLoad @ phaser.js?d4ef:4890
load (async)
XHRLoader @ phaser.js?d4ef:122925
load @ phaser.js?d4ef:4855
eval @ phaser.js?d4ef:196648
each @ phaser.js?d4ef:41031
checkLoadQueue @ phaser.js?d4ef:196634
start @ phaser.js?d4ef:196584
bootScene @ phaser.js?d4ef:100227
start @ phaser.js?d4ef:100926
bootQueue @ phaser.js?d4ef:99971
emit @ phaser.js?d4ef:1926
texturesReady @ phaser.js?d4ef:162728
emit @ phaser.js?d4ef:1926
updatePending @ phaser.js?d4ef:102052
emit @ phaser.js?d4ef:1907
image.onload @ phaser.js?d4ef:102182
load (async)
addBase64 @ phaser.js?d4ef:102174
boot @ phaser.js?d4ef:102031
emit @ phaser.js?d4ef:1926
boot @ phaser.js?d4ef:162713
DOMContentLoaded @ phaser.js?d4ef:91974
Game @ phaser.js?d4ef:162673
IonPhaser.initializeGame @ ion-phaser.entry.js?af4d:19
connectedCallback @ ion-phaser.entry.js?af4d:50
safeCall @ index-53dab568.js?8203:233
fireConnectedCallback @ index-53dab568.js?8203:436
initializeComponent @ index-53dab568.js?8203:405
await in initializeComponent (async)
connectedCallback @ index-53dab568.js?8203:475
eval @ index-53dab568.js?8203:539
jmp @ index-53dab568.js?8203:9
connectedCallback @ index-53dab568.js?8203:539
insertBefore @ vue.runtime.esm.js?2b0e:5753
insert @ vue.runtime.esm.js?2b0e:6083
createElm @ vue.runtime.esm.js?2b0e:6002
updateChildren @ vue.runtime.esm.js?2b0e:6260
patchVnode @ vue.runtime.esm.js?2b0e:6363
patch @ vue.runtime.esm.js?2b0e:6526
Vue._update @ vue.runtime.esm.js?2b0e:3963
updateComponent @ vue.runtime.esm.js?2b0e:4075
get @ vue.runtime.esm.js?2b0e:4495
run @ vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4326
eval @ vue.runtime.esm.js?2b0e:1989
flushCallbacks @ vue.runtime.esm.js?2b0e:1915
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1942
nextTick @ vue.runtime.esm.js?2b0e:1999
queueWatcher @ vue.runtime.esm.js?2b0e:4418
update @ vue.runtime.esm.js?2b0e:4560
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
proxySetter @ vue.runtime.esm.js?2b0e:4644
onSuccessfulLogin @ index.vue?0f48:26
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
invoker @ vue.runtime.esm.js?2b0e:2188
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
Vue.$emit @ vue.runtime.esm.js?2b0e:3903
_callee$ @ login.vue?ef3c:42
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:294
eval @ runtime.js?96cf:119
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
login @ login.vue?ef3c:34
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
invoker @ vue.runtime.esm.js?2b0e:2188
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
Vue.$emit @ vue.runtime.esm.js?2b0e:3903
submit @ vuetify.js?ce5b:16249
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
invoker @ vue.runtime.esm.js?2b0e:2188
original._wrapper @ vue.runtime.esm.js?2b0e:6961
Show 5 more frames
I understand the error however I have no idea how I can use a proxy and the Stomp Client at the same time. I can’t use the ws:// protocol in the Stomp client because I would not trigger the proxy that way (at least that’s what I think)
Any ideas?