Unsubscribing from a socket io connection in Angular can be done

This is how I establish a connection between the client and server using socket io.

export class OverviewService {

  socket:any;
  readonly uri:string='http://localhost:4000';

  

  constructor(private http: HttpClient) {
    this.socket = io(this.uri);
   }

And here is how I make the API call:

getOnPeak(){
    this.socket.emit('on_peak/today');

    return new Observable((subscriber)=>{
      this.socket.on('on_peak/today',(data:any)=>{
        subscriber.next(data.onPeak.toFixed(2))
        console.log('onPeak:'+data.onPeak.toFixed(2));
      })
    })
    
  }

In overview.ts file:

this.getOnPeekSub=this.overviewService.getOnPeak().subscribe(onPeak => {
      this.onPeak = onPeak;
    })

Upon ngOnDestroy, I attempted to use removeAllListeners(), removeListeners() and off() but encountered issues with them not functioning as expected.

Answer №1

fetchPeakData(){
    this.socket.emit('on_peak/today');

    return new Observable((subscriber)=>{
      this.socket.on('on_peak/today',(data:any)=>{
        subscriber.next(data.onPeak.toFixed(2))
        console.log('onPeak:'+data.onPeak.toFixed(2));
      })

      return function disconnectSocket() {
        this.socket.disconnect()
      };
    })
    
  }

When you end the subscription, the socket connection will be terminated. Learn more at https://rxjs.dev/guide/observable (Managing Observable Instances)

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

Guide to incorporating eslint with Next.js in a project that already has an eslint configuration

I recently created a new next.js project within my existing Node.js project, which already has an eslint config set up. Here's how the folder structure looks now: ...

Unable to simulate axios instance in a Typescript environment

After reading through this particular article, I decided to attempt writing a unit test while simulating Axios (with Typescript). Incorporating an Axios instance to define the baseUrl. // src/infrastructure/axios-firebase.ts import axios from 'axios ...

Using HTML to execute a JavaScript function that transforms images

The script cutImageUp has been previously discussed on SE in a thread about Shattering image using canvas. However, I have encountered a different issue while attempting to use it. The HTML code I implemented seems to be ineffective, and despite my efforts ...

C# - Implementing JavaScript Object manipulation in .NET Core

As I was browsing, I noticed many similar questions from years ago. Let's kick off this discussion with a simple JavaScript example showcasing how easy it is to modify, read, and write properties in objects using this language. Take a look at the cod ...

Sending an object from Rails to Javascript

My MapsController is def show @outlet=OUtlet.all render 'maps/map' end In the view page map.html.erb, I iterate through each outlet to display their latitude and longitude: <% @outlet.each do |product| %> <%= product.latitu ...

How can I convert a serial port's raw data buffer into an array of numerical values?

I recently added the serialport module to my project. Within this particular function: port.on('data', function (data) {.....}); The variable data, which is the argument for the callback, contains the raw data received from the serial port. I ...

Retrieve today's bookings using a Firebase query and store them in an array

I am attempting to retrieve all bookings from firebase that match today's date. Using an *ngFor loop in my HTML, I am displaying all returned orders. In the firebase database, there are 7 saved bookings, with 2 of them being for today's date. T ...

A guide to displaying a countdown timer in an Angular application during the app's loading process

Displaying a loader that shows the time in seconds while loading an app is my goal. Here is the code snippet: HTML <body> <div class="app-loader"> <div class="loader-spinner"> <div class="loading-text"></div> ...

What is the best way to selectively create transparency for a specific color in a three.js canvas?

I'm working with a three.js canvas that I generated using liquidfun.js. However, I'm encountering an issue where the canvas is not transparent. I want to make a specific color in the canvas fully transparent, such as the whitish background. Is t ...

Extract information from the website "angular.callbacks" using web crawling techniques

Looking to utilize R for scraping news from the following URL: "AlphaGo"&ss=fn&start=0). Below is the code I am working with: url <- "http://api.foxnews.com/v1/content/search?q=%22AlphaGo%22&fields=date,description,title,url,image,type,taxo ...

Ways to update a component when the state changes

When attempting to access components that require authentication, I want to redirect to the login page if the user is not logged in. However, I am facing an issue with initializing the firebase auth object, as there is a small delay. The documentation sugg ...

Using PHP to ascertain the requested dataType or responseType from the client

My ajax request is fairly simple: $.post('server.php',data, function (json) {console.log(json)},'json'); I have configured jQuery to expect json data based on the dataType setting. Question: Is the dataType parameter equivalent to re ...

Encountering an error in an Angular 4 application when running in Internet Explorer 11: "Unable to execute code from a script that has been freed

I am encountering an issue with my Angular app, which I believe is running version 4. The problem arises in Internet Explorer 11 during a login sequence and the error message states "Can't execute code from a freed script". The IE console points to li ...

Accessing data from Firebase Database Object

I am currently facing a challenge in extracting a username value from my firebase database and then displaying it in a console log statement. The issue lies in fetching the child value instead of just the object. How can I retrieve the child value and prin ...

Unable to preview the image before uploading it again

My html file contains the following code: <form [formGroup]="productForm" (submit)="onSubmit()"> <input type="file" formControlName="image" (change)="fileProgress($event)"> </div> <div *ngIf="fileUploadProgress"> ...

Top-notch strategy for creating Node Package Manager packages that are interdependent

As we work on developing two React-based applications, let's call them app-a and app-b, we also manage two dependencies. One is a shared-components package, which contains components shared between the two applications, and the other is a shared-utili ...

transferring information between two sibling elements in Angular 7

My goal is to display the username of the logged-in user on the home page. I have a LoginComponent, HomeComponent, and I am using a service called DataService.ts for data transfer. The data seems to be reaching DataService.ts but it's not getting to t ...

Is there a way to utilize a POST request to pass a React component from server.js to App.js for rendering?

I am new to React and JavaScript and still in the learning process :) I'm working on a magic 8 ball application where, upon clicking the button using the post method, I aim to retrieve a random answer (one of the 20 in my server.js) back to the same ...

Efficient method invocation for objects within an array using functional programming techniques

Is there a way to execute a method that doesn't require arguments and doesn't return anything on each object within an array of objects that are all the same type? I've been trying to find a solution without resorting to using a traditional ...

angular click triggers the following content

How can I make the following content appear when clicked? I have a list of content that displays up to 20 items, but I want to show the rest when clicked. I have created the nextMovieList method for this purpose. import { Component, OnInit } from ' ...