mirror of
https://github.com/fluencelabs/examples
synced 2025-06-21 22:01:33 +00:00
Update all js-related examples to the latest version of JS SDK and Aqua compiler (#20)
This commit is contained in:
Pavel
GitHub
@ -2,45 +2,46 @@ import React, { useState } from "react";
|
||||
import logo from "./logo.svg";
|
||||
import "./App.scss";
|
||||
|
||||
import { createClient, FluenceClient } from "@fluencelabs/fluence";
|
||||
import { Fluence } from "@fluencelabs/fluence";
|
||||
import { krasnodar } from "@fluencelabs/fluence-network-environment";
|
||||
import { sayHello } from "./_aqua/getting-started";
|
||||
import { registerHelloPeer, sayHello } from "./_aqua/getting-started";
|
||||
|
||||
const relayNodes = [krasnodar[0], krasnodar[1], krasnodar[2]];
|
||||
|
||||
function App() {
|
||||
const [client, setClient] = useState<FluenceClient | null>(null);
|
||||
const [isConnected, setIsConnected] = useState<boolean>(false);
|
||||
const [helloMessage, setHelloMessage] = useState<string | null>(null);
|
||||
|
||||
const [peerIdInput, setPeerIdInput] = useState<string>("");
|
||||
const [relayPeerIdInput, setRelayPeerIdInput] = useState<string>("");
|
||||
|
||||
const connect = (relayPeerId: string) => {
|
||||
createClient(relayPeerId)
|
||||
.then((client) => {
|
||||
// Register handler for this call in aqua:
|
||||
// HelloWorld.recieveHello(%init_peer_id%)
|
||||
client.callServiceHandler.onEvent("HelloPeer", "hello", (args) => {
|
||||
// no computation is done inside the browser
|
||||
const [msg] = args;
|
||||
setHelloMessage(msg);
|
||||
});
|
||||
setClient(client);
|
||||
})
|
||||
.catch((err) => console.log("Client initialization failed", err));
|
||||
const connect = async (relayPeerId: string) => {
|
||||
try {
|
||||
await Fluence.start({ connectTo: relayPeerId });
|
||||
setIsConnected(true);
|
||||
// Register handler for this call in aqua:
|
||||
// HelloPeer.hello(%init_peer_id%)
|
||||
registerHelloPeer({
|
||||
hello: (from) => {
|
||||
setHelloMessage("Hello from: \n" + from);
|
||||
return "Hello back to you, \n" + from;
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
console.log("Peer initialization failed", err);
|
||||
}
|
||||
};
|
||||
|
||||
const helloBtnOnClick = async () => {
|
||||
if (client === null) {
|
||||
if (!isConnected) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Using aqua is as easy as calling a javascript funсtion
|
||||
const res = await sayHello(client!, peerIdInput, relayPeerIdInput);
|
||||
const res = await sayHello(peerIdInput, relayPeerIdInput);
|
||||
setHelloMessage(res);
|
||||
};
|
||||
|
||||
const isConnected = client !== null;
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<header>
|
||||
@ -55,11 +56,11 @@ function App() {
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="bold">Peer id:</td>
|
||||
<td className="mono">{client!.selfPeerId}</td>
|
||||
<td className="mono">{Fluence.getStatus().peerId!}</td>
|
||||
<td>
|
||||
<button
|
||||
className="btn-clipboard"
|
||||
onClick={() => copyToClipboard(client!.selfPeerId)}
|
||||
onClick={() => copyToClipboard(Fluence.getStatus().peerId!)}
|
||||
>
|
||||
<i className="gg-clipboard"></i>
|
||||
</button>
|
||||
@ -67,11 +68,11 @@ function App() {
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="bold">Relay peer id:</td>
|
||||
<td className="mono">{client!.relayPeerId}</td>
|
||||
<td className="mono">{Fluence.getStatus().relayPeerId!}</td>
|
||||
<td>
|
||||
<button
|
||||
className="btn-clipboard"
|
||||
onClick={() => copyToClipboard(client!.relayPeerId!)}
|
||||
onClick={() => copyToClipboard(Fluence.getStatus().relayPeerId!)}
|
||||
>
|
||||
<i className="gg-clipboard"></i>
|
||||
</button>
|
||||
|
||||
@ -3,43 +3,176 @@
|
||||
* This file is auto-generated. Do not edit manually: changes may be erased.
|
||||
* Generated by Aqua compiler: https://github.com/fluencelabs/aqua/.
|
||||
* If you find any bugs, please write an issue on GitHub: https://github.com/fluencelabs/aqua/issues
|
||||
* Aqua version: 0.2.2-221
|
||||
* Aqua version: 0.3.0-226
|
||||
*
|
||||
*/
|
||||
import { FluenceClient, PeerIdB58 } from '@fluencelabs/fluence';
|
||||
import { RequestFlowBuilder } from '@fluencelabs/fluence/dist/api.unstable';
|
||||
import { RequestFlow } from '@fluencelabs/fluence/dist/internal/RequestFlow';
|
||||
import { Fluence, FluencePeer } from '@fluencelabs/fluence';
|
||||
import {
|
||||
ResultCodes,
|
||||
RequestFlow,
|
||||
RequestFlowBuilder,
|
||||
CallParams,
|
||||
} from '@fluencelabs/fluence/dist/internal/compilerSupport/v1';
|
||||
|
||||
|
||||
// Services
|
||||
|
||||
//HelloWorld
|
||||
//defaultId = undefined
|
||||
export interface HelloWorldDef {
|
||||
hello: (from: string, callParams: CallParams<'from'>) => {msg:string;reply:string};
|
||||
}
|
||||
|
||||
//hello: (from: string) => {msg:string;reply:string}
|
||||
//END HelloWorld
|
||||
export function registerHelloWorld(serviceId: string, service: HelloWorldDef): void;
|
||||
export function registerHelloWorld(peer: FluencePeer, serviceId: string, service: HelloWorldDef): void;
|
||||
export function registerHelloWorld(...args: any) {
|
||||
let peer: FluencePeer;
|
||||
let serviceId: any;
|
||||
let service: any;
|
||||
if (FluencePeer.isInstance(args[0])) {
|
||||
peer = args[0];
|
||||
} else {
|
||||
peer = Fluence.getPeer();
|
||||
}
|
||||
|
||||
if (typeof args[0] === 'string') {
|
||||
serviceId = args[0];
|
||||
} else if (typeof args[1] === 'string') {
|
||||
serviceId = args[1];
|
||||
}
|
||||
|
||||
// Figuring out which overload is the service.
|
||||
// If the first argument is not Fluence Peer and it is an object, then it can only be the service def
|
||||
// If the first argument is peer, we are checking further. The second argument might either be
|
||||
// an object, that it must be the service object
|
||||
// or a string, which is the service id. In that case the service is the third argument
|
||||
if (!(FluencePeer.isInstance(args[0])) && typeof args[0] === 'object') {
|
||||
service = args[0];
|
||||
} else if (typeof args[1] === 'object') {
|
||||
service = args[1];
|
||||
} else {
|
||||
service = args[2];
|
||||
}
|
||||
|
||||
peer.internals.callServiceHandler.use((req, resp, next) => {
|
||||
if (req.serviceId !== serviceId) {
|
||||
next();
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (req.fnName === 'hello') {
|
||||
|
||||
const callParams = {
|
||||
...req.particleContext,
|
||||
tetraplets: {
|
||||
from: req.tetraplets[0]
|
||||
},
|
||||
};
|
||||
resp.retCode = ResultCodes.success;
|
||||
resp.result = service.hello(req.args[0], callParams)
|
||||
|
||||
}
|
||||
|
||||
|
||||
next();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
export interface HelloPeerDef {
|
||||
hello: (message: string, callParams: CallParams<'message'>) => string;
|
||||
}
|
||||
|
||||
export function registerHelloPeer(service: HelloPeerDef): void;
|
||||
export function registerHelloPeer(serviceId: string, service: HelloPeerDef): void;
|
||||
export function registerHelloPeer(peer: FluencePeer, service: HelloPeerDef): void;
|
||||
export function registerHelloPeer(peer: FluencePeer, serviceId: string, service: HelloPeerDef): void;
|
||||
export function registerHelloPeer(...args: any) {
|
||||
let peer: FluencePeer;
|
||||
let serviceId: any;
|
||||
let service: any;
|
||||
if (FluencePeer.isInstance(args[0])) {
|
||||
peer = args[0];
|
||||
} else {
|
||||
peer = Fluence.getPeer();
|
||||
}
|
||||
|
||||
//HelloPeer
|
||||
//defaultId = "HelloPeer"
|
||||
if (typeof args[0] === 'string') {
|
||||
serviceId = args[0];
|
||||
} else if (typeof args[1] === 'string') {
|
||||
serviceId = args[1];
|
||||
}
|
||||
else {
|
||||
serviceId = "HelloPeer"
|
||||
}
|
||||
|
||||
//hello: (message: string) => string
|
||||
//END HelloPeer
|
||||
// Figuring out which overload is the service.
|
||||
// If the first argument is not Fluence Peer and it is an object, then it can only be the service def
|
||||
// If the first argument is peer, we are checking further. The second argument might either be
|
||||
// an object, that it must be the service object
|
||||
// or a string, which is the service id. In that case the service is the third argument
|
||||
if (!(FluencePeer.isInstance(args[0])) && typeof args[0] === 'object') {
|
||||
service = args[0];
|
||||
} else if (typeof args[1] === 'object') {
|
||||
service = args[1];
|
||||
} else {
|
||||
service = args[2];
|
||||
}
|
||||
|
||||
peer.internals.callServiceHandler.use((req, resp, next) => {
|
||||
if (req.serviceId !== serviceId) {
|
||||
next();
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (req.fnName === 'hello') {
|
||||
|
||||
const callParams = {
|
||||
...req.particleContext,
|
||||
tetraplets: {
|
||||
message: req.tetraplets[0]
|
||||
},
|
||||
};
|
||||
resp.retCode = ResultCodes.success;
|
||||
resp.result = service.hello(req.args[0], callParams)
|
||||
|
||||
}
|
||||
|
||||
|
||||
next();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Functions
|
||||
|
||||
export async function sayHello(client: FluenceClient, targetPeerId: string, targetRelayPeerId: string, config?: {ttl?: number}): Promise<string> {
|
||||
let request: RequestFlow;
|
||||
const promise = new Promise<string>((resolve, reject) => {
|
||||
const r = new RequestFlowBuilder()
|
||||
.disableInjections()
|
||||
.withRawScript(
|
||||
`
|
||||
(xor
|
||||
export function sayHello(targetPeerId: string, targetRelayPeerId: string, config?: {ttl?: number}) : Promise<string>;
|
||||
export function sayHello(peer: FluencePeer, targetPeerId: string, targetRelayPeerId: string, config?: {ttl?: number}) : Promise<string>;
|
||||
export function sayHello(...args: any) {
|
||||
let peer: FluencePeer;
|
||||
let targetPeerId: any;
|
||||
let targetRelayPeerId: any;
|
||||
let config: any;
|
||||
if (FluencePeer.isInstance(args[0])) {
|
||||
peer = args[0];
|
||||
targetPeerId = args[1];
|
||||
targetRelayPeerId = args[2];
|
||||
config = args[3];
|
||||
} else {
|
||||
peer = Fluence.getPeer();
|
||||
targetPeerId = args[0];
|
||||
targetRelayPeerId = args[1];
|
||||
config = args[2];
|
||||
}
|
||||
|
||||
let request: RequestFlow;
|
||||
const promise = new Promise<string>((resolve, reject) => {
|
||||
const r = new RequestFlowBuilder()
|
||||
.disableInjections()
|
||||
.withRawScript(
|
||||
`
|
||||
(xor
|
||||
(seq
|
||||
(seq
|
||||
(seq
|
||||
@ -92,11 +225,11 @@ export async function sayHello(client: FluenceClient, targetPeerId: string, targ
|
||||
(call %init_peer_id% ("errorHandlingSrv" "error") [%last_error% 4])
|
||||
)
|
||||
|
||||
`,
|
||||
)
|
||||
.configHandler((h) => {
|
||||
h.on('getDataSrv', '-relay-', () => {
|
||||
return client.relayPeerId!;
|
||||
`,
|
||||
)
|
||||
.configHandler((h) => {
|
||||
h.on('getDataSrv', '-relay-', () => {
|
||||
return peer.getStatus().relayPeerId;
|
||||
});
|
||||
h.on('getDataSrv', 'targetPeerId', () => {return targetPeerId;});
|
||||
h.on('getDataSrv', 'targetRelayPeerId', () => {return targetRelayPeerId;});
|
||||
@ -106,7 +239,6 @@ h.on('getDataSrv', 'targetRelayPeerId', () => {return targetRelayPeerId;});
|
||||
});
|
||||
|
||||
h.onEvent('errorHandlingSrv', 'error', (args) => {
|
||||
// assuming error is the single argument
|
||||
const [err] = args;
|
||||
reject(err);
|
||||
});
|
||||
@ -120,7 +252,7 @@ h.on('getDataSrv', 'targetRelayPeerId', () => {return targetRelayPeerId;});
|
||||
}
|
||||
request = r.build();
|
||||
});
|
||||
await client.initiateFlow(request!);
|
||||
peer.internals.initiateFlow(request!);
|
||||
return promise;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user