Guide on utilizing a single websocket connection across multiple controllers in AngularJS

I have an AngularJS app with multiple controllers. Each controller needs to connect to the server to receive data, and I am using a websocket connection for this purpose. Initially, I created a new websocket connection in every controller:

 ws = new WebSocket(wsUrl);

I used the same `wsUrl` for all connections. However, I encountered an issue where opening a second connection would cause the first one to stop responding. After some research, I found that it is better to establish one connection and use it across different controllers.

My question is - how can I achieve this? How can I utilize `websocket.onmessage` from different controllers?

ws.onmessage = function (evt) {
    var data = angular.fromJson(evt.data);
    if (data.ok == false) {
        console.log('Error: {ok:false}');
    } else if (data.content.type != 4) {
        switch (data.state) {
            case 'get_work_iterations':
                listWorkIterations(data); // should be triggered in controller_1

                break;
            case 'updateIterations':
                updateIterations(data); // should be triggered in controller_2

        }
    }
};

Answer №1

I came across a solution that worked for me by utilizing services and callbacks in AngularJS. You can check it out at:

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

generate dynamic custom headers in an express application for accessibility by an Angular application

https://i.stack.imgur.com/6jyNE.pngRecently, I have started using Express and despite my extensive research, I haven't been able to find a solution to my issue. The problem is that I am receiving headers in my Express app, but when I attempt to make t ...

Mapping with Angular involves iterating over each element in an array and applying a function to each one

I am working with an API that provides data in a specific format: {"data": [ { path: "some path", site_link: "link", features: ['feature1', 'feature2'] } ... ]} Now, I have a service called getSites() ge ...

When making a PUT request with Fetch, the Cache-Control header is altered in Firefox but remains unchanged in

In the process of generating presigned URLs for uploading to S3, it is necessary to set the Cache-Control header value to be public, max-age=31536000, immutable. The fetch operation is executed using the following code: fetch( uploadUrl, ...

Combining two states in the Vuex store

In my Vuex store, I have two states: notes (synced notes with the server/DB) localNotes (unsynced notes that will move to 'notes' state upon syncing) To display the notes in a list, I use a getter that merges the two objects and returns the me ...

What is the best way to compare a JSON object and a string in JavaScript?

Currently, I am working on developing the website layout for . Most of the data retrieval and display have been successful so far. However, when attempting to filter my search results to show only stop names associated with Subways, I encountered some err ...

When clicking on an item in the wishlist, only the text for that specific item should change,

Hi all, I'm in need of some assistance. I have successfully created a wishlist toggle where clicking on the heart icon changes it from an outline to solid. However, my issue lies in changing the tooltip text from "add to wish list" to "added to wish l ...

The CSS ::after selector is experiencing a decrease in animation speed

There is a dropdown menu set to fade in once a link is clicked. Everything works well, the menu fades in properly. However, when clicking off and triggering a function that fades out the dropdown, the triangle on top of the box fades out slightly slower th ...

Localizing strings that are not saved in a database

Our web app will soon support multiple languages, a new feature we are excited to roll out! Currently, we utilize Handlebars for front-end templating and Node + Jade for back-end templating. As we prepare to implement language support, we're conside ...

What methods can be used to evaluate the efficiency of AngularJS in terms of DOM rendering?

Currently working on improving an AngularJS project and looking for ways to identify areas of improvement, such as memory leaks, browser performance, data rendering issues, and screen freezes. I attempted using Jmeter but it only shows page navigation spee ...

Three Js - The Ultimate Database for 3D Models

Greetings, all. I am currently in the process of developing a website that utilizes Three.js. I am seeking recommendations for a platform or online database where I can store both the 3D model file and the website database together, if feasible. Your assi ...

Is CakePHP unable to handle multiple Ajax requests simultaneously?

After multiple rounds of editing this post, I keep uncovering new information through testing and debugging. Here is my current situation: I have a method thinker that takes a significant amount of time to process. To address this, I have decided to call ...

Encountered problem with AJAX in Java: Unable to assign value to property 'innerHTML' as it is null

Recently, I've been eager to dive into learning AJAX and decided to create an app following a tutorial similar to the one provided here. However, after painstakingly replicating the code, I found that it's not working as expected. Despite multipl ...

Utilizing document.getElementById to toggle the CSS to 'display:none'

Attempting to modify the CSS property using document.getElementById, I wrote the following code: var x = document.getElementById("id"); x.style.display = "none"; Unfortunately, this code is not functioning as expected. Can someone pr ...

Is there a way to display an alert using JavaScript that only appears once per day?

I've created a website that displays an alert to the user upon logging in. Currently, the alert is shown each time the user logs in, but I'm looking to make it display only once per day at initial page loading. How can I achieve this? Below i ...

Experiencing an unexpected wait before the requestAnimationFrame?

Surprisingly, Internet Explorer is actually performing the way I want it to in this case :-) I developed a function for SVG animations using requestAnimationFrame (for simplicity, I left out the value calculations here ... but my initial test involved an ...

Tips for passing a parameter (such as an ID) through a URL using ng-click to display a subdocument belonging to a particular user in

I am looking to retrieve specific user subdocument data on a separate page by passing the id parameter in a URL using ng-click in AngularJS. <tr ng-repeat="register in registerlist | filter:searchText"> <td>{{$index+1}}</td> <td&g ...

What are the signs that a promise has been kept, allowing me to chain onto it or extract its outcome?

After a user selects an employee, I trigger an asynchronous request to the server in order to retrieve the employee's events. In case the user tries to assign a task to the selected employee before receiving the event list from the server, I must post ...

Create a JavaScript program that can identify which number in a given array is different from the other two when two of the numbers in the array are equal

function checkThirdNumber() { let num1 = parseInt(document.querySelectorAll('.checkThirdInput')[0].value); let num2 = parseInt(document.querySelectorAll('.checkThirdInput')[1].value); let num3 = parseInt(document.querySelect ...

Traverse through an array of elements within a React component

I will be receiving data from an API and storing it in a state object that appears like the following: constructor(props) { super(props); this.state = { searchable: false, selectValue: 'day-to-day-banking', clearable: false, data: { ...

How can the event listener be utilized with md-autocomplete?

I am currently in the process of developing an angularjs application that incorporates an autocomplete feature. One key aspect of this application is that certain fields cannot be populated until an item has been selected using the autocomplete function. ...