Detailed explanation of the reasons and heartbeat mechanism of JS WebSocket disconnection
1. Disconnection reasons
There are many reasons why WebSocket is disconnected. It is best to print out the error when WebSocket is disconnected.
= function (e) {
('websocket disconnected: ' + + ' ' + + ' ' + )
(e)
}
Error status code:
When WebSocket is disconnected, CloseEvent is triggered, and CloseEvent is sent to clients using WebSockets when the connection is closed. It is used in the onclose event listener of the WebSocket object. The code field of CloseEvent indicates the reason why WebSocket is disconnected. The reason for the disconnect can be analyzed from this field.
CloseEvent has three fields to pay attention to. By analyzing these three fields, you can generally find the reason for the disconnection.
: code is an error code, an integer type
: reason is the reason for disconnection, it is a string
: wasClean indicates whether it is disconnected normally, and is a boolean value. Generally, when the exception is disconnected, this value is false
| Status code | name | describe |
|---|---|---|
| 0–999 | Reserved segment, not used. | |
| 1000 | CLOSE_NORMAL | Closed normally; created for whatever purpose, the link has successfully completed the task. |
| 1001 | CLOSE_GOING_AWAY | The terminal leaves, which may be due to a server error, or the browser is jumping from the page where the connection is opened. |
| 1002 | CLOSE_PROTOCOL_ERROR | The connection was interrupted due to a protocol error. |
| 1003 | CLOSE_UNSUPPORTED | Disconnection due to receiving unauthorized data types (such as a terminal that only receives text data has received binary data). |
| 1004 | Reservation. Its meaning may be defined in the future. | |
| 1005 | CLOSE_NO_STATUS | Reserved. Indicates that the expected status code was not received. |
| 1006 | CLOSE_ABNORMAL | Reserved. Used to expect the connection to be closed abnormally when the status code is received (that is, no close frame is sent). |
| 1007 | Unsupported Data | Disconnected due to receiving data of inconsistent format (such as non-UTF-8 data contained in the text message). |
| 1008 | Policy Violation | Disconnected due to receiving data that does not conform to the agreement. This is a common status code for scenarios where 1003 and 1009 status codes are not suitable. |
| 1009 | CLOSE_TOO_LARGE | Disconnected due to excessively large data frames received. |
| 1010 | Missing Extension | The client expects the server to agree on one or more extensions, but the server does not handle it, so the client disconnects. |
| 1011 | Internal Error | The client encounters an unexpected situation to prevent it from completing the request, so the server disconnects. |
| 1012 | Service Restart | The server is disconnected due to restart. |
| 1013 | Try Again Later | The server is disconnected due to temporary reasons, such as the server is overloaded, so some clients are disconnected. |
| 1014 | Retained by the WebSocket standard for future use. | |
| 1015 | TLS Handshake | Reserved. Indicates that the connection is closed due to the inability to complete the TLS handshake (for example, the server certificate cannot be verified). |
| 1016–1999 | Retained by the WebSocket standard for future use. | |
| 2000–2999 | Remained and used by WebSocket Expansion. | |
| 3000–3999 | Can be used by libraries or frameworks.? Should not be used by applications. Can be registered on IANA, first come first served. | |
| 4000–4999 | Can be used by the application. |
2. Add to heartbeat
var lockReconnect = false; //Avoid repeated connections of wsvar ws = null; // Determine whether the current browser supports WebSocketvar wsUrl = ;
createWebSocket(wsUrl); //Connect ws
function createWebSocket(url) {
try{
if('WebSocket' in window){
ws = new WebSocket(url);
}
initEventHandle();
}catch(e){
reconnect(url);
(e);
}
}
function initEventHandle() {
= function () {
reconnect(wsUrl);
("llws connection is closed!"+new Date().toLocaleString());
};
= function () {
reconnect(wsUrl);
("llws connection error!");
};
= function () {
().start(); //Heartbeat detection reset ("The llws connection is successful!"+new Date().toLocaleString());
};
= function (event) { //If a message is retrieved, the heartbeat detection is reset ().start(); //Accessing any message means that the current connection is normal ("llws received the message:" +);
if(!='pong'){
let data = ();
}
};
}
// Listen to the window closing event. When the window is closed, actively close the websocket connection to prevent the window from closing before the connection is disconnected, and the server side will throw an exception. = function() {
();
}
function reconnect(url) {
if(lockReconnect) return;
lockReconnect = true;
setTimeout(function () { //If there is no connection, it will be reconnected all the time. Set delay to avoid too many requests createWebSocket(url);
lockReconnect = false;
}, 2000);
}
//Heartbeat detectionvar heartCheck = {
timeout: 1000, //A heartbeat once every minute timeoutObj: null,
serverTimeoutObj: null,
reset: function(){
clearTimeout();
clearTimeout();
return this;
},
start: function(){
var self = this;
= setTimeout(function(){
//Send a heartbeat here. After receiving the backend, it returns a heartbeat message. //If the heartbeat returned by onmessage means that the connection is normal ("ping");
("ping!")
= setTimeout(function(){//If it has not been reset after a certain period of time, it means that the backend has been disconnected actively (); //If onclose will execute reconnect, we just need to execute(). If reconnect is executed directly, it will trigger onclose to cause reconnection twice. }, )
}, )
}
}
// Method called after receiving the client message @OnMessage
public void onMessage(String message, Session session) {
if(("ping")){
}else{
。。。。
}
}
The system found that the websocket was automatically disconnected every 1 minute. Many blogs searched for it and said that they set up nginx's proxy_read_timeout, but this time is too long, it will affect the server performance. The client automatically sends ping messages to the server every 1 minute. The server needs to return pong. It can solve the problem.
The above is a detailed explanation of the reasons and heartbeat mechanism of JS WebSocket disconnection. For more information about the reasons and heartbeat mechanism of JS WebSocket disconnection, please pay attention to my other related articles!
Related Articles
Detailed explanation of how JavaScript event delegate binds
When we learn JavaScript, we will inevitably search for some information online. Maybe we will occasionally encounter "event delegation", but most of the time we talk about "event binding". For "event delegation", whether we don't mention it, or just try it out, it is really a headache for me, who is more curious, especially when I want to learn more about "event delegation"2015-06-06Methods for custom component packaging and parent-child component transfer value between WeChat applets
This article mainly introduces the method of custom component packaging of WeChat applets and the method of passing component values between father and son. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let's take a look with the editor2018-08-08Collecting frequently used javascript verification functions
The frequently used javascript verification functions collection...2007-11-11How to run .NET Core code details in JavaScript
This article mainly introduces the details of running .NET Core code in JavaScript. DotNetJS can compile C# projects into a single-file JavaScript library compatible with any environment, and can run .NET Core code in JavaScript. Details of related operations are shared. If you need it, please refer to it.2022-04-04Analysis of the usage and differences between JS forEach and map methods
This article mainly introduces the usage and differences between JS forEach and map methods, and analyzes the functions, principles, usage methods and related operation precautions of forEach and map methods in combination with examples. Friends who need it can refer to it.2019-02-02How to quickly connect to vscode debugging script for AutoJs4.4.1 free version
This article mainly introduces the free version of AutoJs4.4.1 to quickly connect to vscode for debugging script. First, download AutoJs and install it. After the download is completed, copy the 2 apk files to your phone to install. Next, you need to install the plug-in. This article introduces the steps to you in very detailed. Friends who need it can refer to it.2022-10-10Example of sessionStorage usage method for js front-end storage
sessionStorage refers to local storage of data in a session. These data can only be accessed on pages in the same session and the data will be destroyed after the session ends. This article mainly introduces relevant information about the usage method of sessionStorage in front-end storage of js. Friends who need it can refer to it.2024-06-06JS method to implement the effect of centering the current page
This article mainly introduces JS to achieve the effect of centering the page in the current page, and involves the relevant skills of javascript to operate page elements and styles. Friends who need it can refer to it2015-06-06JS form serialization to determine null value
Below, the editor will bring you an example of judging null values by serializing js form. The editor thinks it is quite good, so I will share it with you now and give you a reference. Let's take a look with the editor2017-09-09Using H5api to realize clock drawing (javascript)
This article mainly introduces the use of H5api to realize clock drawing. The sample code in the article is introduced in detail and has certain reference value. Interested friends can refer to it.2020-09-09