diff --git a/examples/web-chat/src/Room.tsx b/examples/web-chat/src/Room.tsx
index 508ffd1..bfee176 100644
--- a/examples/web-chat/src/Room.tsx
+++ b/examples/web-chat/src/Room.tsx
@@ -24,7 +24,9 @@ export default function Room(props: Props) {
discoveredBootstrapPeers,
discoveredPeerExchangePeers,
} = useNodePeers(node);
- const { storePeers, filterPeers, lightPushPeers } = usePeers({ node });
+ const { allConnected, storePeers, filterPeers, lightPushPeers } = usePeers({
+ node,
+ });
const onSend = async (text: string) => {
if (!onPush || !text) {
@@ -46,13 +48,29 @@ export default function Room(props: Props) {
}
};
+ const allConnectedLength = orZero(allConnected?.length);
const lightPushPeersLength = orZero(lightPushPeers?.length);
const filterPeersLength = orZero(filterPeers?.length);
const storePeersLength = orZero(storePeers?.length);
- const peersMessage = `Peers: ${lightPushPeersLength} light push, ${filterPeersLength} filter, ${storePeersLength} store.`;
- const bootstrapPeersMessage = `Bootstrap peers: ${connectedBootstrapPeers.length} connected, ${discoveredBootstrapPeers.length} discovered.`;
- const peerExchangePeersMessage = `Peer exchange peers: ${connectedPeerExchangePeers.length} connected, ${discoveredPeerExchangePeers.length} discovered.`;
+ const peersMessage = `Peers Connected: ${allConnectedLength}
+ Store: ${storePeersLength}
+ Filter: ${filterPeersLength}
+ Light Push: ${lightPushPeersLength}
+ `;
+
+ const protocolsPeersMessage = `Peers Discovered: ${
+ discoveredBootstrapPeers.size + discoveredPeerExchangePeers.size
+ }
+ Bootstrap: ${discoveredBootstrapPeers.size}
+ Peer Exchange: ${discoveredPeerExchangePeers.size};
+
+ Peers Connected: ${
+ connectedBootstrapPeers.size + connectedPeerExchangePeers.size
+ }
+ Bootstrap: ${connectedBootstrapPeers.size}
+ Peer Exchange: ${connectedPeerExchangePeers.size}
+ `;
return (
diff --git a/examples/web-chat/src/hooks.ts b/examples/web-chat/src/hooks.ts
index de7485a..09dde46 100644
--- a/examples/web-chat/src/hooks.ts
+++ b/examples/web-chat/src/hooks.ts
@@ -1,12 +1,14 @@
import React, { useEffect, useState } from "react";
import { generate } from "server-name-generator";
import { Message } from "./Message";
+import type { PeerId } from "@libp2p/interface-peer-id";
import type { Peer } from "@libp2p/interface-peer-store";
import {
EPeersByDiscoveryEvents,
LightNode,
StoreQueryOptions,
Waku,
+ Tags,
} from "@waku/interfaces";
import type { waku } from "@waku/sdk";
@@ -64,45 +66,93 @@ 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 [discoveredBootstrapPeers, setBootstrapPeers] = useState
([]);
- const [connectedBootstrapPeers, setConnectedBootstrapPeers] = useState<
- Peer[]
- >([]);
- const [discoveredPeerExchangePeers, setPeerExchangePeers] = useState(
- []
+ const [discoveredBootstrapPeers, setBootstrapPeers] = useState>(
+ new Set()
);
+ const [connectedBootstrapPeers, setConnectedBootstrapPeers] = useState<
+ Set
+ >(new Set());
+ const [discoveredPeerExchangePeers, setPeerExchangePeers] = useState<
+ Set
+ >(new Set());
const [connectedPeerExchangePeers, setConnectedPeerExchangePeers] = useState<
- Peer[]
- >([]);
+ Set
+ >(new Set());
useEffect(() => {
if (!node) return;
- //TODO: remove any once @waku/sdk is updated
- (node as any).connectionManager.addEventListener(
- EPeersByDiscoveryEvents.PEER_DISCOVERY_BOOTSTRAP,
- (event: CustomEvent) => {
- setBootstrapPeers((prev) => [...prev, event.detail]);
- }
- );
- (node as any).connectionManager.addEventListener(
- EPeersByDiscoveryEvents.PEER_CONNECT_BOOTSTRAP,
- (event: CustomEvent) => {
- setConnectedBootstrapPeers((prev) => [...prev, event.detail]);
- }
- );
- (node as any).connectionManager.addEventListener(
- EPeersByDiscoveryEvents.PEER_DISCOVERY_PEER_EXCHANGE,
- (event: CustomEvent) => {
- setPeerExchangePeers((prev) => [...prev, event.detail]);
- }
- );
- (node as any).connectionManager.addEventListener(
- EPeersByDiscoveryEvents.PEER_CONNECT_PEER_EXCHANGE,
- (event: CustomEvent) => {
- setConnectedPeerExchangePeers((prev) => [...prev, event.detail]);
- }
- );
+ const handleDiscoveryBootstrap = (event: CustomEvent) => {
+ setBootstrapPeers((peers) => new Set([...peers, event.detail]));
+ };
+
+ const handleConnectBootstrap = (event: CustomEvent) => {
+ setConnectedBootstrapPeers((peers) => new Set([...peers, event.detail]));
+ };
+
+ const handleDiscoveryPeerExchange = (event: CustomEvent) => {
+ setPeerExchangePeers((peers) => new Set([...peers, event.detail]));
+ };
+
+ const handleConnectPeerExchange = (event: CustomEvent) => {
+ setConnectedPeerExchangePeers(
+ (peers) => new Set([...peers, event.detail])
+ );
+ };
+
+ const fetchData = async () => {
+ const { CONNECTED, DISCOVERED } =
+ await node.connectionManager.getPeersByDiscovery();
+
+ setConnectedBootstrapPeers(
+ new Set(CONNECTED[Tags.BOOTSTRAP].map((p) => p.id))
+ );
+ setConnectedPeerExchangePeers(
+ new Set(CONNECTED[Tags.PEER_EXCHANGE].map((p) => p.id))
+ );
+ setBootstrapPeers(new Set(DISCOVERED[Tags.BOOTSTRAP].map((p) => p.id)));
+ setPeerExchangePeers(
+ new Set(DISCOVERED[Tags.PEER_EXCHANGE].map((p) => p.id))
+ );
+
+ node.connectionManager.addEventListener(
+ EPeersByDiscoveryEvents.PEER_DISCOVERY_BOOTSTRAP,
+ handleDiscoveryBootstrap
+ );
+ node.connectionManager.addEventListener(
+ EPeersByDiscoveryEvents.PEER_CONNECT_BOOTSTRAP,
+ handleConnectBootstrap
+ );
+ node.connectionManager.addEventListener(
+ EPeersByDiscoveryEvents.PEER_DISCOVERY_PEER_EXCHANGE,
+ handleDiscoveryPeerExchange
+ );
+ node.connectionManager.addEventListener(
+ EPeersByDiscoveryEvents.PEER_CONNECT_PEER_EXCHANGE,
+ handleConnectPeerExchange
+ );
+ };
+
+ fetchData();
+
+ return () => {
+ node.connectionManager.removeEventListener(
+ EPeersByDiscoveryEvents.PEER_DISCOVERY_BOOTSTRAP,
+ handleDiscoveryBootstrap
+ );
+ node.connectionManager.removeEventListener(
+ EPeersByDiscoveryEvents.PEER_CONNECT_BOOTSTRAP,
+ handleConnectBootstrap
+ );
+ node.connectionManager.removeEventListener(
+ EPeersByDiscoveryEvents.PEER_DISCOVERY_PEER_EXCHANGE,
+ handleDiscoveryPeerExchange
+ );
+ node.connectionManager.removeEventListener(
+ EPeersByDiscoveryEvents.PEER_CONNECT_PEER_EXCHANGE,
+ handleConnectPeerExchange
+ );
+ };
}, [node]);
return {
@@ -118,9 +168,10 @@ type UsePeersParams = {
};
type UsePeersResults = {
- storePeers?: undefined | Peer[];
- filterPeers?: undefined | Peer[];
- lightPushPeers?: undefined | Peer[];
+ allConnected?: PeerId[];
+ storePeers?: PeerId[];
+ filterPeers?: PeerId[];
+ lightPushPeers?: PeerId[];
};
/**
@@ -135,22 +186,24 @@ export const usePeers = (params: UsePeersParams): UsePeersResults => {
const { node } = params;
const [peers, setPeers] = React.useState({});
- React.useEffect(() => {
+ useEffect(() => {
if (!node) {
return;
}
const listener = async () => {
const peers = await Promise.all([
+ node?.libp2p.getConnections().map((c) => c.remotePeer),
handleCatch(node?.store?.peers()),
handleCatch(node?.filter?.peers()),
handleCatch(node?.lightPush?.peers()),
]);
setPeers({
- storePeers: peers[0],
- filterPeers: peers[1],
- lightPushPeers: peers[2],
+ allConnected: peers[0],
+ storePeers: peers[1]?.map((p) => p.id),
+ filterPeers: peers[2]?.map((p) => p.id),
+ lightPushPeers: peers[3]?.map((p) => p.id),
});
};