Ways to display all current users on a single page within an application

I have come across a project requirement where I need to display the number of active users on each page. I am considering various approaches but unsure of the best practice in these scenarios. Here are a few options I am considering:

1. Using SignalR
2. Implementing portal programming
3. Investigating if Google Analytics can provide this information

The application is built using AngularJS, and each page has the same URL with different parameters. The goal is to show the number of users who have accessed the same route (page) at the top of each page.

Any suggestions or guidance on which direction to focus my research would be greatly appreciated. Thank you.

javascriptangulartypescriptasp.net-web-apisignalr

Answer №1

To streamline the process, SignalR is a convenient option. By utilizing SignalR, you can easily increase the counter by one each time a user connects to the page and decrease it by one when a user disconnects from the page.

Answer №2

To calculate the total number of connected users, you can utilize the following code:

Firstly, a HashSet needs to be created to store the list of connected users.

public static class ConnectionList
{
    private static readonly HashSet<string> connectedUsers = new HashSet<string>();

    public static HashSet<string> ConnectedUsers
    {
        get => connectedUsers;
        set => ConnectedUsers = value;
    }
}

Next, in the hub, override the OnConnectedAsync and OnDisconnectedAsync methods as shown below:

When a user connects, their connection id will be added to the hash set. If they disconnect, their id will be removed from the hash set.

public class OnlineHub : Hub
{
    public Task GetTotalConnectedUsers()
    {
        return Clients.All.InvokeAsync("TotalClientConnect", ConnectionList.ConnectedUsers.Count);
    }

    public override Task OnConnectedAsync()
    {
        ConnectionList.ConnectedUsers.Add(Context.ConnectionId);
        return base.OnConnectedAsync();
    }

    public override Task OnDisconnectedAsync(Exception exception)
    {
        ConnectionList.ConnectedUsers.Remove(Context.ConnectionId);
        return base.OnDisconnectedAsync(exception);
    }
}

The GetTotalConnectedUsers method is used to retrieve the total number of connections.

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

Having difficulties incorporating a selected custom repository into a module

Issue with Dependency Injection in NestJS Currently, I am working on implementing SOLID principles in my NestJS project by decoupling my service layer from TypeOrm. One of the benefits of this approach is the ability to switch between using an InMemoryRep ...

typescriptnestjstypeormsolid-principlesin-memory-database

Scheduling casperjs on Heroku for automated tasks

Recently, I developed an application using casperjs to extract sports data from a specific website. My goal is to automate this application on heroku by setting up a cronjob to store the sports results in either a CSV file, database, or possibly external ...

javascriptnode.jsherokuphantomjscasperjs

What is the best way to display compiled Transcluded HTML in Angular?

I am facing a challenge in trying to display customized HTML content using Angular directives for nesting divs multiple times. When I execute the code below, the transcluded tag is displayed correctly but the browser output shows the string text " ". I att ...

javascriptangularjsangular-directiveangularjs-ng-transcludetransclusion

Guide on setting up a new NPM and JavaScript project within Visual Studio 2015

Whenever I watch tutorials, they always mention having a "special npm reference" that I seem to be missing. All I can find are the "normal" references (.net assemblies). I also can't locate any project type labeled as pure "Javascript." I am current ...

javascriptvisual-studio-2015npm

Stopping setTimeout when leaving the current page: Is it possible?

Good evening, I am looking for advice on how to cancel a setTimeout function when a user navigates to other pages (for example, by clicking other links or pressing the back button in the browser, but not by changing tabs). I have attempted to use the windo ...

javascripthtmlcssreactjssettimeout

What is the process of incorporating events into a calendar using jQuery or JavaScript?

$(document).ready(function () { //initialize calendar $(".responsive-calendar").responsiveCalendar({ time: '2016-02', events: { "2016-03-30": {"number": 5, "url": "http://w3widgets.com/responsive-slider"}, "201 ...

javascriptphpjqueryajaxcalendar

Barba.jS is causing a delay in loading scripts after the page transition

One of my index files includes Gsap and Barba JS, while an inner page includes additional JS files such as locomotive.js and OWLcarousel.js. These two JS files are not necessary for the index page. However, when transitioning from the index page to the inn ...

javascripthtmljquerybarbajs

Adding a component to a slot in Vue.js 3

My Goal I aim to pass the Component into the designated slot. The Inquiry How can I effectively pass the Component into the slot for proper rendering? It works well with strings or plain HTML inputs. Additional Query If direct passing is not feasible, ...

javascriptvue.jsvuejs3slot

Encountered a problem while trying to install angular-cli on a Windows 10

While attempting to set up angular-cli on my Windows 10 device, I used npm install -g @angular/cli. However, an error popped up as follows: C:\Users\kumar>npm install -g @angular/cli npm ERR! Unexpected end of JSON input while parsing near &a ...

angularnpmnpm-install

Utilizing Typescript DOM library for server-side operations

I've been working on coding a Google Cloud Function that involves using the URL standard along with URLSearchParams. After discovering that they are included in the TypeScript DOM library, I made sure to add it to my tsconfig file under the lib settin ...

typescriptgoogle-cloud-functionstypescript-lib-dom

Creating a clickable map for a PNG image: Step-by-step tutorial

My goal is to create a interactive map similar to this one. Click here for the image ...

javascripthtmlclickable

Issue with Angular Material Table: Dragged rows do not drop in the correct position when scrolling

I'm encountering issues with using Angular Material Table along with Drag and Drop CDK and scrolling. While dragging a row and then scrolling, the row does not drop where intended. Additionally, the animation does not follow the scroll correctly. I ...

javascriptangularangular-materialangular-cdk

Unable to access the website's source code

It's frustrating when I can't view the source code of certain websites, such as this one: . When I try to right-click and select "View Source", only a portion of the code is displayed, which isn't the proper source code for the page. Alth ...

javascripthtmlcssinspect

Comparing XDomainRequest and XMLHTTPRequest - which one to choose

Our team is currently developing an application utilizing PixiJS that integrates a dynamic json loader. The .json files are loaded using the following logic: if(window.XDomainRequest) { this.ajaxRequest = new window.XDomainRequest(); } else if (windo ...

javascriptajaxinternet-explorerwindows-phonepixi.js

Exploring Functions in Object Literal Notation in TypeScript: Why is the Context of 'this' Assigned as Type 'any'?

It appears that the question has been posed before, but my search yielded no results. The issue at hand seems rather straightforward. TypeScript integrates well with object literal notation, however, when methods are defined within, it struggles to handle ...

typescripttypescript-typings

What is the best approach for rendering HTML on a page both initially and dynamically as it is updated, given the heavy utilization of ajax?

One challenge faced by many web applications today is how to efficiently reuse html templates without redundancy when initially rendering a page and adding new content. What is the most effective approach for this? One option is to render the HTML page ...

javascripthtmlajaxtemplatesrender

Incorporate a new node module into your Ember CLI application

I am interested in integrating the Node.js module https://www.npmjs.com/package/remarkable-regexp into my Ember-CLI project. Can someone guide me on how to make it accessible within the Ember application? I attempted to do so by including the following c ...

javascriptnode.jsember.jsnpmember-cli

Identifying the FireOS version using JavaScript

Can JavaScript be used to determine the version of FireOS that a Kindle device is running when accessing your website? ...

javascriptkindle-fire

"Utilizing Vuex for a detailed and structured approach to organization

Currently, I am tackling a rather extensive project and my aim is to divide Vuex modules into as many segments as feasible. Specifically, I intend to segregate the API functionality from the UI, maintaining a clear distinction between server-sourced data a ...

javascriptarchitecturevue.jsvuex

What is the best way to programmatically define the value for the MaterialUI grid size property using TypeScript?

Is there a way to dynamically pass a value to the Grid size props like XL in TypeScript? For instance, *Update for further clarification import Grid, { GridSize } from "@material-ui/core/Grid"; let value: GridSize = 12/4; xl={value} Error: Type &apos ...

typescriptmaterial-ui