When websocket is connected, it is affected by the network

Or if the communication is not closed by the server for a long time, the disconnection reconnection mechanism is required

It is more troublesome to write the disconnection and reconnection by yourself, you can use this js library ReconnectingWebSocket.js

 https://github.com/joewalnes/reconnecting-websocket/ Download the min file directly, just import it

When using, only need to replace h5’s native websocket with ReconnectingWebSocket, everything else remains the same

For example: this is the use of this in vue.socket is the global ReconnectingWebSocket object, and other callback functions are also defined on the vue method

            the this .socket = new new ReconnectingWebSocket ( " xxxxxx " ); // Create Socket instance 
            the this .socket.debug = to true ;
             the this .socket.timeoutInterval = 10000 ; // connection timeout 
            the this .socket.reconnectInterval = 5000 ; // reconnection Interval time 
            this .socket.maxReconnectInterval = 600000 ; // Maximum reconnect interval time 
            this .socket.maxReconnectAttempts = 10 ; // Maximum number of reconnect attempts 
            this .socket.onmessage = this.OnMessage;
             this .socket.onopen = this .OnOpen;
             this .socket.onerror = this .OnError;
             this .socket.onclose = this .OnClose;

 If there is no communication for more than one minute, it will be interrupted, and then automatically reconnect

Read More:

• [Solved] Nuxt Import qrcodejs2.js / QRCode.js Error: document is not defined
• Solution to some map files in JS folder after Vue packaging (remove the map. JS file)
• [Solved] VS Code Debug JavaScript Error: “crbug/1173575, non-JS module files deprecated”
• [Solved] webpack Package Error: ERROR in multi ./src/main.js ./dist/bundle.js Module not found: Error: Can‘t resolv
• Solution to build error in Vue project (error in static/JS)/vendor.xxxxx.js from UglifyJs）
• Google browser plug-in JavaScript errors Notifier
• Javascript: Simple package localStorge operation
• JavaScript determines whether parentheses are paired.
• JavaScript Common Errors List (Reasons & Solutions)
• Error when Python executes JavaScript statement
• [Solved] Vue Compile Error: JavaScript heap out of memory
• [Solved] Project Package Error: Javascript heap out of memory
• [Solved] Ineffective mark-compacts near heap limit Allocation failed – JavaScript heap out of memory
• Javascript SecurityError: Failed to read the’localStorage’ property from’Window’: Access is denied for this document.
• ArcGIS API for JavaScript Error Uncaught(in promise): TypeError: xxx is not a constructor
• [Solved] Vue Project Modify Page Error: CALL_AND_RETRY_LAST Allocation failed – JavaScript heap out of memory
• ArcGIS API for JavaScript version 4. X updated and the project startup error: Module parse failed: Unexpected token(… …
• JS uses onerror to automatically catch exceptions
• Javascript: How to Use Date.Now() to implement front-end frequency limit
• JavaScript determines whether it’s morning or afternoon or evening