logos-messaging/examples.waku.org
1
0
Fork 0
mirror of https://github.com/logos-messaging/examples.waku.org.git synced 2026-01-02 12:53:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

decouple useNodePeers hook

Browse Source
This commit is contained in:
Sasha 2023-02-23 19:23:52 +01:00
parent b898e5b243
commit 522ebb93c0
No known key found for this signature in database
2 changed files with 59 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
examples/web-chat/src/Room.tsx
View File

@ -5,7 +5,7 @@ import { useWaku, useContentPair, useLightPush } from "@waku/react";
import { TitleBar } from "@livechat/ui-kit";
import { Message } from "./Message";
import { ChatMessage } from "./chat_message";
import { useEffect, useState } from "react";
import { useNodePeers } from "./hooks";
interface Props {
messages: Message[];
@ -17,6 +17,13 @@ export default function Room(props: Props) {
const { node } = useWaku<LightNode>();
const { encoder } = useContentPair();
const { push: onPush } = useLightPush({ node, encoder });
const {
lightPushPeers,
filterPeers,
storePeers,
bootstrapPeers,
peerExchangePeers,
} = useNodePeers(node);
const onSend = async (text: string) => {
if (!onPush) {
@ -38,47 +45,6 @@ export default function Room(props: Props) {
}
};
const [storePeers, setStorePeers] = useState(0);
const [filterPeers, setFilterPeers] = useState(0);
const [lightPushPeers, setLightPushPeers] = useState(0);
const [bootstrapPeers, setBootstrapPeers] = useState(new Set<string>());
const [peerExchangePeers, setPeerExchangePeers] = useState(new Set<string>());
useEffect(() => {
if (!node) return;
// Update store peer when new peer connected & identified
node.libp2p.peerStore.addEventListener("change:protocols", async (evt) => {
const { peerId } = evt.detail;
const tags = (await node.libp2p.peerStore.getTags(peerId)).map(
(t) => t.name
);
if (tags.includes("peer-exchange")) {
setPeerExchangePeers((peers) => new Set(peers).add(peerId.toString()));
} else {
setBootstrapPeers((peers) => new Set(peers).add(peerId.toString()));
}
const storePeers = await node.store.peers();
setStorePeers(storePeers.length);
const filterPeers = await node.filter.peers();
setFilterPeers(filterPeers.length);
const lightPushPeers = await node.lightPush.peers();
setLightPushPeers(lightPushPeers.length);
});
}, [node]);
useEffect(() => {
console.log("Bootstrap Peers:");
console.table(bootstrapPeers);
console.log("Peer Exchange Peers:");
console.table(peerExchangePeers);
}, [bootstrapPeers, peerExchangePeers]);
return (
<div
className="chat-container"

51
examples/web-chat/src/hooks.ts
View File

@ -37,3 +37,54 @@ export const useMessages = (params: UseMessagesParams): Message[] => {
.filter((v): v is Message => !!v);
}, [storedMessages, newMessages]);
};
export const useNodePeers = (node: undefined | LightNode) => {
const [storePeers, setStorePeers] = useState(0);
const [filterPeers, setFilterPeers] = useState(0);
const [lightPushPeers, setLightPushPeers] = useState(0);
const [bootstrapPeers, setBootstrapPeers] = useState(new Set<string>());
const [peerExchangePeers, setPeerExchangePeers] = useState(new Set<string>());
useEffect(() => {
if (!node) return;
// Update store peer when new peer connected & identified
node.libp2p.peerStore.addEventListener("change:protocols", async (evt) => {
const { peerId } = evt.detail;
const tags = (await node.libp2p.peerStore.getTags(peerId)).map(
(t) => t.name
);
if (tags.includes("peer-exchange")) {
setPeerExchangePeers((peers) => new Set(peers).add(peerId.toString()));
} else {
setBootstrapPeers((peers) => new Set(peers).add(peerId.toString()));
}
const storePeers = await node.store.peers();
setStorePeers(storePeers.length);
const filterPeers = await node.filter.peers();
setFilterPeers(filterPeers.length);
const lightPushPeers = await node.lightPush.peers();
setLightPushPeers(lightPushPeers.length);
});
}, [node]);
useEffect(() => {
console.log("Bootstrap Peers:");
console.table(bootstrapPeers);
console.log("Peer Exchange Peers:");
console.table(peerExchangePeers);
}, [bootstrapPeers, peerExchangePeers]);
return {
storePeers,
filterPeers,
lightPushPeers,
bootstrapPeers,
peerExchangePeers,
};
};