How to use websocket in vue project

As web applications become more and more complex, real-time communication with the server is a must. Based on this, WebSocket came into being.

WebSocket is a technology that creates a real-time, two-way communication link between a web browser and a web server. In traditional HTTP requests, the client initiates the request and the server responds; but in WebSocket, the client and server can send and receive messages at the same time. This provides support for the real-time nature of our web applications.

Vue is one of the most popular front-end frameworks currently. It provides good support for componentization and data binding. In the Vue project, we can also use WebSocket to achieve real-time communication very easily.

Basic use of WebSocket

To use WebSocket in a Vue project, we need to introduce the WebSocket object. WebSocket objects can be obtained in Vue's life cycle hook function.

The following is a basic example of using WebSocket in Vue:

<template>
    <div>
        <h1>WebSocket Demo</h1>
        <p v-for="msg in messages">{{msg.text}}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            socket: null,
            messages: []
        }
    },
    mounted() {
        this.socket = new WebSocket('ws://localhost:8080');
        this.socket.onopen = () => {
            console.log('WebSocket connected');
        };
        this.socket.onmessage = event => {
            const message = JSON.parse(event.data);
            this.messages.push(message);
        };
    },
    beforeDestroy() {
        this.socket.close();
    }
}
</script>

In the above example, we created the WebSocket object in the mounted function of the Vue component and set the value when the WebSocket connection is successful. The callback function that is called when. In addition, a callback function is set up to be called when the WebSocket receives a message, and the message is stored in the data property of the Vue component. Finally, close the WebSocket connection in the beforeDestroy function of the Vue component.

Real-time update of WebSocket

In Vue, we can use calculated properties to achieve real-time update of data. Therefore, it is very convenient to use computed properties in our Vue components to represent the data received by WebSocket. Here is an example:

<template>
    <div>
        <h1>WebSocket Demo</h1>
        <p v-for="msg in messages">{{msg.text}}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            socket: null,
            messages: []
        }
    },
    mounted() {
        this.socket = new WebSocket('ws://localhost:8080');
        this.socket.onopen = () => {
            console.log('WebSocket connected');
        };
        this.socket.onmessage = event => {
            const message = JSON.parse(event.data);
            this.messages.push(message);
        };
    },
    beforeDestroy() {
        this.socket.close();
    },
    computed: {
        formattedMessages() {
            return this.messages.map(msg => {
                return {
                    text: msg.text.toUpperCase()
                }
            })
        }
    }
}
</script>

In the above example, we use the computed property formattedMessages to convert the received message to uppercase and add it to a new data property. Vue will automatically update the view to reflect these data changes.

Conclusion

WebSocket provides a convenient and reliable method to achieve real-time communication in Vue projects. In actual application development, we can also use other libraries, such as Socket.io, to help us achieve more efficient WebSocket communication.

The above is the detailed content of How to use websocket in vue project. For more information, please follow other related articles on the PHP Chinese website!