Adding web-proxy

- Now it's possible for one node to ask another node to send out a proxy request - Added the feature to the frontend - Updated the frontend a bit
ineiti · Aug 30, 2024 · f7b1a7c · f7b1a7c
1 parent 8489a76
commit f7b1a7c
Show file tree

Hide file tree

Showing 13 changed files with 905 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@ Following https://keepachangelog.com/en/1.1.0/ and using
 - Create a template to fill out
 - License files
 - Devbox
+- Create a proxy module that links to the html display
 
 ## [0.7.0] - 2022-08-01
 

diff --git a/WIP.md b/WIP.md
@@ -10,7 +10,6 @@
 ## Features
 
 - Needed for semester project:
-  - Create a proxy module that links to the html display
   - Import library for html serving with callbacks for loading of elements
   - Easy simulation 
     - w/o network
@@ -19,13 +18,13 @@
 
 ## Bugs
 
+- flmodules/web_proxy has horrible error handling - too many `expect`s
 - flnet errors - perhaps not necessary to fix if matchbox works:
   - Find why the network stalls after some time
   - Doesn't work in EPFL network
 
 ## Cleanups / improvements
 
-- use tokio::sync::watch to pass configuration from `Translate` to `Broker`
 - yaml files are stored as .toml
   - make sure old files can be read as .toml
   - save new files as .yaml

diff --git a/flbrowser/Cargo.toml b/flbrowser/Cargo.toml
@@ -34,6 +34,8 @@ features = [
   'Document',
   'Element',
   'HtmlElement',
+  'HtmlDivElement',
+  'HtmlInputElement',
   'HtmlTextAreaElement',
   'Node',
   'Window',

diff --git a/flbrowser/index.html b/flbrowser/index.html
@@ -16,8 +16,16 @@ <h2><i id="node_info">Starting up</i></h2>
 
     <ul class="nav nav-tabs" id="myTab" role="tablist">
       <li class="nav-item" role="presentation">
-        <button class="nav-link active" id="shareit-tab" data-bs-toggle="tab" data-bs-target="#shareit" type="button"
-          role="tab" aria-controls="shareit" aria-selected="true">ShareIt</button>
+        <button class="nav-link active" id="welcome-tab" data-bs-toggle="tab" data-bs-target="#welcome" type="button"
+          role="tab" aria-controls="welcome" aria-selected="true">Welcome</button>
+      </li>
+      <li class="nav-item" role="presentation">
+        <button class="nav-link" id="blackboard-tab" data-bs-toggle="tab" data-bs-target="#blackboard" type="button"
+          role="tab" aria-controls="blackboard" aria-selected="true">Blackboard</button>
+      </li>
+      <li class="nav-item" role="presentation">
+        <button class="nav-link" id="proxy-tab" data-bs-toggle="tab" data-bs-target="#proxy" type="button" role="tab"
+          aria-controls="proxy" aria-selected="false">WebProxy</button>
       </li>
       <li class="nav-item" role="presentation">
         <button class="nav-link" id="status-tab" data-bs-toggle="tab" data-bs-target="#status" type="button" role="tab"
@@ -26,12 +34,55 @@ <h2><i id="node_info">Starting up</i></h2>
     </ul>
 
     <div class="tab-content" id="myTabContent">
-      <div class="tab-pane fade show active" id="shareit" role="tabpanel" aria-labelledby="home-tab">
-        <p>This is a decentralized chatting app. Instead of having a central server that stores all
+      <div class="tab-pane fade show active" id="welcome" role="tabpanel" aria-labelledby="welcome-tab">
+        <br>
+        <i class="fa" style="font-size:24px"> </i>
+        <h3>Fledger</h3>
+        <p>Welcome to the latest version of the Fledger Node.
+          Fledger is an experiment in a decentralized system running in your browser.
+          It's goal is to mix things like <a href="https://veilid.com/">Veilid</a>,
+          <a href="https://ipfs.tech/">IPFS</a>, and something like
+          <a href="https://github.com/facebookresearch/narwhal">Narhal</a>.
+        </p>
+        <p>Try it out by clicking on the above tabs to join the Blackboard or the
+          WebProxy.
+        </p>
+        <h4>Uniqueness of Fledger</h4>
+        <p>Instead of having to install all of these things on your computer, handling all the
+          configuration and dependencies, you simply come here and participate in a decentralized
+          system.
+          This version of the system has the following applications:
+        </p>
+        <ul>
+          <li>Decentralized blackboard - write a message for everybody to see</li>
+          <li>Web proxy - route your web traffic through another node (not anonymous yet!)</li>
+        </ul>
+        <h4>Work In Progress</h4>
+        <p>The fledger system is extensible with modules, and we think hard to implement the
+          following modules:
+        </p>
+        <ul>
+          <li>Mixing Network - in a semester project with the <a href="https://dedis.epfl.ch">DEDIS lab</a> at EPFL</li>
+          <li>Storage - IPFS-like decentralized storage where you get storage by sharing your
+            own harddisk storage
+          </li>
+        </ul>
+        <p>These modules will allow to port applications like the following, and add new ones:</p>
+        <ul>
+          <li><a href="https://livequiz.fledg.re">LiveQuiz</a> so that the storage is on fledger</li>
+          <li><a href="https://jemifier.gasser.blue">Jemifier</a> and store the lists on fledger</li>
+          <li>Anonymous surfing</li>
+        </ul>
+        <p></p>
+      </div>
+
+      <div class="tab-pane fade" id="blackboard" role="tabpanel" aria-labelledby="blackboard-tab">
+        <br>
+        <p>This is a decentralized chatting app, implemented like a global blackboard.
+          Instead of having a central server that stores all
           messages, every visitor joining the system stores the last 20 messages. So even if the
           central server goes down or censors messages, the clients can still communicate.
         </p>
-        <p>You can find the code on github: <a href="https://github.com/ineiti/fledger">ineiti/fledger</a></p>
         <br>
         <h3>Your Message</h3>
         <textarea class="form-control" id="your_message" rows="3"></textarea>
@@ -51,27 +102,28 @@ <h3>Statistics</h3>
         <br>
         <h3>Messages</h3>
         <div id="messages"></div>
+      </div>
 
+      <div class="tab-pane fade" id="proxy" role="tabpanel" aria-labelledby="proxy-tab">
+        <br>
+        <h3>WebProxy</h3>
+        <div style="display: flex; flex-flow: row;">
+          <input id="proxy_url" value="https://fledg.re/doc/index.html" />
+          <button id="proxy_request" type="button" class="btn btn-primary">Proxy
+            Request</button>
+        </div>
+        <div id="proxy_div">Enter a URL and click on "Proxy Request".
+          The request will be proxied through one of the nodes online.
+        </div>
       </div>
+
       <div class="tab-pane fade" id="status" role="tabpanel" aria-labelledby="profile-tab">
+        <br>
         <p>The goal of Fledger is to have a full node running in the web browser.
           Instead of having to invest in big hardware, fledger will be light enough
           that you can participate using a browser.
           You will mine Mana can be used to run smart contracts, store data, or use the
           re-encryption service.</p>
-        <p>The state of the project is</p>
-        <ul>
-          <li>Networking</li>
-          <ul>
-            <li>Done: learning Rust and making WebRTC work reliably</li>
-            <li>Done: setting up of TURN server</li>
-            <li>Done: rewrite of networking backend without reason</li>
-            <li>Done: simple gossiping of content</li>
-            <li>Done 2022-10: create flnet crate with webrtc in libc and wasm</li>
-          </ul>
-          <li>Coming up: decentralized sharing with incentives</li>
-          <li>Coming up: setting up chains for sharing tracking</li>
-        </ul>
         <p>For more information, see the documentation:
           <a href="https://fledg.re/doc/index.html" target="other">Fledger - the blockchain that could</a>
         </p>
@@ -89,17 +141,20 @@ <h3>Messages</h3>
           <tbody id="node_stats">
           </tbody>
         </table>
+        <button id="get_data" type="button" class="btn btn-primary">Get Data</button>
       </div>
     </div>
 
-    <button id="get_data" type="button" class="btn btn-primary">Get Data</button>
     <br />
     <div style="float: right;" id="version"></div>
+    <div style="float: left;">
+      <a href="https://github.com/ineiti/fledger">GitHub</a> - <a href="https://ioc.exchange/@ineiti">@ineiti@ioc.exchange</a>
+    </div>
   </div>
 
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
     crossorigin="anonymous"></script>
 </body>
 
-</html>
+</html>
diff --git a/flbrowser/main.css b/flbrowser/main.css
@@ -80,3 +80,14 @@ ul.no-bullets {
 .wrap {
   white-space: pre-wrap;
 }
+
+#proxy_div {
+  margin: 1em;
+  padding: 1em;
+  border: 1pt solid #888;
+  background-color: #444;
+}
+
+#proxy_url {
+  width: 80%;
+}
diff --git a/flbrowser/src/main.rs b/flbrowser/src/main.rs
@@ -18,7 +18,7 @@ use wasm_bindgen::{
     prelude::{wasm_bindgen, Closure},
     JsCast, JsValue,
 };
-use web_sys::{window, Document, Event, HtmlTextAreaElement};
+use web_sys::{window, Document, Event, HtmlDivElement, HtmlInputElement, HtmlTextAreaElement};
 
 use flarch::{
     data_storage::DataStorageLocal,
@@ -37,6 +37,7 @@ const URL: &str = "ws://localhost:8765";
 enum Button {
     SendMsg,
     DownloadData,
+    WebProxy,
 }
 
 #[wasm_bindgen(module = "/src/main.js")]
@@ -55,15 +56,14 @@ fn main() {
         // Create a listening channel that fires whenever the user clicks on the `send_msg` button
         let (tx, mut rx) = tokio::sync::mpsc::unbounded_channel::<Button>();
         web.link_btn(tx.clone(), Button::SendMsg, "send_msg");
-        web.link_btn(tx, Button::DownloadData, "get_data");
+        web.link_btn(tx.clone(), Button::DownloadData, "get_data");
+        web.link_btn(tx, Button::WebProxy, "proxy_request");
+
+        // Link to some elements
+        let your_message: HtmlTextAreaElement = web.get_element("your_message");
+        let proxy_div: HtmlDivElement = web.get_element("proxy_div");
+        let proxy_url: HtmlInputElement = web.get_element("proxy_url");
 
-        // Link to the message the user wants to send
-        let your_message = web
-            .document
-            .get_element_by_id("your_message")
-            .unwrap()
-            .dyn_into::<HtmlTextAreaElement>()
-            .unwrap();
         loop {
             if let Ok(btn) = rx.try_recv() {
                 match btn {
@@ -82,6 +82,25 @@ fn main() {
                         let data = web.node.gossip.as_ref().unwrap().storage.get().unwrap();
                         downloadFile("gossip_event.toml".into(), data.into());
                     }
+                    Button::WebProxy => {
+                        let mut response = web
+                            .node
+                            .webproxy
+                            .as_mut()
+                            .unwrap()
+                            .get(&proxy_url.value())
+                            .await
+                            .expect("Getting response");
+                        let proxy = proxy_div.clone();
+                        spawn_local(async move {
+                            let text = format!(
+                                "Proxy: {}<br>{}",
+                                response.proxy(),
+                                response.text().await.unwrap()
+                            );
+                            proxy.set_inner_html(&text);
+                        });
+                    }
                 }
             }
             if let Some(state) = web.tick().await {
@@ -160,6 +179,14 @@ impl FledgerWeb {
             .set_inner_html(&inner_html);
     }
 
+    fn get_element<ET: JsCast>(&self, id: &str) -> ET {
+        self.document
+            .get_element_by_id(id)
+            .unwrap()
+            .dyn_into::<ET>()
+            .unwrap()
+    }
+
     pub async fn tick(&mut self) -> Option<FledgerState> {
         let mut fs = None;
         match FledgerState::new(&self.node) {

diff --git a/flmodules/src/gossip_events/events.rs b/flmodules/src/gossip_events/events.rs
@@ -386,7 +386,7 @@ pub struct EventV2 {
 mod tests {
     use std::error::Error;
 
-    use flarch::now;
+    use flarch::tasks::now;
 
     use super::*;
 

diff --git a/flmodules/src/web_proxy/README.md b/flmodules/src/web_proxy/README.md
@@ -0,0 +1,6 @@
+# Proxy
+
+The proxy module allows to tunnel traffic through another node.
+This first version uses the `random_connections` module for the networking.
+A future version will use the upcoming `mixer` to transport the messages
+to the proxy node.