store-react-js retrieves messages from store

This commit is contained in:
Franck Royer 2021-08-04 12:36:17 +10:00
parent dc9ea6dfac
commit 3767dd75a7
No known key found for this signature in database
GPG Key ID: A82ED75A8DFC50A4
3 changed files with 80 additions and 4110 deletions

File diff suppressed because it is too large Load Diff

View File

@ -6,7 +6,7 @@
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"js-waku": "^0.9.0",
"js-waku": "../../build/main",
"protons": "^2.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",

View File

@ -1,23 +1,22 @@
import './App.css';
import { getStatusFleetNodes, Waku } from 'js-waku';
import * as React from 'react';
// import protons from 'protons';
import protons from 'protons';
// const ContentTopic = '/toy-chat/2/huilong/proto';
const ContentTopic = '/toy-chat/2/huilong/proto';
// const proto = protons(`
// message ChatMessage {
// uint64 timestamp = 1;
// string nick = 2;
// bytes text = 3;
// }
// `);
const proto = protons(`
message ChatMessage {
uint64 timestamp = 1;
string nick = 2;
bytes text = 3;
}
`);
function App() {
const [waku, setWaku] = React.useState(undefined);
const [wakuStatus, setWakuStatus] = React.useState('None');
const [connections, setConnections] = React.useState();
const [connectionHasChanged, setConnectionHasChanged] = React.useState(false);
const [messages, setMessages] = React.useState([]);
React.useEffect(() => {
if (!!waku) return;
@ -25,7 +24,7 @@ function App() {
setWakuStatus('Starting');
Waku.create({ relayKeepAlive: 5 }).then((waku) => {
Waku.create().then((waku) => {
setWaku(waku);
setWakuStatus('Connecting');
bootstrapWaku(waku).then(() => {
@ -34,43 +33,33 @@ function App() {
});
}, [waku, wakuStatus]);
React.useEffect(()=> {
connectionChange(waku, setConnectionHasChanged)
}, [waku, connectionHasChanged])
React.useEffect(() => {
if (!waku) return
if (!waku) return;
const conns = Array.from(waku.libp2p.connections).map(([peerId, connections]) => {
return (
<li>
const interval = setInterval(() => {
waku.store
.queryHistory([ContentTopic])
.catch((e) => {
// We may not be connected to a store node just yet
console.log('Failed to retrieve messages', e);
})
.then((retrievedMessages) => {
const messages = retrievedMessages.map(decodeMessage).filter(Boolean);
{peerId}
<ul>
{connections.map((connection) => {
return (
<li>
<small>{connection.remoteAddr.toString()}: {connection.stat.status}</small>
</li>
);
})}
</ul>
</li>
);
});
setMessages(messages);
});
}, 10000);
setConnections(conns)
setConnectionHasChanged(false)
}, [waku, wakuStatus, connectionHasChanged])
return () => clearInterval(interval);
}, [waku]);
return (
<div className="App">
<header className="App-header">
<h2>{wakuStatus}</h2>
<h3>Connections</h3>
<h3>Messages</h3>
<ul>
{connections}
<Messages messages={messages} />
</ul>
</header>
</div>
@ -84,30 +73,40 @@ async function bootstrapWaku(waku) {
await Promise.all(nodes.map((addr) => waku.dial(addr)));
}
// function decodeMessage(wakuMessage) {
// if (!wakuMessage.payload) return;
//
// const { timestamp, nick, buf } = proto.ChatMessage.decode(
// wakuMessage.payload
// );
//
// const time = new Date();
// time.setTime(timestamp);
//
// const text = Buffer.from(buf).toString('utf-8');
//
// return { text, timestamp: time, nick };
// }
function decodeMessage(wakuMessage) {
if (!wakuMessage.payload) return;
function connectionChange(waku, setChange) {
if (!waku) return;
const { timestamp, nick, text } = proto.ChatMessage.decode(
wakuMessage.payload
);
waku.libp2p.connectionManager.on('peer:connect', () => {
setChange(true)
})
waku.libp2p.connectionManager.on('peer:disconnect', () => {
console.log("Peer disconnected")
setChange(true)
})
if (!timestamp) return;
if (!text) return;
const time = new Date();
time.setTime(timestamp);
const utf8Text = Buffer.from(text).toString('utf-8');
return { text: utf8Text, timestamp: time, nick };
}
function Messages(props) {
return props.messages.map(({ text, timestamp, nick }) => {
return (
<li>
({formatDate(timestamp)}) {nick}: {text}
</li>
);
});
}
function formatDate(timestamp) {
return timestamp.toLocaleString([], {
month: 'short',
day: 'numeric',
hour: 'numeric',
minute: '2-digit',
hour12: false,
});
}