Disconnect a websocket in a separate function
I have a webapp with a frontent code that connects to a websocket when a user clicks on a checkbox. When they click on it again and the checkbox checked value becomes false i want to disconnect the websocket. A user can have multiple items that are listed in a ul and each item has its own checkbox so they can connect multiple items to stream on the websocket. I collect the websockets in an array and index them. When a user clicks on the checkbox the client connects to the websocket fine. When a user clicks on the checkbox to disconnect I get the following error
WebSocket connection to 'ws://localhost:4000/' failed: WebSocket is closed before the connection is established.
let tronToggle = Array.from(document.querySelectorAll("#tron-toggle"));
tronToggle.forEach((item, index) => {
let children = Array.from(item.children);
let toolSet = {
checkBox: children[0],
map: children[1]
};
toolSet.checkBox.addEventListener("click", e => {
loading();
ws[index] = new WebSocket('ws://localhost:4000');
ws[index].onopen=function(event){
ws[index].send(e.target.parentNode.parentNode.dataset.id);
}
if (e.target.checked === true) {
toolSet.map.classList.toggle("hidden");
setMarkerPosition(e, index);
} else {
toolSet.map.classList.toggle("hidden");
ws[index].close();
loaded();
}
});
});
});When I put the websocket.close() logic inside of the onopen (so after it starts) the websocket closes with no problem. How can I close it on uncheck?
javascript node.js websocket
asked Nov 16 '18 at 19:13
Pari Baker
223113
add a comment |
I have a webapp with a frontent code that connects to a websocket when a user clicks on a checkbox. When they click on it again and the checkbox checked value becomes false i want to disconnect the websocket. A user can have multiple items that are listed in a ul and each item has its own checkbox so they can connect multiple items to stream on the websocket. I collect the websockets in an array and index them. When a user clicks on the checkbox the client connects to the websocket fine. When a user clicks on the checkbox to disconnect I get the following error
WebSocket connection to 'ws://localhost:4000/' failed: WebSocket is closed before the connection is established.
let tronToggle = Array.from(document.querySelectorAll("#tron-toggle"));
tronToggle.forEach((item, index) => {
let children = Array.from(item.children);
let toolSet = {
checkBox: children[0],
map: children[1]
};
toolSet.checkBox.addEventListener("click", e => {
loading();
ws[index] = new WebSocket('ws://localhost:4000');
ws[index].onopen=function(event){
ws[index].send(e.target.parentNode.parentNode.dataset.id);
}
if (e.target.checked === true) {
toolSet.map.classList.toggle("hidden");
setMarkerPosition(e, index);
} else {
toolSet.map.classList.toggle("hidden");
ws[index].close();
loaded();
}
});
});
});When I put the websocket.close() logic inside of the onopen (so after it starts) the websocket closes with no problem. How can I close it on uncheck?
javascript node.js websocket
asked Nov 16 '18 at 19:13
Pari Baker
223113
Just out of curiosity: why do you open a new WebSocket connection for each item? Browsers typically limit the number of concurrent connections to the same host (and this number differs per browser, too), so at some point you'll run into an issue there. Also, where isindexcoming from?
– robertklep
Nov 16 '18 at 19:23
well because the web app is letting a user broadcast locations for different items. So when the page is built a user may have 5 items, when they click on the checkbox it broadcasts that item, so I want to be able to close the broadcast when they want one item to go 'offline'
– Pari Baker
Nov 16 '18 at 19:25
updated code to show where index is coming from
– Pari Baker
Nov 16 '18 at 19:26
add a comment |
I have a webapp with a frontent code that connects to a websocket when a user clicks on a checkbox. When they click on it again and the checkbox checked value becomes false i want to disconnect the websocket. A user can have multiple items that are listed in a ul and each item has its own checkbox so they can connect multiple items to stream on the websocket. I collect the websockets in an array and index them. When a user clicks on the checkbox the client connects to the websocket fine. When a user clicks on the checkbox to disconnect I get the following error
WebSocket connection to 'ws://localhost:4000/' failed: WebSocket is closed before the connection is established.
let tronToggle = Array.from(document.querySelectorAll("#tron-toggle"));
tronToggle.forEach((item, index) => {
let children = Array.from(item.children);
let toolSet = {
checkBox: children[0],
map: children[1]
};
toolSet.checkBox.addEventListener("click", e => {
loading();
ws[index] = new WebSocket('ws://localhost:4000');
ws[index].onopen=function(event){
ws[index].send(e.target.parentNode.parentNode.dataset.id);
}
if (e.target.checked === true) {
toolSet.map.classList.toggle("hidden");
setMarkerPosition(e, index);
} else {
toolSet.map.classList.toggle("hidden");
ws[index].close();
loaded();
}
});
});
});When I put the websocket.close() logic inside of the onopen (so after it starts) the websocket closes with no problem. How can I close it on uncheck?
javascript node.js websocket
asked Nov 16 '18 at 19:13
Pari Baker
223113
I have a webapp with a frontent code that connects to a websocket when a user clicks on a checkbox. When they click on it again and the checkbox checked value becomes false i want to disconnect the websocket. A user can have multiple items that are listed in a ul and each item has its own checkbox so they can connect multiple items to stream on the websocket. I collect the websockets in an array and index them. When a user clicks on the checkbox the client connects to the websocket fine. When a user clicks on the checkbox to disconnect I get the following error
WebSocket connection to 'ws://localhost:4000/' failed: WebSocket is closed before the connection is established.
let tronToggle = Array.from(document.querySelectorAll("#tron-toggle"));
tronToggle.forEach((item, index) => {
let children = Array.from(item.children);
let toolSet = {
checkBox: children[0],
map: children[1]
};
toolSet.checkBox.addEventListener("click", e => {
loading();
ws[index] = new WebSocket('ws://localhost:4000');
ws[index].onopen=function(event){
ws[index].send(e.target.parentNode.parentNode.dataset.id);
}
if (e.target.checked === true) {
toolSet.map.classList.toggle("hidden");
setMarkerPosition(e, index);
} else {
toolSet.map.classList.toggle("hidden");
ws[index].close();
loaded();
}
});
});
});When I put the websocket.close() logic inside of the onopen (so after it starts) the websocket closes with no problem. How can I close it on uncheck?
let tronToggle = Array.from(document.querySelectorAll("#tron-toggle"));
tronToggle.forEach((item, index) => {
let children = Array.from(item.children);
let toolSet = {
checkBox: children[0],
map: children[1]
};
toolSet.checkBox.addEventListener("click", e => {
loading();
ws[index] = new WebSocket('ws://localhost:4000');
ws[index].onopen=function(event){
ws[index].send(e.target.parentNode.parentNode.dataset.id);
}
if (e.target.checked === true) {
toolSet.map.classList.toggle("hidden");
setMarkerPosition(e, index);
} else {
toolSet.map.classList.toggle("hidden");
ws[index].close();
loaded();
}
});
});
}); let tronToggle = Array.from(document.querySelectorAll("#tron-toggle"));
tronToggle.forEach((item, index) => {
let children = Array.from(item.children);
let toolSet = {
checkBox: children[0],
map: children[1]
};
toolSet.checkBox.addEventListener("click", e => {
loading();
ws[index] = new WebSocket('ws://localhost:4000');
ws[index].onopen=function(event){
ws[index].send(e.target.parentNode.parentNode.dataset.id);
}
if (e.target.checked === true) {
toolSet.map.classList.toggle("hidden");
setMarkerPosition(e, index);
} else {
toolSet.map.classList.toggle("hidden");
ws[index].close();
loaded();
}
});
});
});javascript node.js websocket
javascript node.js websocket
asked Nov 16 '18 at 19:13
Pari Baker
223113
asked Nov 16 '18 at 19:13
Pari Baker
223113
edited Nov 16 '18 at 19:26
asked Nov 16 '18 at 19:13
Pari Baker
223113
asked Nov 16 '18 at 19:13
Pari Baker
223113
asked Nov 16 '18 at 19:13
Pari Baker
223113
223113
Just out of curiosity: why do you open a new WebSocket connection for each item? Browsers typically limit the number of concurrent connections to the same host (and this number differs per browser, too), so at some point you'll run into an issue there. Also, where isindexcoming from?
– robertklep
Nov 16 '18 at 19:23
well because the web app is letting a user broadcast locations for different items. So when the page is built a user may have 5 items, when they click on the checkbox it broadcasts that item, so I want to be able to close the broadcast when they want one item to go 'offline'
– Pari Baker
Nov 16 '18 at 19:25
updated code to show where index is coming from
– Pari Baker
Nov 16 '18 at 19:26
add a comment |
Just out of curiosity: why do you open a new WebSocket connection for each item? Browsers typically limit the number of concurrent connections to the same host (and this number differs per browser, too), so at some point you'll run into an issue there. Also, where isindexcoming from?
– robertklep
Nov 16 '18 at 19:23
well because the web app is letting a user broadcast locations for different items. So when the page is built a user may have 5 items, when they click on the checkbox it broadcasts that item, so I want to be able to close the broadcast when they want one item to go 'offline'
– Pari Baker
Nov 16 '18 at 19:25
updated code to show where index is coming from
– Pari Baker
Nov 16 '18 at 19:26
Just out of curiosity: why do you open a new WebSocket connection for each item? Browsers typically limit the number of concurrent connections to the same host (and this number differs per browser, too), so at some point you'll run into an issue there. Also, where is
index coming from?– robertklep
Nov 16 '18 at 19:23
Just out of curiosity: why do you open a new WebSocket connection for each item? Browsers typically limit the number of concurrent connections to the same host (and this number differs per browser, too), so at some point you'll run into an issue there. Also, where is
index coming from?– robertklep
Nov 16 '18 at 19:23
well because the web app is letting a user broadcast locations for different items. So when the page is built a user may have 5 items, when they click on the checkbox it broadcasts that item, so I want to be able to close the broadcast when they want one item to go 'offline'
– Pari Baker
Nov 16 '18 at 19:25
well because the web app is letting a user broadcast locations for different items. So when the page is built a user may have 5 items, when they click on the checkbox it broadcasts that item, so I want to be able to close the broadcast when they want one item to go 'offline'
– Pari Baker
Nov 16 '18 at 19:25
updated code to show where index is coming from
– Pari Baker
Nov 16 '18 at 19:26
updated code to show where index is coming from
– Pari Baker
Nov 16 '18 at 19:26
add a comment |
1 Answer
1
active
oldest
votes
You are opening an connection every time the checkbox is clicked. So first you check it and setup an connection. Then you click it again, create another connection and close it immediately.
toolSet.checkBox.addEventListener("click", e => {
if (e.target.checked === true) {
loading();
ws[index] = new WebSocket('ws://localhost:4000');
ws[index].onopen=function(event){
ws[index].send(e.target.parentNode.parentNode.dataset.id);
}
toolSet.map.classList.toggle("hidden");
setMarkerPosition(e, index);
} else {
toolSet.map.classList.toggle("hidden");
ws[index].close();
loaded();
}
});
answered Nov 16 '18 at 19:28
Tarabass
2,87021230
1
Yup that was it.
– Pari Baker
Nov 16 '18 at 19:42
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53344042%2fdisconnect-a-websocket-in-a-separate-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You are opening an connection every time the checkbox is clicked. So first you check it and setup an connection. Then you click it again, create another connection and close it immediately.
toolSet.checkBox.addEventListener("click", e => {
if (e.target.checked === true) {
loading();
ws[index] = new WebSocket('ws://localhost:4000');
ws[index].onopen=function(event){
ws[index].send(e.target.parentNode.parentNode.dataset.id);
}
toolSet.map.classList.toggle("hidden");
setMarkerPosition(e, index);
} else {
toolSet.map.classList.toggle("hidden");
ws[index].close();
loaded();
}
});
answered Nov 16 '18 at 19:28
Tarabass
2,87021230
1
Yup that was it.
– Pari Baker
Nov 16 '18 at 19:42
add a comment |
You are opening an connection every time the checkbox is clicked. So first you check it and setup an connection. Then you click it again, create another connection and close it immediately.
toolSet.checkBox.addEventListener("click", e => {
if (e.target.checked === true) {
loading();
ws[index] = new WebSocket('ws://localhost:4000');
ws[index].onopen=function(event){
ws[index].send(e.target.parentNode.parentNode.dataset.id);
}
toolSet.map.classList.toggle("hidden");
setMarkerPosition(e, index);
} else {
toolSet.map.classList.toggle("hidden");
ws[index].close();
loaded();
}
});
answered Nov 16 '18 at 19:28
Tarabass
2,87021230
1
Yup that was it.
– Pari Baker
Nov 16 '18 at 19:42
add a comment |
You are opening an connection every time the checkbox is clicked. So first you check it and setup an connection. Then you click it again, create another connection and close it immediately.
toolSet.checkBox.addEventListener("click", e => {
if (e.target.checked === true) {
loading();
ws[index] = new WebSocket('ws://localhost:4000');
ws[index].onopen=function(event){
ws[index].send(e.target.parentNode.parentNode.dataset.id);
}
toolSet.map.classList.toggle("hidden");
setMarkerPosition(e, index);
} else {
toolSet.map.classList.toggle("hidden");
ws[index].close();
loaded();
}
});
answered Nov 16 '18 at 19:28
Tarabass
2,87021230
You are opening an connection every time the checkbox is clicked. So first you check it and setup an connection. Then you click it again, create another connection and close it immediately.
toolSet.checkBox.addEventListener("click", e => {
if (e.target.checked === true) {
loading();
ws[index] = new WebSocket('ws://localhost:4000');
ws[index].onopen=function(event){
ws[index].send(e.target.parentNode.parentNode.dataset.id);
}
toolSet.map.classList.toggle("hidden");
setMarkerPosition(e, index);
} else {
toolSet.map.classList.toggle("hidden");
ws[index].close();
loaded();
}
});
answered Nov 16 '18 at 19:28
Tarabass
2,87021230
answered Nov 16 '18 at 19:28
Tarabass
2,87021230
answered Nov 16 '18 at 19:28
Tarabass
2,87021230
answered Nov 16 '18 at 19:28
Tarabass
2,87021230
2,87021230
1
Yup that was it.
– Pari Baker
Nov 16 '18 at 19:42
add a comment |
1
Yup that was it.
– Pari Baker
Nov 16 '18 at 19:42
1
1
Yup that was it.
– Pari Baker
Nov 16 '18 at 19:42
Yup that was it.
– Pari Baker
Nov 16 '18 at 19:42
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53344042%2fdisconnect-a-websocket-in-a-separate-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Just out of curiosity: why do you open a new WebSocket connection for each item? Browsers typically limit the number of concurrent connections to the same host (and this number differs per browser, too), so at some point you'll run into an issue there. Also, where is
indexcoming from?– robertklep
Nov 16 '18 at 19:23
well because the web app is letting a user broadcast locations for different items. So when the page is built a user may have 5 items, when they click on the checkbox it broadcasts that item, so I want to be able to close the broadcast when they want one item to go 'offline'
– Pari Baker
Nov 16 '18 at 19:25
updated code to show where index is coming from
– Pari Baker
Nov 16 '18 at 19:26