I'm trying to create a chat in React that will be attached to a browser tab. The message history must be global. I put each message to local storage with a unique name. However, in the second tab, messages appear only after the page is refreshed. If you do not refresh the page, but write something new from the second tab, the values in localstorage begin to be overwritten.
I tried to use broadcastmessage, but I ran into the fact that it is called many times, and many identical values come to localstorage at once. I didn't find a solution to this problem.
I also tried using add.edeventListener('storage') but it doesn't work for the current tab.
I also used windows.postmessage, but that didn't work either. Can you suggest how to display messages without reloading the page?
Related
I’m making app-ish gatsby website with authentication.
Im displaying user menu in header if user is logged in, and login button if not.
Until session is checked, I dont know if I should show menu or login button. Because of that I decided not to show website at all initially (if session cookie/token is not detected, website is loaded almost immediately, but initially its blocked too), until session information comes back from backend.
I did this by simply creating session reducer with initial state variable „checked” set initially to false - website shows content only when this variable is set to true, what happens after session check or after token/cookie presence check.
But, from what I understand, if I block website until session is checked and no content is shown I lose all static seo power of gatsby. I mean google bots won’t scan my website if theres no content shown initially. Am I correct?
What would be your approach to this problem? Changing from „log in” button (or not showing it at all initially) to usermenu in header looks weird.
In order for SEO to be correct, you can add loading in the menu and login button areas when detect.
But, from what I understand, if I block website until session is
checked and no content is shown I lose all static seo power of gatsby.
I mean google bots won’t scan my website if theres no content shown
initially. Am I correct?
Yes and no. If you block all your website before you check the cookie, yes. However, if you are only blocking the header part to show/hide one button or another, you are not blocking the statically of Gatsby. In addition, keep in mind that Google bots always make various crawls; one the check the "static" content (without JavaScript) and one of them awaiting the JavaScript response/rendering.
In your case, if you are only checking a local variable to decide which component render, you are not losing the SEO power of Gatsby, since you are only rendering (or not) a small piece of code.
In the worst case that the crawler wasn't able to detect that small piece of code, the SEO impact is meaningless, it won't affect the overall performance only to show/hide a component.
For further details about Google's crawlers check the docs.
What would be your approach to this problem? Changing from "log in”
button (or not showing it at all initially) to usermenu in header
looks weird.
I would say the best approach is the best UX response, since the SEO impact is meaningless. It may not be intuitive for a user to see a "Log in" button and once the cookie/reducer is checked change it suddenly to another content. I would prefer to awaiting the variable.
I am new to mobx-persist. I am not able to figure out how rehydration works in mobx-persist. I tried asking about it in github but got no reply so far. I am wondering if anyone here is able to point me the right direction.
The problem that I am trying to solve is to prevent losing the react states on the page refresh. I want to keep the stats in the session storage and load them back when the page is refreshed. (Note: I managed to do it by accessing the session storage directly from the react store but I thought that mobx-persist might do the better job.)
I created a sample here. https://github.com/michaelsync/js-lab/tree/master/mobx-persist-sample.
You can use the following command to run the sample.
yarn install
yarn start
It has two components called "entry" page and "result". User can enter something in "entry" page and show that data in the "result" page. There is one store called userDataStore that has only one property called data.
When you click on "Click Me" in the entry page, the data that you typed on text box will be saved in user data store. and it retrieves the data back from the result page.
The issue is that when I refresh the page, I still lost the react states. I guess it's because I don't understand how rehydration works in mobx-persist.
The steps to replicate the issue ~
run the program by using yarn start
enter something in textbox and click on "Click me" (It will redirect to the result page)
you will see what you entered in the result page.
Refresh the page (press F5) - the data will be lost.
Can someone please help me with the steps that I need to do in hydration and rehydration?
Note: I don't want to use any server-side code or isomorphic rendering to sync the states for now. using the session storage might be anti-pattern but I see it fit in my tiny project.
In my application I have a page that display several tabs. All the informations are gathered with a single HTTP request. Every tab contains an HTML form. By default on the load of the page we load the first tab. After a modification within any tab we reload the page for informations refresh (following en INSERT/UPDATE in a backend database). What we want: if before any update we were on a particular tab (any other than the first one), to return on the same tab.
I thought at several solutions:
To use different URL for different tabs (panes), namely URL routing. For example, domain.ext/page/tab. There, I have a problem because the URL must update following user trace. If the user click on a 3rd tab, we have to change the URL to domain.ext/page/3rd-tab using $location.path() which triggers page reloading.
To use the same URL (what we have now) and anchors in the page managed by $location.search() and reloadOnSearch = false. For example, domain.ext/page?pane=tab. There, I have another problem because the query string (that is managed by $location.search()) is kept at service level and when the user goes on another page, the query string is the same (domain.ext/another-page?pane=tab). I would like to delete the query string when the user leaves the page.
To use ui-route. This solution change lot of the actual structure of the application.
IMHO the 2nd solution seems better except that I don’t know where and when to reset query string.
I’d like your opinions on this topic.
Thanks.
I have a silverlight application that displays some values in a grid. Another part of the application updates those values and saves the updates to the source data. All of this works fine including the updating of the displayed values in the grid...until you navigate back to the page later (by say hitting refresh). Then magically all the values in the grid are back to whatever they were the first time you went to the page. I can check and verify that the data is in the source system correctly, I can also make it work fine by going into internet options and setting the browsing history to look for a new version of the page every time you visit the page. But I can't guarantee that users will do this.
I have run into this MANY times before with IE but the normal fixes don't seem to work here. I have added a timestamp to the request for the XAP file to ensure that the file is being pulled every time but somehow that is not good enough. I've also added the pragma no-cache tag to the page and still no go. It seems like Silverlight itself is it's own special case. IS there something else that can be done in the SL object to make it refresh every visit??
What code are you using to populate the grid?
If you load the data when the page is created then it will only be pulled from the database once.
If you load the data when the page is loaded or navigated to then it will be pulled from the database every time the page is displayed.
As Ken Smith says in his comment:
move your data retrieval and population code to your main form's OnNavigate event, and out of Application_Startup
This means that if you update the data and then refresh the page it should show the new values.
(I can't be 100% certain without the code)
I have one problem with IE7. Let me explain the scenario
I have opened my web based application in IE7 browser in TAB1 by using normal login feature. After successful login, i entered to the application home page and i do with my normal transaction say Trans1. Now i want to open my application again in another tab TAB2 in the same browser window.. what happens IE7 won't allow me to login on my application in the login page, it directly enters to the home page and when i do one transaction say "Trans2" it is going smoothly. Now when i again went to the TAB1 and doing one transaction it is opening the TAB2 page that i opened in TAB2.
It seems IE7 is sharing same session cookie in multiple tabs. Is there a workaround for the same scenario.
Anyone have any solution for this problem.
Appreaciate your help in this regard.
Thanks,
Manoja Swaro
It seems IE7 is sharing same session cookie in multiple tabs. Is there a workaround for the same scenario.
Well no. Cookies are by design shared between all instances of the same browser, whether in multiple tabs or multiple windows. You can only get two separate sessions by using different browsers, like an instance of IE and one of Firefox.
This changes a little in IE8, but in quite a complicated way you probably don't want to rely on. See http://blogs.msdn.com/ie/archive/2009/05/06/session-cookies-sessionstorage-and-ie8.aspx
This is why you should generally not be using cookies/sessions for keeping track of partially-completed transactions; one transaction will always interfere with the other. Better to either:
keep track of all incomplete transaction data in page/form data, like hidden fields
if that's too much data to keep passing back and forth, create an ID for the transaction that is remembered through page data, and store the actual data in the database.
You can also use a unique ID tied to the page to generate more unique cookie names, eg. 'preference.1234=foo' instead of just 'preference=foo', so that each instance will have its own cookies.
Yes. IE shares session/cookie between tabs.
Try to run a new browser (i.e. from Start menu) -- it helped with older versions of IE
and it works with my IE7.
AFAIK This happens with all tabbed browsers (FF for example).
Indeed, this is how all tabbed browsers work. Cookies are shared among all tabs. However they are not shared among multiple instances of the same application, but I doubt this will help you.
This is actually a serious problem for many applications. It is very difficult to keep track of the tabs - which are open, which are closed, when a new tab opens, and when an existing one makes a request.
There is one workaround I have found, but it's pretty messy. The idea is that you have to assign a unique ID to every tab yourself. Then, when a tab performs some actions, this ID has to be posted back to the server. Depending on the architecture of your application, the ID can be passed around in URLs or hidden form fields. If you're doing AJAX, this can make it easier to find a common place to add the ID. ASP.NET also has just one form at all times, so the hidden field is easy to do.
Naturally, on the server side you must check this ID and implement your own "tab sessions" based on it.