Add logs for events with details

packages/peer-test-app/src/App.css

@@ -24,10 +24,6 @@
   color: white;
 }
 
-.App-link {
-  color: #61dafb;
-}
-
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

packages/peer-test-app/src/App.tsx

@@ -15,6 +15,7 @@ function App() {
     (async () => {
       if (peer) {
         await peer.init(process.env.REACT_APP_SIGNAL_SERVER)
+        console.log(`Peer ID is ${peer.peerId!.toString()}`);
 
         peer.subscribeMessage((peerId, message) => {
           console.log(`${peerId.toString()} > ${message}`)
@@ -23,10 +24,15 @@ function App() {
         window.broadcast = (message: string) => {
           peer.broadcastMessage(message)
         }
-  
-        console.log(`Peer ID is ${peer.peerId!.toString()}`);
       }
     })()
+
+    return () => {
+      if (peer) {
+        // TODO: Await for peer close
+        peer.close()
+      }
+    }
   }, [peer])
 
   useEffect(() => {
@@ -38,16 +44,8 @@ function App() {
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
-          Edit <code>src/App.tsx</code> and save to reload.
+          Peer messaging app
         </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
       </header>
     </div>
   );

packages/peer/src/index.ts

@@ -65,18 +65,23 @@ export class Peer {
       ]
     });
 
+    console.log('libp2p node created', this._node);
+
     // Listen for peers discovery
     this._node.addEventListener('peer:discovery', (evt) => {
+      console.log('event peer:discovery', evt);
       this._handleDiscovery(evt.detail);
     });
 
     // Listen for peers connection
     this._node.connectionManager.addEventListener('peer:connect', (evt) => {
+      console.log('event peer:connect', evt);
       this._handleConnect(evt.detail);
     });
 
     // Listen for peers disconnecting
     this._node.connectionManager.addEventListener('peer:disconnect', (evt) => {
+      console.log('event peer:disconnect', evt);
       this._handleDisconnect(evt.detail);
     });
 
@@ -86,6 +91,18 @@ export class Peer {
     });
   }
 
+  async close (): Promise<void> {
+    assert(this._node);
+
+    this._node.removeEventListener('peer:discovery');
+    this._node.connectionManager.removeEventListener('peer:connect');
+    this._node.connectionManager.removeEventListener('peer:disconnect');
+
+    await this._node.unhandle(PROTOCOL);
+    const hangUpPromises = this._remotePeerIds.map(async peerId => this._node?.hangUp(peerId));
+    await Promise.all(hangUpPromises);
+  }
+
   broadcastMessage (message: string): void {
     for (const [, stream] of this._peerStreamMap) {
       stream.push(message);
@@ -104,6 +121,8 @@ export class Peer {
   }
 
   _handleDiscovery (peer: PeerInfo): void {
+    console.log('Discovered peer multiaddrs', peer.multiaddrs.map(addr => addr.toString()));
+
     // Check connected peers as they are discovered repeatedly.
     if (!this._remotePeerIds.some(remotePeerId => remotePeerId.toString() === peer.id.toString())) {
       this._connectPeer(peer);
@@ -128,7 +147,7 @@ export class Peer {
 
   async _connectPeer (peer: PeerInfo): Promise<void> {
     assert(this._node);
-    console.log(`Found peer ${peer.id.toString()}`);
+    console.log(`Dialling peer ${peer.id.toString()}`);
 
     // Dial them when we discover them
     const stream = await this._node.dialProtocol(peer.id, PROTOCOL);
@@ -137,6 +156,7 @@ export class Peer {
   }
 
   _handleStream (peerId: PeerId, stream: P2PStream): void {
+    console.log('Stream after connection', stream);
     const messageStream = pushable<string>({ objectMode: true });
 
     // Send message to pipe from stdin