I'm writing a JS page based on WebSocket calls, first of all i need to be sure that the WS is UP and it's state is connected, else i need to prompt the user to try to reconnect.
Then the user will be able to communicate with WS Server by pressing some buttons and other stuff.
So i would know which would be the best way to initialize the WebSocket and use push messages from it on button clicks and other methods.
For now my code looks like this:
var websocket = null;
document.getElementById("btnAnnullaStampa").addEventListener("click", () => {
websocket.send(`<LOGIN><COD>${codope}</COD><PSW>${password}</PSW></LOGIN>`);
});
function connect() {
return new Promise(function (resolve, reject) {
websocket = new WebSocket("ws://localhost:8080");
websocket.onopen = function () {
resolve(websocket);
};
websocket.onerror = function () {
reject();
};
});
}
connect(websocket)
.then(function (server) {
server.onmessage = (e) => {
// DOING STUFF WITH WS MESSAGES
}
})
.catch(function (err) {
// HERE I FIRE AN ERROR MODAL
});
Should i put all my click methods which uses websocket inside promise?
Is it a bad practise to initialize the var in promise but use it outside of it?
Should i put all my click methods which uses websocket inside promise?
If you mean inside a promise fulfillment handler, then: maybe. There are at least two approaches you can take here:
Don't hook up your handlers until the websocket is available, or
In your handlers, allow for the possibility the websocket isn't available yet, probably by saving the promise and using .then (or await) on it each time.
Either is a valid approach, it depends on your overall structure and probably your preference.
#1 might look something like this:
// Disable `btnAnnullaStampa` or don't show it at all to start with
function connect() {
return new Promise(function(resolve, reject) {
const websocket = new WebSocket("ws://localhost:8080");
websocket.onopen = function() {
resolve(websocket);
};
websocket.onerror = function() {
// You probably want to pass on any error you receive.
// You might want to change this to just:
// `websocket.onerror = reject;`
reject();
};
});
}
connect()
.then(function(websocket) {
websocket.onmessage = (e) => {
// DOING STUFF WITH WS MESSAGES
};
// Now, enable or show `btnAnnullaStampa` and hook it
document.getElementById("btnAnnullaStampa").addEventListener("click", () => {
websocket.send(`<LOGIN><COD>${codope}</COD><PSW>${password}</PSW></LOGIN>`);
});
})
.catch(function(err) {
// HERE I FIRE AN ERROR MODAL
});
#2 might look something like this:
function connect() {
return new Promise(function(resolve, reject) {
const websocket = new WebSocket("ws://localhost:8080");
websocket.onopen = function() {
resolve(websocket);
};
websocket.onerror = function() {
reject();
};
});
}
const wsPromise = connect();
wsPromise
.then(function(websocket) {
websocket.onmessage = (e) => {
// DOING STUFF WITH WS MESSAGES
};
})
.catch(function(err) {
// HERE I FIRE AN ERROR MODAL
});
document.getElementById("btnAnnullaStampa").addEventListener("click", () => {
wsPromise
.then(ws => {
// If this returns a promise, return that promise from this handler
// by adding `return` at the beginning
ws.send(`<LOGIN><COD>${codope}</COD><PSW>${password}</PSW></LOGIN>`);
})
.catch(() => {
// Show error about message not being sent
});
});
Is it a bad practise to initialize the var in promise but use it outside of it?
Not necessarily, but it often indicates a problem with your overall structure, so it's a smart question to ask any time you think you want to do it. (That is, "Do I really need to do it this way?")