• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

206
Views
Vue + Websockets: Get data from a websocket message and pass it to the Application State

It is my first time working with Websockets and I'm struggling trying to get a property from the websocket message and pass it to the state of my application. I'm connecting to the websocket just fine, getting the data from the websocket and pass it to a variable but then I realize that when I try to pass that data to a state property it won't update on real time.

All the following code is on the App.vue file:

I'm just using a button to test the websocket connection and then sending a message to parse the websocket payload:

        <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>

Then on the App in vue I have the websockect connection (connection) and the connectionId (this is the id that I'm trying to get from the websocket):

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

Then on the vue created lifecycle hook I implement the connection to the websocket like this:

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
    }
},

I had problems with the "this" scope inside the this.connection.onmessage function, hence the:

const v = this

So with v.connectionId = jsonObject.connectionId I'm trying to pass that data from the websocket to my app state, and this is not working or at least not working as expected.

What happens is I can see all the logs and everything working fine (Handshake, etc), but when I check the application state with the Vue devtools the "connectionId" property on the state applications is not being update in real time BUT (and this is really weird to me) whenever I click the App component on the devtools then the "coonectionId" property updates.

I click the button, the state property won't update:

enter image description here

Then when I click "App" on the devtools it will immediately update the value:

enter image description here

Will really appreciate any help.

almost 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error