Es la primera vez que trabajo con Websockets y tengo problemas para obtener una propiedad del mensaje websocket y pasarla al estado de mi aplicación. Me estoy conectando bien al websocket, obtengo los datos del websocket y los paso a una variable, pero luego me doy cuenta de que cuando trato de pasar esos datos a una propiedad estatal, no se actualizará en tiempo real.

Todo el siguiente código está en el archivo App.vue:

Solo estoy usando un botón para probar la conexión websocket y luego enviar un mensaje para analizar la carga útil websocket:

 <section id="Websocket" class="mt-6"> <h2 class="text-2xl font-bold mb-2 text-gray-700"> Testing The Rubiko Websocket </h2> <BaseButton buttonType="btnPrimary" v-on:click="sendMessage('Hello World')" >Send Message</BaseButton > </section>

Luego, en la aplicación en vue, tengo la conexión websockect (conexión) y el ID de conexión (esta es la identificación que estoy tratando de obtener del websocket):

 data() { return { connection: null, connectionId: '', } },

Luego, en el enlace del ciclo de vida creado por vue, implemento la conexión al websocket de esta manera:

 created() { console.log('Starting connection to WebSocket Server') this.connection = new WebSocket('wss://ws.xxxxx.io') const v = this this.connection.onopen = function (event) { console.log(event) console.log( 'Successfully connected to the Websocket server...' ) } this.connection.onmessage = function (event) { console.log(event) let jsonObject = JSON.parse(event.data) v.connectionId = jsonObject.connectionId } },

Tuve problemas con el alcance "este" dentro de la función this.connection.onmessage, por lo tanto:

 const v = this

Entonces, con v.connectionId = jsonObject.connectionId, estoy tratando de pasar esos datos del websocket al estado de mi aplicación, y esto no funciona o al menos no funciona como se esperaba.

Lo que sucede es que puedo ver todos los registros y todo funciona bien (Handshake, etc.), pero cuando verifico el estado de la aplicación con Vue devtools, la propiedad "connectionId" en las aplicaciones de estado no se actualiza en tiempo real PERO (y esto es realmente extraño para mí) cada vez que hago clic en el componente de la aplicación en las herramientas de desarrollo, la propiedad "coonectionId" se actualiza.

Hago clic en el botón, la propiedad estatal no se actualizará:

Luego, cuando hago clic en "Aplicación" en las herramientas de desarrollo, actualizará inmediatamente el valor:

Realmente apreciaré cualquier ayuda.