Angular 17 未使用 Socket.io 渲染组件

Question

我有以下 Angular 组件，其唯一属性是 ConnectionService 服务的实例：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ConnectionService } from './connection.service';
//import { inject } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // is the same with conn = inject(ConnectionService)
  constructor(private conn: ConnectionService) {}
  ...
}

'./app.component.html'中对应的模板是：

<div>
  <div>
    <div> Site id: <input placeholder="Insert a value"> <button > SET </button> </div>
    <textarea #myTextarea cols="40" rows="5"> </textarea>
  </div>
</div>

这是ConnectionService服务的代码：

import { Injectable } from '@angular/core';
import { Socket, io } from 'socket.io-client';
import { ServerToClientsEvent, ClientToServerEvent, OTSocketClient } from '../../../../Server/typings';

@Injectable({
  providedIn: 'root'
})
export class ConnectionService {
  socket: Socket<ServerToClientsEvent, ClientToServerEvent>;
  client!: OTSocketClient;
  constructor() {
    this.socket = io("http://localhost:3002/");
    this.socket.on("connect", () => {
      this.connectionService.client = new OTSocketClient(this.socket);
      console.log(`Client ${this.socket.id} connected`);
      this.connectionService.client.askDoc();
    })
  }
}

问题是，当我使用 ngserve 启动应用程序时，组件的 html 不会呈现，页面会不断加载。可能是由于 Socket.io 库的存在，即使添加一些 console.log 我也可以看到连接成功，并且 emit 和 on 方法也成功工作。

一开始我的组件代码是：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

let socket = io("http://localhost:3002/");
let client = new OTSocketClient(socket);
socket.on("connect", () => {
   console.log(`Client ${socket.id} connected`);
   client.askDoc();
})

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {}
  ...
}

模板已渲染，但我无法确定类声明之前的代码何时执行，因此建议我将代码插入到 constructor 或 ngInit() 方法中，但我发现了相同的结果我上面谈到的问题。因此，我尝试添加服务，但错误仍然存在。

Answer 1

我也遇到了同样的问题。我在服务中创建了一个方法itiateSocket()，然后在视图初始化后从组件中调用它。它确保您仅在需要时连接到套接字。

Answer 2

no i have same issue with you guys :((
but i fixed mine with socket.io-client
import { AfterViewInit, Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { FooterComponent } from './component/layout/footer/footer.component';
import { Socket } from 'ngx-socket-io';
import { SocketService } from './service/socket.service';
////////////////
import io from 'socket.io-client';
const socket = io('http://localhost:3000');

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, FooterComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent implements OnInit {
  number?: number;

  // constructor(private socket: Socket) {}
  constructor() {}
  ngOnInit(): void {
    try {
      socket.on('garage-campus-AB', (data) => {
        console.log(data);
      });
    } catch (error) {
      console.error('Error:', error);
    }
  }
}