从先前的套接字连接断开并建立新的连接

Question

我正在构建一个有角度的应用程序，该应用程序使用传感器和node.js作为后端来获取实时数据。

 <div>
      <label> <b>Device: </b></label>
      <mat-form-field class="parameter">
        <mat-select  [(value)]="selectedDevice">
          <mat-option  value="00:12:4b:00:19:b8:6b:46">00:12:4b:00:19:b8:6b:46</mat-option>
          <mat-option  value="fd00::212:4b00:197b:2778">fd00::212:4b00:197b:2778</mat-option>
          <mat-option  value="fd00::212:4b00:197b:274a">fd00::212:4b00:197b:274a</mat-option>
        </mat-select>
      </mat-form-field>
    </div>

    <div>
        <button (click)="realTime(selectedDevice)">Get Data for ID</button>
      </div>

component.ts

    realTime(id) {
      this.webSocket.connect_id(id).subscribe ((data:any) => console.log(data))

    }

in service.ts


  connect_id(id) : Observable<string>{
    this.socket = io('http://server_ip/milo/' + id, {transports : ['websocket']})
    console.log(this.socket)
    return this.observable = new Observable((observer) => {
      this.socket.on('data',(res : any) => observer.next(res));
    })
  }

因此，当我从下拉列表和“获取ID的数据”中选择一个设备时，便建立了套接字连接并正在获取实时数据。

所以现在，当我从下拉列表中选择另一台设备并再次“获取ID的数据”时，现在我获取了这些设备的数据。我只需要最近选择的设备的数据，如何实现？如何断开以前的连接？