What are some methods to avoid redundant data across various windows?

In the process of developing an angular application, I have implemented a websocket for real-time updates transmission and reception.

Within my application, users have the ability to open multiple windows that are launched from the main window, solely for the purpose of displaying additional details related to the main page's data.

Each opened window must receive the same real-time updates from the websocket as the main window, with the potential for there to be over 10 open windows at any given time.

The issue arises when considering the network resources required if a new websocket is opened in each window, leading to potential internet connectivity problems for users opening numerous windows.

One proposed solution from my team involves establishing a single websocket connection from the main page and utilizing Indexeddb to store and distribute the real-time updates to all open windows. However, implementing this solution has resulted in lock issues when accessing Indexeddb.

Therefore, I am left to ponder whether opening multiple websockets would indeed strain network resources, and if there exists an alternative method for sharing real-time data across various tabs.

javascriptangulartypescriptsignalrindexeddb

Answer №1

In my current project, I am working on implementing real-time updates. On the initial page, I establish the connection and when any changes occur, I aim to relay them to a newly opened window.

One effective approach for handling real-time data is by utilizing a MessageQueue system, such as RabbitMQ. This allows your application to listen for modifications and promptly update accordingly. Additionally, it is advisable to have a database and a backend application that can interact with the database. If you are familiar with python, you might consider using Flask.

It's important to note that localStorage should typically be used for storing config variables, rather than entire objects that undergo frequent modifications.

Answer №2

If you're looking for a solution, there are several options to consider. In your specific situation, you can try the following approaches:

Initial Recommendation: To ensure smooth data retrieval, consider storing your object in a database before launching the window. Include all query parameters to retrieve the data in the new window:

Example:

www.origin.com => save your object with a put/patch

=> opening a new Window = www.origin-popup.com?userId=xxxxx&articleId=xxx

In your angular app, utilize a get request with the user ID and article ID to retrieve the data

Alternate Approach:

Consider integrating ngrx and ngrx-store-localstorage to create and store a local storage for your data (recommended for up to 100 objects, as mentioned in the first solution)

Another Option:

Since it is the same angular app, you can manage state using NGRX. In the second window, subscribe to state changes. When the state is updated in the first window, it will automatically trigger a change in the second window: ngrx.io/guide/store

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JQuery code causing issue with properly closing toggle menu

I am currently working on implementing a closing toggle menu for mobile devices and facing a minor issue. What I aim for is to allow users to close the toggle menu by tapping anywhere on the screen of their device while it is active. I have almost achieved ...

javascriptjquerymobilemenutoggle

Displaying a MySQL blob image in an HTML file with Vue.js: A step-by-step guide

Here is a Vue file that I have: export default { data(){ return{ info: { name: '', image: '', }, errors: [] } }, created: function(){ thi ...

javascripthtmlmysqlvue.jsblob

Declaring Objects and Relationships in Angular Models

Wondering if it's possible to declare an object inside my model. First attempt: export class Employee{ emp_id: number; emp_fname: string; emp_lname: string; emp_birth: string; emp_status: string; emp_photo: string; emp_dep ...

angulartypescriptmodels

Can general principles be applied to determine which script is the most efficient and will load the quickest?

Is there a way to determine which script is optimal and will load faster when there are multiple ways to write scripts that achieve the same outcome? ...

javascriptjqueryperformance

Mockgoose encountered an error during shutdown: ENOTCONN

It's making me lose my mind. I'm currently executing some unit tests with the following configuration import mongoose from "mongoose"; import mockgoose from "mockgoose"; import chai from "chai"; import chaiAsPromised from "chai-as-promised"; i ...

javascriptnode.jsmongoosemocha.js

Employing a provider within a different provider and reciprocally intertwining their functions

I'm currently facing an issue with two providers, which I have injected through the constructor. Here's the code for my user-data.ts file: @Injectable() export class UserDataProvider { constructor(private apiService: ApiServiceProvider) { ...

angulartypescriptionic-framework

Tips for extracting the most deeply nested object in a JSON file using JavaScript

Is it possible to access the innermost object without knowing the path names? Consider this JSON example: const data = { first: { second: { third: {innerObject} } } ...

javascriptjson

Tips for styling Ajax.ActionLink elements with CSS

Hi there, I'm trying to style a navigation bar using CSS. I'm pulling the navigation bar values from a database using Ajax.ActionLink. I attempted to use JavaScript but encountered an error stating "jQuery is not defined", Here's the cod ...

javascriptjquerycssasp.net-mvcasp.net-ajax

Isolating a service from a component based on conditions in Angular 5

Within my root module, I have a service that is shared among all components. One of these components is named ComponentX module providers: [ BiesbroeckHttpService ], component constructor(private biesbroeckHttpService: BiesbroeckHttpService){} Som ...

angulartypescript

Disguising the Navigation Bar when choosing from various databases

I am currently facing the following issue: <div class="container"> <h3 class="d-flex justify-content-center">Database</h3> <div class="row"> <div class="col-xs-12"> < ...

angular

NodeJS: The functionality of my node files relies on the variables defined in another file

For my nodejs app, I have created a script called app.js that serves as the entry point. This script initializes both the expressjs app and the http server. To clarify: The modules mentioned are not npm modules; they are custom files that I have written m ...

javascriptnode.jsexpressdependencies

Guide to Implementing i18n-iso-countries Library in React

I am currently developing a React application and attempting to utilize the i18n-iso-countries package to retrieve a countries object in English where keys represent iso codes and values represent country names. This process is straightforward in Node.js, ...

javascriptnode.jsreactjsnpm

Encountering issues while trying to incorporate a trading chart library into an Angular 7 project

ERROR in src/assets/datafeeds/udf/src/udf-compatible-datafeed-base.ts(243,74): error TS2339: 'errmsg' Property Not Found The property 'errmsg' does not exist on the type 'UdfErrorResponse | UdfSearchSymbolsResponse'. The p ...

javascriptangulartradingview-api

What is the best way to simulate a function within an object using Jest and Typescript?

I am currently working on a function that calls the url module. index.svelte import {url} from '@roxi/routify'; someFunction(() => { let x = $url('/books') // this line needs to be mocked console.log('x: ' + x); }); ...

typescriptjestjssvelte

Using XML in Angular for POST requests

I am currently working with Angular (not AngularJS) and have a web service that uses SOAP to interact with XML data. Although I've searched extensively, I haven't been able to find a comprehensive example of a POST request using XML. If anyone ...

angularxml-parsingxmlhttprequesthttp-postangular2-http

Is there a way to combine properties from two different objects?

I am working with several JavaScript objects: { x: 5, y: 10, z: 3 } and { x: 7, y: 2, z: 9 } My task is to add these two objects together based on their keys. The resulting object should look like this: { x: 12, y: 12, z: 12 } Do you ...

javascriptsum

When running nodemon in an npm project without any arguments, it fails to execute the value specified in the "main" field of the package.json

My current npm project has the following folder structure: project ├── node_modules │ └── (node_modles folders) ├── server.js ├── index.js ├── index.html ├── package.json └── package-lock.json The JavaScr ...

javascriptnode.jsnpmpackage.jsonnodemon

The problem with the Next.js 14 generateStaticParamsparams parameter is that it is currently

I'm using this documentation as a reference to extract parameters from the URL in my generateStaticParams function: https://nextjs.org/docs/app/api-reference/functions/generate-static-params#generate-params-from-the-bottom-up This is the route I am w ...

javascriptnext.jsserver-side-rendering

Which costs more, using an undefined ng-bind or both ng-bind and ng-show together?

Assuming that toShowVar is undefined, which of these options would be more costly? <span ng-bind="toShowVar" ng-show="toShowVar"></span> or <span ng-bind="toShowVar"></span> The latter option would clearly not display anything o ...

javascriptangularjs

The website encountered an error in loading with the error message "ENOTFOUND" in Cypress

All my cypress tests were running smoothly until one day they all failed to visit the target site. The error message that I received was: cy.visit() failed trying to load: https://mywebsite.com/accounts/login/ We attempted to make an http request to this ...

javascriptnode.jsreactjsautomated-testscypress