2

src/app/components/host/host.component.html

@@ -9,6 +9,7 @@ <h1>host</h1>
   <button (click)="syncWithRemote()">sync</button>
 </div>
 <div>
+  <p>{{message()}}</p>
   <input type="text" [formControl]="messageControl" />
   <button (click)="sendDataToRemote()">send</button>
 </div>

src/app/components/host/host.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, signal, ChangeDetectorRef, inject } from '@angular/core';
 import { ReactiveFormsModule, FormControl } from '@angular/forms';
 import { Host } from './host';
 
@@ -9,15 +9,17 @@ import { Host } from './host';
   templateUrl: './host.component.html'
 })
 export class HostComponent implements OnInit {
+  private changeDetector = inject(ChangeDetectorRef);
   private host = new Host();
   offer = '';
   candidate = '';
+  message = signal('');
   messageControl = new FormControl('');
   remoteOfferControl = new FormControl('');
   remoteCandidateControl = new FormControl('');
 
   async ngOnInit() {
-    const { offer, candidate } = await this.host.createConnection();
+    const { offer, candidate } = await this.host.createConnection({ onReceiveMessageCallback: event => this.onReceiveMessageCallback(event) });
     this.offer = JSON.stringify(offer);
     this.candidate = JSON.stringify(candidate);
   }
@@ -32,4 +34,9 @@ export class HostComponent implements OnInit {
     const message = this.messageControl.value || '';
     this.host.sendDataToRemote(message);
   }
+
+  private onReceiveMessageCallback(event: MessageEvent) {
+    this.message.set(event.data);
+    this.changeDetector.detectChanges();
+  }
 }

src/app/components/host/host.ts

@@ -2,15 +2,16 @@ export class Host {
   private readonly CHANNEL = 'SendDataChannel';
   private peerConnection: RTCPeerConnection;
   private offer!: RTCSessionDescriptionInit;
-  private sendChannel!: RTCDataChannel;
+  private channel!: RTCDataChannel;
 
   constructor() {
     this.peerConnection = new RTCPeerConnection();
   }
 
-  createConnection() {
+  createConnection({ onReceiveMessageCallback }: { onReceiveMessageCallback: (event: MessageEvent) => void }) {
     return new Promise<{ offer: RTCSessionDescriptionInit, candidate: RTCIceCandidateInit }>(async (resolve) => {
       this.createChannel();
+      this.receiveChannel({ onReceiveMessageCallback });
       this.peerConnection.onicecandidate = ({ candidate }) => {
         if (candidate) {
           resolve({
@@ -23,13 +24,17 @@ export class Host {
     });
   }
 
+  private receiveChannel({ onReceiveMessageCallback }: { onReceiveMessageCallback: (event: MessageEvent) => void }) {
+    this.channel.onmessage = event => { onReceiveMessageCallback(event) };
+  }
+
   private async createOffer() {
     this.offer = await this.peerConnection.createOffer();
     this.peerConnection.setLocalDescription(this.offer);
   }
 
   private createChannel() {
-    this.sendChannel = this.peerConnection.createDataChannel(this.CHANNEL);
+    this.channel = this.peerConnection.createDataChannel(this.CHANNEL);
   }
 
   syncWithRemote({ offer, candidate }: { offer: RTCSessionDescriptionInit; candidate: RTCIceCandidateInit }) {
@@ -38,6 +43,6 @@ export class Host {
   }
 
   sendDataToRemote(data: string) {
-    this.sendChannel.send(data);
+    this.channel.send(data);
   }
 }

src/app/components/remote/remote.component.ts

@@ -10,6 +10,7 @@ import { Remote } from './remote';
 })
 export class RemoteComponent {
   private changeDetector = inject(ChangeDetectorRef);
+  private remote = new Remote();
   message = signal('');
   messageControl = new FormControl('');
   hostOfferControl = new FormControl('');
@@ -20,19 +21,19 @@ export class RemoteComponent {
   async syncWithHost() {
     const hostOffer = JSON.parse(this.hostOfferControl.value || '') as RTCSessionDescriptionInit;
     const hostCandidate = JSON.parse(this.hostCandidateControl.value || '') as RTCIceCandidateInit;
-    const remote = new Remote();
-    const { candidate, offer } = await remote.createConnection({ offer: hostOffer, onReceiveMessageCallback: event => this.onReceiveMessageCallback(event) })
+    const { candidate, offer } = await this.remote.createConnection({ offer: hostOffer, onReceiveMessageCallback: event => this.onReceiveMessageCallback(event) })
 
     this.offer = JSON.stringify(offer);
     this.candidate = JSON.stringify(candidate);
-    remote.syncWithHost({ candidate: hostCandidate });
+    this.remote.syncWithHost({ candidate: hostCandidate });
   }
 
   sendDataToRemote() {
+    const message = this.messageControl.value || '';
+    this.remote.sendDataToRemote(message);
   }
 
   private onReceiveMessageCallback(event: MessageEvent) {
-    console.log('Received Message 11111', event.data);
     this.message.set(event.data);
     this.changeDetector.detectChanges();
   }

src/app/components/remote/remote.ts

@@ -1,6 +1,7 @@
 export class Remote {
   private peerConnection: RTCPeerConnection;
   private offer!: RTCSessionDescriptionInit;
+  private channel!: RTCDataChannel;
 
   constructor() {
     this.peerConnection = new RTCPeerConnection();
@@ -30,10 +31,15 @@ export class Remote {
   private receiveChannel({ onReceiveMessageCallback }: { onReceiveMessageCallback: (event: MessageEvent) => void }) {
     this.peerConnection.ondatachannel = event => {
       const { channel } = event;
+      this.channel = channel;
       channel.onmessage = event => { onReceiveMessageCallback(event) };
     };
   }
 
+  sendDataToRemote(data: string) {
+    this.channel.send(data);
+  }
+
   syncWithHost({ candidate }: { candidate: RTCIceCandidateInit }) {
     this.peerConnection.addIceCandidate(candidate);
   }