Transferring data from SocketIO to Vue.js

Question

Transferring data from SocketIO to Vue.js

Is there a way to effectively transfer data results received from socketIO to the Vue instance? Below is my current code implementation:

let socket = io();
let users;

socket.on('user-connected', (data) => {
    users = data.count;
});
socket.on('user-disconnected', (data) => {
    console.log(data.count);
});

new Vue({
    el: '#playersCounter',
    data: {
        playerCounter: users
    }
});

HTML:

<div class="d-flex justify-content-start" id="playersCounter">
    <p class="onlinePlayersCounter">Online: {{playerCounter}}</p>
</div>

Currently, I am not receiving any errors but the data is not being displayed as expected.

javascript vue.js socket.io

Answer 1

Answer №1

Here is a solution:

let connection = new WebSocket('ws://example.com/socket');

new Vue({
    el: '#onlineUsersCounter',
    data: {
        usersCount: totalUsers
    },
    created: function() {
        connection.onopen = function() {
            console.log('Connection opened');
        };

        connection.onmessage = function(event) {
            let response = JSON.parse(event.data);
            this.usersCount = response.count;
            console.log(response.count);
        };

        connection.onerror = function(error) {
            console.error('WebSocket Error: ' + error);
        };
  },
});

Answer 2

Here is a solution:

let connection = new WebSocket('ws://example.com/socket');

new Vue({
    el: '#onlineUsersCounter',
    data: {
        usersCount: totalUsers
    },
    created: function() {
        connection.onopen = function() {
            console.log('Connection opened');
        };

        connection.onmessage = function(event) {
            let response = JSON.parse(event.data);
            this.usersCount = response.count;
            console.log(response.count);
        };

        connection.onerror = function(error) {
            console.error('WebSocket Error: ' + error);
        };
  },
});

Transferring data from SocketIO to Vue.js

Answer №1

Similar questions

What is the best approach to send data to the parent when closing $mdDialog?

What is the most effective method for integrating additional CSS/JS libraries into a GitHub repository?

Using AngularJS, trigger an httpget request when the value in a textbox is changed

Animating transitions in a Vuetify data table

The provider for authentication, which is linked to the AuthenticationService and subsequently to the loginControl, is currently unidentified

How can you center the body of a webpage while using the zoom in and zoom out features in HTML5?

Unearthing the worth of the closest button that was clicked

Is the state of the React.js component empty?

Retrieving the passed argument variable and utilizing it as a key in a map

Experiencing difficulties with $watch in my Angular controller

Encountered issue post deploying Vue application on portal.Azure

JavaScript: Targeting elements by their tag name within a designated container

How to extract a variable from a mongoose find method in a Node.js application

The NextAuth file imported with the EmailProvider is currently not being utilized

Struggling to find your way around the header on my website? Let me give

Can Google Charts be integrated with $refs in VueJS?

Do not forget to implement Array.find when working with the useSWR hook in Next.js

Choose options according to a different select in VueJS Laravel

Issue with inconsistent error handling in Mui DateTimePicker and react-hook-form

In a Next.js application directory, how can you retrieve the router.asPath value within a function that utilizes the Next.js navigation feature?