},
conn: null,
connexionString: "",
- socketCloseListener: 0
+ reopenTimeout: 0,
+ reconnectTimeout: 0
};
},
watch: {
},
created: function() {
window.addEventListener("beforeunload", this.cleanBeforeDestroy);
- // Initialize connection
this.connexionString =
params.socketUrl +
"/?sid=" + this.st.user.sid +
"&tmpId=" + getRandString() +
"&page=" +
encodeURIComponent(this.$route.path);
- this.conn = new WebSocket(this.connexionString);
- this.conn.onmessage = this.socketMessageListener;
- this.socketCloseListener = setInterval(
- () => {
- if (this.conn.readyState == 3) {
- // Connexion is closed: re-open
- this.conn.removeEventListener("message", this.socketMessageListener);
- this.conn = new WebSocket(this.connexionString);
- this.conn.addEventListener("message", this.socketMessageListener);
- }
- },
- 1000
- );
+ this.openConnection();
},
mounted: function() {
const adjustAndSetDisplay = () => {
this.cleanBeforeDestroy();
},
methods: {
+ openConnection: function() {
+ // Initialize connection
+ this.conn = new WebSocket(this.connexionString);
+ this.conn.onopen = () => { this.reconnectTimeout = 250; };
+ this.conn.onmessage = this.socketMessageListener;
+ const closeConnection = () => {
+ this.reopenTimeout = setTimeout(
+ () => {
+ this.openConnection();
+ this.reconnectTimeout = Math.min(2*this.reconnectTimeout, 30000);
+ },
+ this.reconnectTimeout
+ );
+ };
+ this.conn.onerror = closeConnection;
+ this.conn.onclose = closeConnection;
+ },
cleanBeforeDestroy: function() {
- clearInterval(this.socketCloseListener);
window.removeEventListener("beforeunload", this.cleanBeforeDestroy);
- this.conn.removeEventListener("message", this.socketMessageListener);
+ clearTimeout(this.reopenTimeout);
this.conn.send(JSON.stringify({code: "disconnect"}));
this.conn = null;
},