mirror of
https://github.com/fluencelabs/examples
synced 2025-06-12 09:31:20 +00:00
feat!: Replace old fluence-js with JS Client (#425)
This commit is contained in:
Pavel
GitHub
@ -6,5 +6,5 @@ service HelloPeer("HelloPeer"):
|
||||
|
||||
func sayHello(targetPeerId: PeerId, targetRelayPeerId: PeerId) -> string:
|
||||
on targetPeerId via targetRelayPeerId:
|
||||
res <- HelloPeer.hello(%init_peer_id%)
|
||||
res <- HelloPeer.hello(INIT_PEER_ID)
|
||||
<- res
|
||||
|
||||
24548
quickstart/1-browser-to-browser/package-lock.json
generated
24548
quickstart/1-browser-to-browser/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -3,7 +3,7 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@fluencelabs/fluence": "0.28.0",
|
||||
"@fluencelabs/js-client.api": "0.11.2",
|
||||
"@fluencelabs/fluence-network-environment": "1.0.14",
|
||||
"@testing-library/jest-dom": "^5.14.1",
|
||||
"@testing-library/react": "^11.2.7",
|
||||
@ -20,7 +20,6 @@
|
||||
"web-vitals": "^1.1.2"
|
||||
},
|
||||
"scripts": {
|
||||
"postinstall": "copy-marine public",
|
||||
"prestart": "npm run compile-aqua",
|
||||
"prebuild": "npm run compile-aqua",
|
||||
"start": "react-scripts start",
|
||||
@ -28,8 +27,8 @@
|
||||
"test": "jest --config=jest.config.js",
|
||||
"_test": "react-scripts test",
|
||||
"eject": "react-scripts eject",
|
||||
"compile-aqua": "aqua -i ./aqua/ -o ./src/_aqua",
|
||||
"watch-aqua": "chokidar \"**/*.aqua\" -c \"npm run compile-aqua\""
|
||||
"compile-aqua": "fluence aqua -i ./aqua/ -o ./src/_aqua",
|
||||
"watch-aqua": "fluence aqua -w -i ./aqua/ -o ./src/_aqua"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
@ -52,13 +51,12 @@
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@fluencelabs/aqua": "0.9.4",
|
||||
"@fluencelabs/cli": "0.2.41",
|
||||
"@fluencelabs/aqua-lib": "0.6.0",
|
||||
"@types/jest-environment-puppeteer": "^4.4.1",
|
||||
"@types/puppeteer": "^5.4.4",
|
||||
"chokidar-cli": "^2.1.0",
|
||||
"jest-puppeteer": "^6.0.2",
|
||||
"node-sass": "^6.0.1",
|
||||
"sass": "^1.58.3",
|
||||
"serve": "^13.0.2",
|
||||
"ts-jest": "^27.1.3"
|
||||
}
|
||||
|
||||
@ -1,17 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
@ -20,12 +21,15 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>Fluence getting started</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
<title>Fluence getting started</title>
|
||||
<script src='https://cdn.jsdelivr.net/npm/@fluencelabs/js-client.web.standalone@0.13.3/dist/js-client.min.js'
|
||||
async></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
@ -35,5 +39,6 @@
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -2,23 +2,40 @@ import React, { useEffect, useState } from 'react';
|
||||
import logo from './logo.svg';
|
||||
import './App.scss';
|
||||
|
||||
import { Fluence } from '@fluencelabs/fluence';
|
||||
import { krasnodar } from '@fluencelabs/fluence-network-environment';
|
||||
import { Fluence } from '@fluencelabs/js-client.api';
|
||||
import type { ConnectionState } from '@fluencelabs/js-client.api';
|
||||
import { kras } from '@fluencelabs/fluence-network-environment';
|
||||
import { sayHello, registerHelloPeer } from './_aqua/getting-started';
|
||||
|
||||
const relayNodes = [krasnodar[4], krasnodar[5], krasnodar[6]];
|
||||
const relayNodes = [kras[4], kras[5], kras[6]];
|
||||
|
||||
function App() {
|
||||
const [isConnected, setIsConnected] = useState<boolean>(false);
|
||||
const [connectionState, setConnectionState] = useState<ConnectionState>('disconnected');
|
||||
const [peerInfo, setPeerInfo] = useState<{ peerId: string; relayPeerId: string } | null>(null);
|
||||
const [helloMessage, setHelloMessage] = useState<string | null>(null);
|
||||
|
||||
const [peerIdInput, setPeerIdInput] = useState<string>('');
|
||||
const [relayPeerIdInput, setRelayPeerIdInput] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
Fluence.onConnectionStateChange((state) => {
|
||||
console.log('Connection state changed to: ', state);
|
||||
setConnectionState(state);
|
||||
|
||||
if (state === 'connected') {
|
||||
Fluence.getClient().then((client) => {
|
||||
const peerId = client.getPeerId();
|
||||
const relayPeerId = client.getRelayPeerId();
|
||||
setPeerInfo({ peerId, relayPeerId });
|
||||
});
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
const connect = async (relayPeerId: string) => {
|
||||
try {
|
||||
await Fluence.start({ connectTo: relayPeerId });
|
||||
setIsConnected(true);
|
||||
await Fluence.connect(relayPeerId);
|
||||
|
||||
// Register handler for this call in aqua:
|
||||
// HelloPeer.hello(%init_peer_id%)
|
||||
registerHelloPeer({
|
||||
@ -28,20 +45,22 @@ function App() {
|
||||
},
|
||||
});
|
||||
} catch (err) {
|
||||
console.log('Peer initialization failed', err);
|
||||
console.log('Client could not connect', err);
|
||||
}
|
||||
};
|
||||
|
||||
const helloBtnOnClick = async () => {
|
||||
if (!Fluence.getStatus().isConnected) {
|
||||
if (connectionState !== 'connected') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Using aqua is as easy as calling a javascript funсtion
|
||||
// Using aqua is as easy as calling a javascript function
|
||||
const res = await sayHello(peerIdInput, relayPeerIdInput);
|
||||
setHelloMessage(res);
|
||||
};
|
||||
|
||||
const isConnected = connectionState === 'connected';
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<header>
|
||||
@ -49,20 +68,20 @@ function App() {
|
||||
</header>
|
||||
|
||||
<div className="content">
|
||||
<h1>{connectionState}</h1>
|
||||
{isConnected ? (
|
||||
<>
|
||||
<h1>Connected</h1>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="bold">Peer id:</td>
|
||||
<td className="mono">
|
||||
<span id="peerId">{Fluence.getStatus().peerId!}</span>
|
||||
<span id="peerId">{peerInfo?.peerId}</span>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
className="btn-clipboard"
|
||||
onClick={() => copyToClipboard(Fluence.getStatus().peerId!)}
|
||||
onClick={() => copyToClipboard(peerInfo?.peerId)}
|
||||
>
|
||||
<i className="gg-clipboard"></i>
|
||||
</button>
|
||||
@ -71,12 +90,12 @@ function App() {
|
||||
<tr>
|
||||
<td className="bold">Relay peer id:</td>
|
||||
<td className="mono">
|
||||
<span id="relayId">{Fluence.getStatus().relayPeerId}</span>
|
||||
<span id="relayId">{peerInfo?.relayPeerId}</span>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
className="btn-clipboard"
|
||||
onClick={() => copyToClipboard(Fluence.getStatus().relayPeerId!)}
|
||||
onClick={() => copyToClipboard(peerInfo?.relayPeerId)}
|
||||
>
|
||||
<i className="gg-clipboard"></i>
|
||||
</button>
|
||||
@ -146,8 +165,10 @@ function App() {
|
||||
);
|
||||
}
|
||||
|
||||
const copyToClipboard = (text: string) => {
|
||||
navigator.clipboard.writeText(text);
|
||||
const copyToClipboard = (text?: string) => {
|
||||
if (text) {
|
||||
navigator.clipboard.writeText(text);
|
||||
}
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
24548
quickstart/3-browser-to-service/package-lock.json
generated
24548
quickstart/3-browser-to-service/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -3,7 +3,7 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@fluencelabs/fluence": "0.28.0",
|
||||
"@fluencelabs/js-client.api": "0.11.2",
|
||||
"@fluencelabs/fluence-network-environment": "1.0.14",
|
||||
"@testing-library/jest-dom": "^5.14.1",
|
||||
"@testing-library/react": "^11.2.7",
|
||||
@ -19,7 +19,6 @@
|
||||
"web-vitals": "^1.1.2"
|
||||
},
|
||||
"scripts": {
|
||||
"postinstall": "copy-marine public",
|
||||
"prestart": "npm run compile-aqua",
|
||||
"prebuild": "npm run compile-aqua",
|
||||
"start": "react-scripts start",
|
||||
@ -27,8 +26,8 @@
|
||||
"test": "jest --config=jest.config.js",
|
||||
"_test": "react-scripts test",
|
||||
"eject": "react-scripts eject",
|
||||
"compile-aqua": "aqua -i ./aqua/ -o ./src/_aqua",
|
||||
"watch-aqua": "chokidar \"**/*.aqua\" -c \"npm run compile-aqua\""
|
||||
"compile-aqua": "fluence aqua -i ./aqua/ -o ./src/_aqua",
|
||||
"watch-aqua": "fluence aqua -w -i ./aqua/ -o ./src/_aqua"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
@ -51,14 +50,13 @@
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@fluencelabs/aqua": "0.9.4",
|
||||
"@fluencelabs/cli": "0.2.41",
|
||||
"@fluencelabs/aqua-lib": "0.6.0",
|
||||
"@types/jest-environment-puppeteer": "^4.4.1",
|
||||
"@types/puppeteer": "^5.4.4",
|
||||
"@types/serve-handler": "^6.1.1",
|
||||
"chokidar-cli": "^2.1.0",
|
||||
"jest-puppeteer": "^6.0.2",
|
||||
"node-sass": "^6.0.1",
|
||||
"sass": "^1.58.3",
|
||||
"serve": "^13.0.2",
|
||||
"ts-jest": "^27.1.3"
|
||||
}
|
||||
|
||||
@ -1,17 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
@ -20,12 +21,15 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>Fluence getting started</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
<title>Fluence getting started</title>
|
||||
<script src='https://cdn.jsdelivr.net/npm/@fluencelabs/js-client.web.standalone@0.13.3/dist/js-client.min.js'
|
||||
async></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
@ -35,5 +39,6 @@
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,24 +1,41 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import logo from './logo.svg';
|
||||
import './App.scss';
|
||||
|
||||
import { Fluence } from '@fluencelabs/fluence';
|
||||
import { krasnodar } from '@fluencelabs/fluence-network-environment';
|
||||
import { registerHelloPeer, sayHello } from './_aqua/getting-started';
|
||||
import { Fluence } from '@fluencelabs/js-client.api';
|
||||
import type { ConnectionState } from '@fluencelabs/js-client.api';
|
||||
import { kras } from '@fluencelabs/fluence-network-environment';
|
||||
import { sayHello, registerHelloPeer } from './_aqua/getting-started';
|
||||
|
||||
const relayNodes = [krasnodar[3], krasnodar[4], krasnodar[5]];
|
||||
const relayNodes = [kras[4], kras[5], kras[6]];
|
||||
|
||||
function App() {
|
||||
const [isConnected, setIsConnected] = useState<boolean>(false);
|
||||
const [connectionState, setConnectionState] = useState<ConnectionState>('disconnected');
|
||||
const [peerInfo, setPeerInfo] = useState<{ peerId: string; relayPeerId: string } | null>(null);
|
||||
const [helloMessage, setHelloMessage] = useState<string | null>(null);
|
||||
|
||||
const [peerIdInput, setPeerIdInput] = useState<string>('');
|
||||
const [relayPeerIdInput, setRelayPeerIdInput] = useState<string>('');
|
||||
|
||||
useEffect(() => {
|
||||
Fluence.onConnectionStateChange((state) => {
|
||||
console.log('Connection state changed to: ', state);
|
||||
setConnectionState(state);
|
||||
|
||||
if (state === 'connected') {
|
||||
Fluence.getClient().then((client) => {
|
||||
const peerId = client.getPeerId();
|
||||
const relayPeerId = client.getRelayPeerId();
|
||||
setPeerInfo({ peerId, relayPeerId });
|
||||
});
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
const connect = async (relayPeerId: string) => {
|
||||
try {
|
||||
await Fluence.start({ connectTo: relayPeerId });
|
||||
setIsConnected(true);
|
||||
await Fluence.connect(relayPeerId);
|
||||
|
||||
// Register handler for this call in aqua:
|
||||
// HelloPeer.hello(%init_peer_id%)
|
||||
registerHelloPeer({
|
||||
@ -28,20 +45,22 @@ function App() {
|
||||
},
|
||||
});
|
||||
} catch (err) {
|
||||
console.log('Peer initialization failed', err);
|
||||
console.log('Client could not connect', err);
|
||||
}
|
||||
};
|
||||
|
||||
const helloBtnOnClick = async () => {
|
||||
if (!isConnected) {
|
||||
if (connectionState !== 'connected') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Using aqua is as easy as calling a javascript funсtion
|
||||
// Using aqua is as easy as calling a javascript function
|
||||
const res = await sayHello(peerIdInput, relayPeerIdInput);
|
||||
setHelloMessage(res);
|
||||
};
|
||||
|
||||
const isConnected = connectionState === 'connected';
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<header>
|
||||
@ -49,20 +68,20 @@ function App() {
|
||||
</header>
|
||||
|
||||
<div className="content">
|
||||
<h1>{connectionState}</h1>
|
||||
{isConnected ? (
|
||||
<>
|
||||
<h1>Connected</h1>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="bold">Peer id:</td>
|
||||
<td className="mono">
|
||||
<span id="peerId">{Fluence.getStatus().peerId!}</span>
|
||||
<span id="peerId">{peerInfo?.peerId}</span>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
className="btn-clipboard"
|
||||
onClick={() => copyToClipboard(Fluence.getStatus().peerId!)}
|
||||
onClick={() => copyToClipboard(peerInfo?.peerId)}
|
||||
>
|
||||
<i className="gg-clipboard"></i>
|
||||
</button>
|
||||
@ -71,12 +90,12 @@ function App() {
|
||||
<tr>
|
||||
<td className="bold">Relay peer id:</td>
|
||||
<td className="mono">
|
||||
<span id="relayId">{Fluence.getStatus().relayPeerId!}</span>
|
||||
<span id="relayId">{peerInfo?.relayPeerId}</span>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
className="btn-clipboard"
|
||||
onClick={() => copyToClipboard(Fluence.getStatus().relayPeerId!)}
|
||||
onClick={() => copyToClipboard(peerInfo?.relayPeerId)}
|
||||
>
|
||||
<i className="gg-clipboard"></i>
|
||||
</button>
|
||||
@ -146,8 +165,10 @@ function App() {
|
||||
);
|
||||
}
|
||||
|
||||
const copyToClipboard = (text: string) => {
|
||||
navigator.clipboard.writeText(text);
|
||||
const copyToClipboard = (text?: string) => {
|
||||
if (text) {
|
||||
navigator.clipboard.writeText(text);
|
||||
}
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
Reference in New Issue
Block a user