Requirements: Use websocket without using plug-ins to achieve the functions of publishing, subscription, network disconnection and reconnection, and squeezing of numbers after single sign-in
1. Single sign-in (there is only one online at the same time for the same account, multiple users are prohibited from logging in)
Implementation: After the user logs in, it obtains the token token and saves it to the local area. You can determine whether the token token is invalid to let the user log out. The operation of the websocket is to connect to the websocket after logging in and send instructions. The command sent here is given by the backend, and the frontend accepts the message. If the message is logged out, just let him clear the local area and jump to the login page.
1. Log in to get the token token and store it in localStorage
2. Get the token in layout, that is, the main frame of the page and connect to the websocket
3. After the connection is successful, send the command directly, then listen to the message returned to the front end and then implement the exit operation.
url = `${protocol}://websocketAddress，Need to the backend?token=${token}`;，Let me give you an example. The connection address should be like this: ws://127.0.0.1:8080?token=362466325,
(`msg:${}`); This is also determined by the backend to give the account id to him, so as to listen to login
Reconnect, and then return the message to loginOut and log out. If the link is closed for various reasons, directly request reconnection.
retryCount: 0,
maxRetryCount: 5,
retryInterval: 2000, // Retry interval, unit: milliseconds
Notice! ! The websocket cannot set the request header to carry the token. It seems that it cannot be done after trying many times, and it cannot be done with the WS plugin. It can only splice the token to the backend.
let ws;
let url = "";
export default {
mounted() {
();
},
methods: {
connectWebsocket() {
let protocol = "ws";
if (typeof WebSocket === "undefined") {
("Your browser does not support WebSocket");
return;
} else {
if ( == "https:") {
protocol = "wss";
}
let token = ("token");
url = `${protocol}://The address of the websocket needs to be given to the backend?token=${token}`; // Open a ws ws = new WebSocket(url);
= () => {
// Send data ("ws connected!!");
(`msg:${}`);
// this.$("ws connected!!"); };
// When an error occurs = (evt) => {
("ws error:", evt);
};
// Close the connection = (event) => {
("WebSocket Closed");
("Close code:", );
("Closed reason:", );
// Handle connection disconnection event ();
};
= (evt) => {
if ( == "loginOut") {
// At this time, you need to clear the data this.$("Your account is logged in at another location and you have been forced to go offline!!");
this.$("/");
();
();
= () => {
("WS disconnected successfully");
};
}
(evt, "Received Message");
};
this.$bus.$emit("Websocket", ws);
}
},
handleWebSocketClose() {
if ( < ) {
(`Trying to do a second ${ + 1} Second reconnection...`);
setTimeout(() => {
();
++;
}, );
} else {
("WebSocket connection failed, maximum retries reached");
}
},
}
}2. Publish a subscription
Notice! ! Every time this is published, a new message should be connected again, otherwise it will be bad if it is confused with the previous login message, especially when doing operations, such as el-table editing operations, you must close the websocket every time you close the pop-up window. If it is confused with the login message, you cannot receive messages from single sign-in in real time after closing the pop-up window.
This connectWebsocket is not the same as the above. This requires real-time websocket connection to push the page and will not affect global single sign-on.
let websocket;
let url = "";
export default {
connectWebsocket(data) {
let protocol = "ws";
if (typeof WebSocket === "undefined") {
("Your browser does not support WebSocket");
return;
} else {
if ( == "https:") {
protocol = "wss";
}
let token = ("token");
url = `${protocol}://The address given by the backend?token=${token}`; // Open a websocket websocket = new WebSocket(url);
= () => {
// Send data // ("websocket is connected!!"); (data);
this.$("websocket is connected!!");
};
// When an error occurs = (evt) => {
("websocket error:", evt);
};
// Close the connection = (event) => {
("WebSocket Closed");
("Close code:", );
("Closed reason:", );
// Handle connection disconnection event (data);
};
}
},
handleWebSocketClose(data) {
if ( < ) {
(`Trying to do a second ${ + 1} Second reconnection...`);
setTimeout(() => {
(data);
++;
}, );
} else {
this.$("WebSocket connection failed!!");
("WebSocket connection failed, maximum retries reached");
}
},
}2.1 Simulation editing operation requires publishing messages
1. Click Edit to open and receive it in real time
updData(row) {
(`data_imei:${}`);
= (evt) => {
//If the message received is msgUpd if(=='msgUpd'){
let data = ();
//Just convert the obtained data into json and then display it to tableData for display let (data)
//You can't always accept it. How much data should be? Define how many pieces of data you receive and intercept it after intercepting it. if ( > 500) {
(500);
}
}
}
}
2. You need to disconnect after closing the pop-up window
closeWebSocket() {
if (websocket != null) {
();
= () => {
("Websocket disconnection successfully");
};
}
},
3. Close the connection after leaving the websocket push page
destroyed() {
if (websocket != null) {
();
= () => {
("Websocket disconnection successfully");
};
}
},
This is the end of this article about vue using websocket to implement real-time data push function. For more related vue websocket real-time data push content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!