I use the javascript websocket to connect to the websocket server. I use python flask framework to navigate through webpages.
my project is as below:
the route "/" renders index.html page. In this page, I create a
websocket connection.
when I receive data from the server, I navigate to different route (for instance: "/page/1")
When i click on the href link on my index.html page, i see the websocket is being closed.
I googled out and implemented 2 methods of persistent storage.
LocalStorage
Shared Web Workers
Both of them were not of any use, since, the websockets are being closed when i click on the href link. From this I think that persistent storage of websocket instance is not a solution to my problem (please correct me if i am wrong). Please suggest me the right approach to tackle my problem. Thank you in advance.
I am using the latest version of google chrome (52.0.2743.82)
The WebSocket connection only persists as long as the page it was established for is open. Loading another page closes the WebSocket, so storing a reference to the object does not help (what it references no longer exists). You need to establish a new WebSocket connection after each page load.
(For an older look into how the problems here, see http://tavendo.com/blog/post/websocket-persistent-connections/, and 10.2.3 in the HTML spec https://html.spec.whatwg.org/multipage/workers.html#shared-workers-introduction)
Related
I am currently using a Kandy WebRTC library to make WebRTC based audio calls. As this JavaScript library internally using the WebSocket the problem I am facing is to keep the session alive if the user refreshes the page.
For example, when a user A connects via Kandy library and makes a call to user B and during the call if the user refreshes the page the connection lost at user A but user B is still on call as it is not properly ended by user A. The hurdle is Kandy library does not provide a way to re-connect to an ongoing call.
Hence, I want to know is there anything that we could do on a client-side to manage this refresh page issue. One of the approaches that came into my mind is to shift the JavaScript Client + Kandy logic to the Node.js server and access the make call and receive calls using HTTP services. But I am really not sure how the audio would work in this case because this Kandy library requires the rendering media or <audio> tag to establish the media channel.
Here is the Codepen link just to understand the code, due to security reason I won't be able to provide the credentials but you can have the jest of code that we have used for the sample.
Check the kandy.media.renderTracks(call.remoteTracks, "#remote-container") which requires the div tag <div id="remote-container"></div> to render the media.
That seems like a bug in the Kandy SDK. Typically the signalling server (in this case a websocket) can detect if a client that is in a call closes the websocket and notify the other end of the call.
Using window.onbeforeunload to send a clientside "bye" might help too.
Have some way to keep the same socket.io connection on client side if user open a new page or refresh the page, maybe store the socket in session or it's impossible?
It's impossible. You cannot keep the same socket.io or webSocket client connection when the page is changed or refreshed. The browser simply does not do that. When a new page is loaded or the current page is refreshed, all resources from the previous page are closed and freed by the browser, including socket.io/webSocket connections.
So, your server has to expect a new socket.io connection from the newly loaded page. If you use cookies or a server-side session object, you can identify, on the server, when a connection is coming from a client that you have previously seen and the server can then act accordingly to realize that this is just a previous client reconnecting on a new page.
It seems now that WebWorker are a more widespread technology that it could be use to share websocket.
As explain in this article https://crossbario.com/blog/Websocket-Persistent-Connections/
Webworker are Javascript that is running outside the "thread of the page" and thus are not deleted on page change.
Note that it is running only in the same domain.
You can also look at Kanaka's answer here How to maintain a WebSockets connection between pages? (2012-2017 answer beware)
I am looking for the ideas to sync version of client javascript and server APIs in a single page applications.
I have come up with following ideas -
Push update notification from server and ask user to refresh
Keep a version info in each API call and ask client to refresh as soon as there is version mismatch
keep supporting the old server version as long as all clients are updated(by closing their existing sessions and opening a new tab/window)
How is it generally done? Would like to discuss more ideas here and pros and cons of the options given above.
As mentioned in this tutorial for creating a chat application using Socket.IO :
Notice that I’m not specifying any URL when I call io(), since it defaults to trying to connect to the host that serves the page.
I was wondering how did it do that? How can one through JavaScript on the client side retrieve the details of the server that served this very page? I tried searching through Socket.IO, but wasn't able to find the io() function.
Can someone point that code that retrieves these meta-details or show a small snippet that does the same?
In browser Javascript, the window.location object has these relevant properties:
window.location.host - The hostname of the current webpage
window.location.port - The port number of the current web page
Other properties are here: https://developer.mozilla.org/en-US/docs/Web/API/Location
So, socket.io can use these two values to connect back to the host that the current web page came from. You see some of this logic in the socket.io client side file here in the source.
I'm trying to "manipulate" an existing WebSocket connection of the browser.
For example: I visit the page example.com which creates a websocket connection with my browser.
Is there any way to access this connection and send data from javascript?
If you're trying to use your own Javascript to send data on a webSocket that the webpage's Javascript opened, then you will have to "hack" into the variables of the webpage to find how/where it stores the webSocket that it opened up. It would take some sleuthing through the site's Javascript to see how practical/possible that was. There is no "standard" way that a webSocket is stored in a page that allows you to just get it from there. You'd have to get it from the existing Javascript. If it's stored inside a closure, then it may not even be possible to get it from the console.
Or, you could just open your own webSocket to the page's server from the console and do whatever you wanted to do with your own webSocket using your own Javascript from there. You don't have to use the webSocket that the page opened as long as you can see from the Javascript in the page how it opens the webSocket and anything that might need to be sent in order to initialize the webSocket properly.
I would also suggest that you observe all applicable laws, licenses and terms of service.