Angular Framework Binding for `@arkosjs/websockets-client`

[Uanela]

Before All

1. Core Reference - Contributing Framework Bindings

2. Base branch: feat/websockets-client

3. Reference Implementation: React Bindings

4. Implemented Projects: Tic Tac Toe Real Time

---

Summary

Create an Angular adapter package @arkosjs/angular-websockets that wraps @arkosjs/websockets-client with Angular's DI system and RxJS observables.

⚠️ Angular's DI system makes this structurally different from other frameworks. The pattern in the contributing doc is a starting point, not a final design.

Required Files

integrations/angular-websockets/
├── src/
│   ├── lib/
│   │   ├── arkos-client.service.ts      # Root service for client instance
│   │   ├── chat-gateway.service.ts      # Example namespace service
│   │   └── index.ts
│   ├── public-api.ts
│   └── ng-package.json
├── package.json
├── tsconfig.json
└── README.md

API Contract (must match React version idiomatically for Angular)

// app.module.ts or standalone component
import { ArkosClientService } from "@arkosjs/angular-websockets";
import { Manager } from "socket.io-client";

@NgModule({
  providers: [
    {
      provide: ArkosClientService,
      useFactory: () => {
        const service = new ArkosClientService();
        service.init(new Manager("ws://localhost:3000"));
        return service;
      },
    },
  ],
})

// chat.service.ts (example namespace service using the pattern)
@Injectable()
export class ChatService {
  private gateway = this.arkos.getClient().gateway("/chat");
  
  status$ = new BehaviorSubject<GatewayStatus>(this.gateway.status);
  user$ = new BehaviorSubject<any>(this.gateway.user);
  
  constructor(private arkos: ArkosClientService) {
    this.gateway.subscribe({
      onStatus: (s) => this.status$.next(s),
      onUser: (u) => this.user$.next(u),
    });
  }
  
  on<T>(event: string): Observable<T> { ... }
  emit(event: string, data: any, options?: ArkosEmitOptions) { ... }
}

What needs testing (since this code is AI-generated)

• Service initialization with DI
• Cleanup on service destroy (ngOnDestroy)
• Listener cleanup (no memory leaks, RxJS takeUntil pattern)
• status and user as Observables update reactively
• user populates when server emits "authenticated"
• Works with both NgModules and standalone components
• Proper RxJS interop (no mixed paradigms)

Deliverables

• Working Angular adapter package
• Minimal example app demonstrating connect → emit → receive
• Tests (if framework allows)

Note: The code in the contributing document is AI-generated and untested by a real framework user. Your contribution will validate and fix it. Open PR to feat/websockets-client and create your branch from it.