check peer:disconnect vs libp2pPing

examples/web-chat/src/Room.tsx

@@ -6,6 +6,8 @@ import { TitleBar } from "@livechat/ui-kit";
 import { Message } from "./Message";
 import { ChatMessage } from "./chat_message";
 import { useNodePeers } from "./hooks";
+import { useEffect, useState } from "react";
+import type { PeerId } from "@libp2p/interface-peer-id";
 
 interface Props {
   messages: Message[];
@@ -18,9 +20,42 @@ export default function Room(props: Props) {
   const { encoder } = useContentPair();
   const { push: onPush } = useLightPush({ node, encoder });
 
+  const [started, setStarted] = useState(false);
+
   const { bootstrapPeers, peerExchangePeers } = useNodePeers(node);
   const { storePeers, filterPeers, lightPushPeers } = usePeers({ node });
 
+  const ping = (node: LightNode, peerId: PeerId) => {
+    node.libp2p
+      // @ts-ignore
+      .ping(peerId)
+      .then((res) => {
+        console.log(`Ping: ${res}`);
+      })
+      .catch((err) => {
+        console.log(`Ping error: ${err}`);
+      });
+  };
+
+  useEffect(() => {
+    if (!node || (!bootstrapPeers && !peerExchangePeers) || started) return;
+
+    const peerId = Array.from(bootstrapPeers)[0];
+    if (!peerId) return;
+
+    // pings work well and can be interpreted as a good source of checking connectivity with a peer
+    // however, the peer:disconnect event is not triggered when we manually go offline
+
+    node.libp2p.connectionManager.addEventListener("peer:disconnect", (cb) => {
+      console.log("peer:disconnect", cb);
+    });
+    setInterval(() => {
+      ping(node, peerId);
+    }, 1000);
+
+    setStarted(true);
+  }, [node, bootstrapPeers, peerExchangePeers, started]);
+
   const onSend = async (text: string) => {
     if (!onPush || !text) {
       return;

examples/web-chat/src/hooks.ts

@@ -3,6 +3,7 @@ import { generate } from "server-name-generator";
 import { Message } from "./Message";
 import { Decoder } from "@waku/core/lib/message/version_0";
 import { LightNode, StoreQueryOptions } from "@waku/interfaces";
+import type { PeerId } from "@libp2p/interface-peer-id";
 
 import { useFilterMessages, useStoreMessages } from "@waku/react";
 
@@ -58,8 +59,8 @@ export const useMessages = (params: UseMessagesParams): UseMessagesResult => {
 // can be safely ignored
 // this is for experiments on waku side around new discovery options
 export const useNodePeers = (node: undefined | LightNode) => {
-  const [bootstrapPeers, setBootstrapPeers] = useState(new Set<string>());
+  const [bootstrapPeers, setBootstrapPeers] = useState(new Set<PeerId>());
-  const [peerExchangePeers, setPeerExchangePeers] = useState(new Set<string>());
+  const [peerExchangePeers, setPeerExchangePeers] = useState(new Set<PeerId>());
 
   useEffect(() => {
     if (!node) return;
@@ -71,9 +72,9 @@ export const useNodePeers = (node: undefined | LightNode) => {
         (t) => t.name
       );
       if (tags.includes("peer-exchange")) {
-        setPeerExchangePeers((peers) => new Set(peers).add(peerId.toString()));
+        setPeerExchangePeers((peers) => new Set(peers).add(peerId));
       } else {
-        setBootstrapPeers((peers) => new Set(peers).add(peerId.toString()));
+        setBootstrapPeers((peers) => new Set(peers).add(peerId));
       }
     });
   }, [node]);