fluencelabs/examples
1
0
Fork 0
mirror of https://github.com/fluencelabs/examples synced 2025-04-25 02:32:16 +00:00
Code Issues Projects Releases Wiki Activity

Minor fixes to the getting started examples (#14)

Browse Source
This commit is contained in:
Pavel 2021-07-20 17:49:58 +03:00 committed by GitHub
parent 09b4472df9
commit 5ecce263a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 124 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
intro/1-hello-world/aqua/getting-started.aqua
View File

@ -1,9 +1,10 @@
import "@fluencelabs/aqua-lib/builtin.aqua" import "@fluencelabs/aqua-lib/builtin.aqua"
service HelloWorld("HelloWorld"): -- The service runs inside browser
recieveHello(from: PeerId) -> string service HelloPeer("HelloPeer"):
hello(from: PeerId) -> string
func sayHello(peerId: PeerId, relayPeerId: PeerId) -> string: func sayHello(targetPeerId: PeerId, targetRelayPeerId: PeerId) -> string:
on peerId via relayPeerId: on targetPeerId via targetRelayPeerId:
res <- HelloWorld.recieveHello(%init_peer_id%) res <- HelloPeer.hello(%init_peer_id%)
<- res <- res

2
intro/1-hello-world/src/App.scss
View File

@ -99,7 +99,7 @@ table {
} }
.label { .label {
width: 70px; width: 120px;
display: inline-block; display: inline-block;
} }

87
intro/1-hello-world/src/App.tsx
View File

@ -8,27 +8,21 @@ import { sayHello } from "./_aqua/getting-started";
const relayNodes = [krasnodar[0], krasnodar[1], krasnodar[2]]; const relayNodes = [krasnodar[0], krasnodar[1], krasnodar[2]];
const copyToClipboard = (text: string) => {
navigator.clipboard.writeText(text);
};
function App() { function App() {
const [client, setClient] = useState<FluenceClient | null>(null); const [client, setClient] = useState<FluenceClient | null>(null);
const [helloFrom, setHelloFrom] = useState<string | null>(null); const [helloMessage, setHelloMessage] = useState<string | null>(null);
const [peerIdInput, setPeerIdInput] = useState<string>(""); const [peerIdInput, setPeerIdInput] = useState<string>("");
const [relayPeerIdInput, setRelayPeerIdInput] = useState<string>(""); const [relayPeerIdInput, setRelayPeerIdInput] = useState<string>("");
const isConnected = client !== null;
const connect = (relayPeerId: string) => { const connect = (relayPeerId: string) => {
createClient(relayPeerId) createClient(relayPeerId)
.then((client) => { .then((client) => {
// Register handler for this call in aqua: // Register handler for this call in aqua:
// HelloWorld.recieveHello(%init_peer_id%) // HelloPeer.hello(%init_peer_id%)
client.callServiceHandler.on("HelloWorld", "recieveHello", (args) => { client.callServiceHandler.on("HelloPeer", "hello", (args) => {
const [from] = args; const [from] = args;
setHelloFrom("Hello from: \n" + from); setHelloMessage("Hello from: \n" + from);
return "Hello back to you, \n" + from; return "Hello back to you, \n" + from;
}); });
setClient(client); setClient(client);
@ -36,14 +30,17 @@ function App() {
.catch((err) => console.log("Client initialization failed", err)); .catch((err) => console.log("Client initialization failed", err));
}; };
const doSayHello = async () => { const helloBtnOnClick = async () => {
if (client === null) { if (client === null) {
return; return;
} }
// Using aqua is as easy as calling a javascript funсtion
const res = await sayHello(client!, peerIdInput, relayPeerIdInput); const res = await sayHello(client!, peerIdInput, relayPeerIdInput);
setHelloFrom(res); setHelloMessage(res);
}; };
const isConnected = client !== null;
return ( return (
<div className="App"> <div className="App">
<header> <header>
@ -55,30 +52,32 @@ function App() {
<> <>
<h1>Connected</h1> <h1>Connected</h1>
<table> <table>
<tr> <tbody>
<td className="bold">Peer id:</td> <tr>
<td className="mono">{client!.selfPeerId}</td> <td className="bold">Peer id:</td>
<td> <td className="mono">{client!.selfPeerId}</td>
<button <td>
className="btn-clipboard" <button
onClick={() => copyToClipboard(client!.selfPeerId)} className="btn-clipboard"
> onClick={() => copyToClipboard(client!.selfPeerId)}
<i className="gg-clipboard"></i> >
</button> <i className="gg-clipboard"></i>
</td> </button>
</tr> </td>
<tr> </tr>
<td className="bold">Relay peer id:</td> <tr>
<td className="mono">{client!.relayPeerId}</td> <td className="bold">Relay peer id:</td>
<td> <td className="mono">{client!.relayPeerId}</td>
<button <td>
className="btn-clipboard" <button
onClick={() => copyToClipboard(client!.relayPeerId!)} className="btn-clipboard"
> onClick={() => copyToClipboard(client!.relayPeerId!)}
<i className="gg-clipboard"></i> >
</button> <i className="gg-clipboard"></i>
</td> </button>
</tr> </td>
</tr>
</tbody>
</table> </table>
<div> <div>
@ -88,7 +87,7 @@ function App() {
the peer id and relay from the second tab and say hello! the peer id and relay from the second tab and say hello!
</p> </p>
<div className="row"> <div className="row">
<label className="label bold">Peer id</label> <label className="label bold">Target peer id</label>
<input <input
className="input" className="input"
type="text" type="text"
@ -97,7 +96,7 @@ function App() {
/> />
</div> </div>
<div className="row"> <div className="row">
<label className="label bold">Relay</label> <label className="label bold">Target relay</label>
<input <input
className="input" className="input"
type="text" type="text"
@ -106,7 +105,7 @@ function App() {
/> />
</div> </div>
<div className="row"> <div className="row">
<button className="btn btn-hello" onClick={doSayHello}> <button className="btn btn-hello" onClick={helloBtnOnClick}>
say hello say hello
</button> </button>
</div> </div>
@ -128,10 +127,10 @@ function App() {
</> </>
)} )}
{helloFrom && ( {helloMessage && (
<> <>
<h2>Hello from</h2> <h2>Message</h2>
<div> {helloFrom} </div> <div> {helloMessage} </div>
</> </>
)} )}
</div> </div>
@ -139,4 +138,8 @@ function App() {
); );
} }
const copyToClipboard = (text: string) => {
navigator.clipboard.writeText(text);
};
export default App; export default App;

18
intro/1-hello-world/src/_aqua/getting-started.ts
View File

@ -12,7 +12,7 @@ import { RequestFlow } from '@fluencelabs/fluence/dist/internal/RequestFlow';
export async function sayHello(client: FluenceClient, peerId: string, relayPeerId: string, config?: {ttl?: number}): Promise<string> { export async function sayHello(client: FluenceClient, targetPeerId: string, targetRelayPeerId: string, config?: {ttl?: number}): Promise<string> {
let request: RequestFlow; let request: RequestFlow;
const promise = new Promise<string>((resolve, reject) => { const promise = new Promise<string>((resolve, reject) => {
const r = new RequestFlowBuilder() const r = new RequestFlowBuilder()
@ -29,20 +29,20 @@ export async function sayHello(client: FluenceClient, peerId: string, relayPeerI
(seq (seq
(seq (seq
(call %init_peer_id% ("getDataSrv" "-relay-") [] -relay-) (call %init_peer_id% ("getDataSrv" "-relay-") [] -relay-)
(call %init_peer_id% ("getDataSrv" "peerId") [] peerId) (call %init_peer_id% ("getDataSrv" "targetPeerId") [] targetPeerId)
) )
(call %init_peer_id% ("getDataSrv" "relayPeerId") [] relayPeerId) (call %init_peer_id% ("getDataSrv" "targetRelayPeerId") [] targetRelayPeerId)
) )
(call -relay- ("op" "noop") []) (call -relay- ("op" "noop") [])
) )
(call relayPeerId ("op" "noop") []) (call targetRelayPeerId ("op" "noop") [])
) )
(xor (xor
(call peerId ("HelloWorld" "recieveHello") [%init_peer_id%] res) (call targetPeerId ("HelloPeer" "hello") [%init_peer_id%] res)
(seq (seq
(seq (seq
(seq (seq
(call relayPeerId ("op" "noop") []) (call targetRelayPeerId ("op" "noop") [])
(call -relay- ("op" "noop") []) (call -relay- ("op" "noop") [])
) )
(call %init_peer_id% ("errorHandlingSrv" "error") [%last_error% 1]) (call %init_peer_id% ("errorHandlingSrv" "error") [%last_error% 1])
@ -51,7 +51,7 @@ export async function sayHello(client: FluenceClient, peerId: string, relayPeerI
) )
) )
) )
(call relayPeerId ("op" "noop") []) (call targetRelayPeerId ("op" "noop") [])
) )
(call -relay- ("op" "noop") []) (call -relay- ("op" "noop") [])
) )
@ -69,8 +69,8 @@ export async function sayHello(client: FluenceClient, peerId: string, relayPeerI
h.on('getDataSrv', '-relay-', () => { h.on('getDataSrv', '-relay-', () => {
return client.relayPeerId!; return client.relayPeerId!;
}); });
h.on('getDataSrv', 'peerId', () => {return peerId;}); h.on('getDataSrv', 'targetPeerId', () => {return targetPeerId;});
h.on('getDataSrv', 'relayPeerId', () => {return relayPeerId;}); h.on('getDataSrv', 'targetRelayPeerId', () => {return targetRelayPeerId;});
h.onEvent('callbackSrv', 'response', (args) => { h.onEvent('callbackSrv', 'response', (args) => {
const [res] = args; const [res] = args;
resolve(res); resolve(res);

31
intro/3-hello-world-web3/aqua/getting-started.aqua
View File

@ -1,24 +1,29 @@
import "@fluencelabs/aqua-lib/builtin.aqua" import "@fluencelabs/aqua-lib/builtin.aqua"
const helloServiceNode ?= "12D3KooWHLxVhUQyAuZe6AHMB29P7wkvTNMn7eDMcsqimJYLKREf" const helloWorldNodePeerId ?= "12D3KooWHLxVhUQyAuZe6AHMB29P7wkvTNMn7eDMcsqimJYLKREf"
const helloServiceId ?= "ba24be5b-9789-48ac-b38a-82c9d3eb0d34" const helloWorldServiceId ?= "ba24be5b-9789-48ac-b38a-82c9d3eb0d34"
data HelloComputation: data HelloResponse:
msg: string msg: string
reply: string reply: string
service HelloWorldCompute: -- The service runs on a Fluence node
hello_world(from: string) -> HelloComputation service HelloWorld:
hello_world(from: PeerId) -> HelloResponse
service HelloWorld("HelloWorld"): -- The service runs inside browser
recieveHello(message: string) -> string service HelloPeer("HelloPeer"):
hello(message: string) -> string
func sayHello(peerId: PeerId, relayPeerId: PeerId) -> string: func sayHello(targetPeerId: PeerId, targetRelayPeerId: PeerId) -> string:
on helloServiceNode: -- execute computation on a Peer in the network
HelloWorldCompute helloServiceId on helloWorldNodePeerId:
comp <- HelloWorldCompute.hello_world(%init_peer_id%) HelloWorld helloWorldServiceId
comp <- HelloWorld.hello_world(%init_peer_id%)
co on peerId via relayPeerId: -- send the result to target browser in the background
HelloWorld.recieveHello(comp.msg) co on targetPeerId via targetRelayPeerId:
res <- HelloPeer.hello(%init_peer_id%)
-- send the result to the initiator
<- comp.reply <- comp.reply

2
intro/3-hello-world-web3/src/App.scss
View File

@ -99,7 +99,7 @@ table {
} }
.label { .label {
width: 70px; width: 120px;
display: inline-block; display: inline-block;
} }

84
intro/3-hello-world-web3/src/App.tsx
View File

@ -8,19 +8,13 @@ import { sayHello } from "./_aqua/getting-started";
const relayNodes = [krasnodar[0], krasnodar[1], krasnodar[2]]; const relayNodes = [krasnodar[0], krasnodar[1], krasnodar[2]];
const copyToClipboard = (text: string) => {
navigator.clipboard.writeText(text);
};
function App() { function App() {
const [client, setClient] = useState<FluenceClient | null>(null); const [client, setClient] = useState<FluenceClient | null>(null);
const [helloFrom, setHelloFrom] = useState<string | null>(null); const [helloMessage, setHelloMessage] = useState<string | null>(null);
const [peerIdInput, setPeerIdInput] = useState<string>(""); const [peerIdInput, setPeerIdInput] = useState<string>("");
const [relayPeerIdInput, setRelayPeerIdInput] = useState<string>(""); const [relayPeerIdInput, setRelayPeerIdInput] = useState<string>("");
const isConnected = client !== null;
const connect = (relayPeerId: string) => { const connect = (relayPeerId: string) => {
createClient(relayPeerId) createClient(relayPeerId)
.then((client) => { .then((client) => {
@ -30,8 +24,9 @@ function App() {
"HelloWorld", "HelloWorld",
"recieveHello", "recieveHello",
(args) => { (args) => {
// no computation is done inside the browser
const [msg] = args; const [msg] = args;
setHelloFrom(msg); setHelloMessage(msg);
} }
); );
setClient(client); setClient(client);
@ -39,14 +34,17 @@ function App() {
.catch((err) => console.log("Client initialization failed", err)); .catch((err) => console.log("Client initialization failed", err));
}; };
const doSayHello = async () => { const helloBtnOnClick = async () => {
if (client === null) { if (client === null) {
return; return;
} }
// Using aqua is as easy as calling a javascript funсtion
const res = await sayHello(client!, peerIdInput, relayPeerIdInput); const res = await sayHello(client!, peerIdInput, relayPeerIdInput);
setHelloFrom(res); setHelloMessage(res);
}; };
const isConnected = client !== null;
return ( return (
<div className="App"> <div className="App">
<header> <header>
@ -58,30 +56,32 @@ function App() {
<> <>
<h1>Connected</h1> <h1>Connected</h1>
<table> <table>
<tr> <tbody>
<td className="bold">Peer id:</td> <tr>
<td className="mono">{client!.selfPeerId}</td> <td className="bold">Peer id:</td>
<td> <td className="mono">{client!.selfPeerId}</td>
<button <td>
className="btn-clipboard" <button
onClick={() => copyToClipboard(client!.selfPeerId)} className="btn-clipboard"
> onClick={() => copyToClipboard(client!.selfPeerId)}
<i className="gg-clipboard"></i> >
</button> <i className="gg-clipboard"></i>
</td> </button>
</tr> </td>
<tr> </tr>
<td className="bold">Relay peer id:</td> <tr>
<td className="mono">{client!.relayPeerId}</td> <td className="bold">Relay peer id:</td>
<td> <td className="mono">{client!.relayPeerId}</td>
<button <td>
className="btn-clipboard" <button
onClick={() => copyToClipboard(client!.relayPeerId!)} className="btn-clipboard"
> onClick={() => copyToClipboard(client!.relayPeerId!)}
<i className="gg-clipboard"></i> >
</button> <i className="gg-clipboard"></i>
</td> </button>
</tr> </td>
</tr>
</tbody>
</table> </table>
<div> <div>
@ -91,7 +91,7 @@ function App() {
the peer id and relay from the second tab and say hello! the peer id and relay from the second tab and say hello!
</p> </p>
<div className="row"> <div className="row">
<label className="label bold">Peer id</label> <label className="label bold">Target peer id</label>
<input <input
className="input" className="input"
type="text" type="text"
@ -100,7 +100,7 @@ function App() {
/> />
</div> </div>
<div className="row"> <div className="row">
<label className="label bold">Relay</label> <label className="label bold">Target relay</label>
<input <input
className="input" className="input"
type="text" type="text"
@ -109,7 +109,7 @@ function App() {
/> />
</div> </div>
<div className="row"> <div className="row">
<button className="btn btn-hello" onClick={doSayHello}> <button className="btn btn-hello" onClick={helloBtnOnClick}>
say hello say hello
</button> </button>
</div> </div>
@ -131,10 +131,10 @@ function App() {
</> </>
)} )}
{helloFrom && ( {helloMessage && (
<> <>
<h2>Hello from</h2> <h2>Message</h2>
<div> {helloFrom} </div> <div> {helloMessage} </div>
</> </>
)} )}
</div> </div>
@ -142,4 +142,8 @@ function App() {
); );
} }
const copyToClipboard = (text: string) => {
navigator.clipboard.writeText(text);
};
export default App; export default App;