Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to use websocket in vue". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use websocket in vue" can help you solve the problem.

1. Create a new websocket.js file / / import {showInfoMsg, showErrorMsg} from'@ / utils/popInfo'import ElementUI from 'element-ui';function initWebSocket (e) {console.log (e) const wsUri = WS_API + "/ webSocket/" + e; this.socket = new WebSocket (wsUri) / / the this in this file all point to vue this.socket.onerror = webSocketOnError; this.socket.onmessage = webSocketOnMessage; this.socket.onclose = closeWebsocket } function webSocketOnError (e) {ElementUI.Notification ({title:', message: "WebSocket connection error" + e, type: 'error', duration: 0,});} function webSocketOnMessage (e) {const data = JSON.parse (e.data) Console.log (data.msgType = = "INFO", data.msgType = "INFO") if (data.msgType = "INFO") {ElementUI.Notification ({title:', message: data.msg, type: 'success', duration: 3000,}) } else if (data.msgType = = "ERROR") {ElementUI.Notification ({title:', message: data.msg, type: 'error', duration: 0,}) }} / / close websiocketfunction closeWebsocket () {console.log ('connection closed...')} function close () {this.socket.close () / / close websocket this.socket.onclose = function (e) {console.log (e) / / listen for the close event console.log ('close')}} function webSocketSend (agentData) {this.socket.send (agentData);} export default {initWebSocket, close}

If you want to refresh and relink websocket, you can add a hook function to the App.vue page.

Mounted () {/ / when the routing page is refreshed, the root component app is re-established, and the webSocket reconnection can be performed / / the user information can be obtained from the localStorage, and the login status can be reconnected with webSocket let token = localStorage.getItem ("token"); if (token) {/ / userMessage = JSON.parse (userMessage); this.$websocket.initWebSocket (token);}}

The client actively closes the websocket and triggers the function where it is closed.

Logout () {/ / localStorage.clear (); localStorage.removeItem ("token"); this.$websocket.close (); this.$store.dispatch ("LogOut"). Then () = > {location.reload ();});}

Note: $webSocket registers the websocket.js file globally in main.js

This is the end of the introduction to "how to use websocket in vue". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.