Having multiple tabs open but only one communicates with the server - javascript

Looking for some advice for having multiple tabs open in a single browser but only one communicates with the server.
Best practices, frameworks etc.
figured there might be a framework that already handles this idea through local storage or cookies but couldn't seem google one or find a previous post that addresses this problem.
At this point i'm looking to role my own via by keeping a list of tabs and assigning one to make calls to the server and share the data via local storage.
update.
found this Duel.js will investigate.

Alright after some playing around with DuelJS it appears to be what I was looking for in terms of a existing API.
Managed to get it working in within a Angular 2 typescript project and I'm pretty happy with the result.
Basically I have single web page open in two tabs one being a master tab that is making all the calls to the server/database and broadcasting the result the slave tab where the component/view is updated.
Still interested in other peoples thoughts?

Related

Implementing ajax to make a functioning live chat

I'm trying to build a simple live chat for my website, I already have everything set up, meaning databases, login and log out system, forms, displaying the database values in chat form.
The only thing I'm missing is implementing the live refresh function so users don't have to manually refresh the site to see new messages.
I'm a little lost, could you give me some guidance?
I'm guessing I have to add a specific javascript call whenever a message is sent, or the "send" button is pressed to be more specific, then that would call back a function to refresh the chat for every participant. Not sure where to start or which code to use.
Essentially, you have 2 ways to implement this.
Using a polling technique with ajax request which will grant you a greater compatibility, but you will have to much more work to implement it. I don't really consider it for most cases nowadays, because it could be very inefficient.
Using a socket mechanism, you can use web sockets for a out of the box solution, most browsers have support for it nowadays For third party libraries you can use socket.io which can fall back to web socket yet it grants a little bit for features out of the box, like channels, which you would benefit from. Lastly, for a third party service, you can use firebase/firestore which they have a realtime database, so whenever a change happens, you get notified.
I would recommend using either the web socket approach (native) or using a wrapper/library like socket.io. If you go with Socket.io, there are a lot of tutorials out there that build chats with that library, so you can get a working sample really fast.

Hosted React app track clicks with uniques session without user interaction

I know not exactly how to ask this appropriately and where. I tried searching around and visited various (paid) solutions, but I would require a simple solution.
For a scientific work of mine I want to track user interactions or basically button clicks on a simple React site like this example I made http://flock-1401.students.fhstp.ac.at/
Assume the user visits the provided link above, then I want to create a log on a server (maybe nodejs self-hosted) where the user's interaction is tracked with a unique session to distinguish them. At most, there will be 150 users active.
I tried to use the following library:
https://github.com/react-ga/react-ga
However, I tend to not use Google Analytics as I don't need all the included stuff there. Maybe something like this https://github.com/greenstick/interactor? But how do I automatically save it then?
Thank you

Transfer Data from Click Event Between Bokeh Apps

I have two Bokeh apps (on Ubuntu \ Supervisor \ Nginx), one that's a dashboard containing a Google map and another that's an account search tool. I'd like to be able to click a point in the Google map (representing a customer) and have the account search tool open with info from the the point.
My problem is that I don't know how to get the data from A to B in the current framework. My ideas at the moment:
Have an event handler for the click and have it both save a cookie and open the account web page. Then, have some sort of js that can read the cookie and load the account.
Throw my hands up, try to put both apps together and just find a way to pass it in the back end.
The cookies idea might work fine. There are a few other possibilities for sharing data:
a database (e.g. redis or something else, that can trigger async events that the app can respond to)
direct communication between the apps (e.g. with zeromq or similiar) The Dask dashboard uses this kind of communication between remote workers and a bokeh server.
files and timestamp monitoring if there is a shared filesystem (not great, but sometimes workable in very simple cases)
Alternatively if you can run both apps on the same single server (even though they are separate apps) then you could probably communicate by updating some mutable object in a module that both apps import. But this would not work in a scale-out scenario with more than one Bokeh server running.
Any/all of these somewhat advanced usages, an working example would make a great contribution for the docs so that others can use them to learn from.

AngularJS caching objects to avoid re-loading in new browser tabs

My AngularJS app behaves similarly to Gmail, in that it loads up a bunch of data to the browser with a "loading" screen. There are 3 javascript objects being retrieved from my database here and they take a little a few seconds each to load.
Once loaded, they permeate through the app and are used in various views and controllers.
However, if a user opens up one of the app's links in a new tab, they obviously to be re-loaded. I can see why this happens, but I'd much rather save the 5-10 seconds of loading time for the user and have someway of sharing the data between different tabs.
Is this possible at all, perhaps using Angular's $cookie service or caching? I'm quite new to this style of programming so detailed answers are most definitely appreciated!
As the two people above answered, you can do this via LocalStorage. However, if you begin to write your data to the LocalStorage, and try to keep the LocalStorage in sync with your server storage, that task quickly becomes a full time job that is full of bugs. Use a library for this.
THIS SITE has a few options.

PhoneGap (web mobile app) - Transfer data between pages

I'm developing a PhoneGap application. If you don't know what that is, it's a service that allows you to build mobile-based applications using HTML, CSS and JavaScript.
I have an application, and I've come to a point where I need to transfer information from one page to another. The user chooses an option on the page, the application then loads a new page and based on their option it loads specific content.
Now I do already know a few ways of doing this, to name one.. local storage maybe. My question is, what is the most efficient way of getting information between these two pages? If this were PHP I'd simply using $_GET[''].. but it's not PHP, I'm looking for the best way to do this using HTML, CSS, and JavaScript.
Any help here would be highly appreciated!
There are several possibilities:
You are using a service like Phonegap:build or Cordova: You only gonna have one HTML-File where you continously hide and show the different pages. I don't recommend this one, but Phonegap:build and Cordova are great to create a package for all major phones, without headache.
URL-Parameters you could pass parameter over the URL to a different HTML-Page. This means you have to open all links with window.location.replace() or change the href-attribute on you anchors. In the next page you have to parse that URL, which is not as easy as in PHP.
localStorage / sessionStorage you can easily store data in the sessionStorage. With sessionStorage.myObject = JSON.stringify(complexObject) you can easily store complex objects to the session storage and read them back with var complexObject = JSON.parse(sessionStorage.myObject). Those are available during you complete session and would be one of the easiest solutions so far.

Categories

Resources