update hooks for new API/add verbosity
This commit is contained in:
parent
f759768cfd
commit
828e15b2f7
|
@ -24,7 +24,9 @@ export default function Room(props: Props) {
|
||||||
discoveredBootstrapPeers,
|
discoveredBootstrapPeers,
|
||||||
discoveredPeerExchangePeers,
|
discoveredPeerExchangePeers,
|
||||||
} = useNodePeers(node);
|
} = useNodePeers(node);
|
||||||
const { storePeers, filterPeers, lightPushPeers } = usePeers({ node });
|
const { allConnected, storePeers, filterPeers, lightPushPeers } = usePeers({
|
||||||
|
node,
|
||||||
|
});
|
||||||
|
|
||||||
const onSend = async (text: string) => {
|
const onSend = async (text: string) => {
|
||||||
if (!onPush || !text) {
|
if (!onPush || !text) {
|
||||||
|
@ -46,13 +48,29 @@ export default function Room(props: Props) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const allConnectedLength = orZero(allConnected?.length);
|
||||||
const lightPushPeersLength = orZero(lightPushPeers?.length);
|
const lightPushPeersLength = orZero(lightPushPeers?.length);
|
||||||
const filterPeersLength = orZero(filterPeers?.length);
|
const filterPeersLength = orZero(filterPeers?.length);
|
||||||
const storePeersLength = orZero(storePeers?.length);
|
const storePeersLength = orZero(storePeers?.length);
|
||||||
|
|
||||||
const peersMessage = `Peers: ${lightPushPeersLength} light push, ${filterPeersLength} filter, ${storePeersLength} store.`;
|
const peersMessage = `Peers Connected: ${allConnectedLength}
|
||||||
const bootstrapPeersMessage = `Bootstrap peers: ${connectedBootstrapPeers.length} connected, ${discoveredBootstrapPeers.length} discovered.`;
|
Store: ${storePeersLength}
|
||||||
const peerExchangePeersMessage = `Peer exchange peers: ${connectedPeerExchangePeers.length} connected, ${discoveredPeerExchangePeers.length} discovered.`;
|
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 (
|
return (
|
||||||
<div
|
<div
|
||||||
|
@ -61,7 +79,7 @@ export default function Room(props: Props) {
|
||||||
>
|
>
|
||||||
<TitleBar
|
<TitleBar
|
||||||
leftIcons={[peersMessage]}
|
leftIcons={[peersMessage]}
|
||||||
rightIcons={[bootstrapPeersMessage, " ", peerExchangePeersMessage]}
|
rightIcons={[protocolsPeersMessage]}
|
||||||
title="Waku v2 chat app"
|
title="Waku v2 chat app"
|
||||||
/>
|
/>
|
||||||
<ChatList messages={props.messages} />
|
<ChatList messages={props.messages} />
|
||||||
|
|
|
@ -1,12 +1,14 @@
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { generate } from "server-name-generator";
|
import { generate } from "server-name-generator";
|
||||||
import { Message } from "./Message";
|
import { Message } from "./Message";
|
||||||
|
import type { PeerId } from "@libp2p/interface-peer-id";
|
||||||
import type { Peer } from "@libp2p/interface-peer-store";
|
import type { Peer } from "@libp2p/interface-peer-store";
|
||||||
import {
|
import {
|
||||||
EPeersByDiscoveryEvents,
|
EPeersByDiscoveryEvents,
|
||||||
LightNode,
|
LightNode,
|
||||||
StoreQueryOptions,
|
StoreQueryOptions,
|
||||||
Waku,
|
Waku,
|
||||||
|
Tags,
|
||||||
} from "@waku/interfaces";
|
} from "@waku/interfaces";
|
||||||
import type { waku } from "@waku/sdk";
|
import type { waku } from "@waku/sdk";
|
||||||
|
|
||||||
|
@ -64,45 +66,93 @@ export const useMessages = (params: UseMessagesParams): UseMessagesResult => {
|
||||||
// can be safely ignored
|
// can be safely ignored
|
||||||
// this is for experiments on waku side around new discovery options
|
// this is for experiments on waku side around new discovery options
|
||||||
export const useNodePeers = (node: undefined | LightNode) => {
|
export const useNodePeers = (node: undefined | LightNode) => {
|
||||||
const [discoveredBootstrapPeers, setBootstrapPeers] = useState<Peer[]>([]);
|
const [discoveredBootstrapPeers, setBootstrapPeers] = useState<Set<PeerId>>(
|
||||||
const [connectedBootstrapPeers, setConnectedBootstrapPeers] = useState<
|
new Set()
|
||||||
Peer[]
|
|
||||||
>([]);
|
|
||||||
const [discoveredPeerExchangePeers, setPeerExchangePeers] = useState<Peer[]>(
|
|
||||||
[]
|
|
||||||
);
|
);
|
||||||
|
const [connectedBootstrapPeers, setConnectedBootstrapPeers] = useState<
|
||||||
|
Set<PeerId>
|
||||||
|
>(new Set());
|
||||||
|
const [discoveredPeerExchangePeers, setPeerExchangePeers] = useState<
|
||||||
|
Set<PeerId>
|
||||||
|
>(new Set());
|
||||||
const [connectedPeerExchangePeers, setConnectedPeerExchangePeers] = useState<
|
const [connectedPeerExchangePeers, setConnectedPeerExchangePeers] = useState<
|
||||||
Peer[]
|
Set<PeerId>
|
||||||
>([]);
|
>(new Set());
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!node) return;
|
if (!node) return;
|
||||||
|
|
||||||
//TODO: remove any once @waku/sdk is updated
|
const handleDiscoveryBootstrap = (event: CustomEvent<PeerId>) => {
|
||||||
(node as any).connectionManager.addEventListener(
|
setBootstrapPeers((peers) => new Set([...peers, event.detail]));
|
||||||
EPeersByDiscoveryEvents.PEER_DISCOVERY_BOOTSTRAP,
|
};
|
||||||
(event: CustomEvent<Peer>) => {
|
|
||||||
setBootstrapPeers((prev) => [...prev, event.detail]);
|
const handleConnectBootstrap = (event: CustomEvent<PeerId>) => {
|
||||||
}
|
setConnectedBootstrapPeers((peers) => new Set([...peers, event.detail]));
|
||||||
);
|
};
|
||||||
(node as any).connectionManager.addEventListener(
|
|
||||||
EPeersByDiscoveryEvents.PEER_CONNECT_BOOTSTRAP,
|
const handleDiscoveryPeerExchange = (event: CustomEvent<PeerId>) => {
|
||||||
(event: CustomEvent<Peer>) => {
|
setPeerExchangePeers((peers) => new Set([...peers, event.detail]));
|
||||||
setConnectedBootstrapPeers((prev) => [...prev, event.detail]);
|
};
|
||||||
}
|
|
||||||
);
|
const handleConnectPeerExchange = (event: CustomEvent<PeerId>) => {
|
||||||
(node as any).connectionManager.addEventListener(
|
setConnectedPeerExchangePeers(
|
||||||
EPeersByDiscoveryEvents.PEER_DISCOVERY_PEER_EXCHANGE,
|
(peers) => new Set([...peers, event.detail])
|
||||||
(event: CustomEvent<Peer>) => {
|
);
|
||||||
setPeerExchangePeers((prev) => [...prev, event.detail]);
|
};
|
||||||
}
|
|
||||||
);
|
const fetchData = async () => {
|
||||||
(node as any).connectionManager.addEventListener(
|
const { CONNECTED, DISCOVERED } =
|
||||||
EPeersByDiscoveryEvents.PEER_CONNECT_PEER_EXCHANGE,
|
await node.connectionManager.getPeersByDiscovery();
|
||||||
(event: CustomEvent<Peer>) => {
|
|
||||||
setConnectedPeerExchangePeers((prev) => [...prev, event.detail]);
|
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]);
|
}, [node]);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
@ -118,9 +168,10 @@ type UsePeersParams = {
|
||||||
};
|
};
|
||||||
|
|
||||||
type UsePeersResults = {
|
type UsePeersResults = {
|
||||||
storePeers?: undefined | Peer[];
|
allConnected?: PeerId[];
|
||||||
filterPeers?: undefined | Peer[];
|
storePeers?: PeerId[];
|
||||||
lightPushPeers?: undefined | Peer[];
|
filterPeers?: PeerId[];
|
||||||
|
lightPushPeers?: PeerId[];
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -135,22 +186,24 @@ export const usePeers = (params: UsePeersParams): UsePeersResults => {
|
||||||
const { node } = params;
|
const { node } = params;
|
||||||
const [peers, setPeers] = React.useState<UsePeersResults>({});
|
const [peers, setPeers] = React.useState<UsePeersResults>({});
|
||||||
|
|
||||||
React.useEffect(() => {
|
useEffect(() => {
|
||||||
if (!node) {
|
if (!node) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const listener = async () => {
|
const listener = async () => {
|
||||||
const peers = await Promise.all([
|
const peers = await Promise.all([
|
||||||
|
node?.libp2p.getConnections().map((c) => c.remotePeer),
|
||||||
handleCatch(node?.store?.peers()),
|
handleCatch(node?.store?.peers()),
|
||||||
handleCatch(node?.filter?.peers()),
|
handleCatch(node?.filter?.peers()),
|
||||||
handleCatch(node?.lightPush?.peers()),
|
handleCatch(node?.lightPush?.peers()),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
setPeers({
|
setPeers({
|
||||||
storePeers: peers[0],
|
allConnected: peers[0],
|
||||||
filterPeers: peers[1],
|
storePeers: peers[1]?.map((p) => p.id),
|
||||||
lightPushPeers: peers[2],
|
filterPeers: peers[2]?.map((p) => p.id),
|
||||||
|
lightPushPeers: peers[3]?.map((p) => p.id),
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue