Git Product home page Git Product logo

peerweb.js's Introduction

peerweb.js

A client side library for retrieving and rendering a static website over torrent.

Usage

window.peerweb.init(function(e) {
  if(e) throw e
  window.peerweb.debug = true
  window.peerweb.render([torrent_hash])
})

PeerWeb will download the directory from the torrent passed into render, and will replace the contents of document.body with the file index.html from the torrent. All subsequent GET http requests will be resolved against the torrent file.

The torrent should be structured something like:

./
├── imgs
│   ├── foo.png
│   └── bar.png
├── css
│   └── index.css
└── index.html

The main takeaway from the above diagram is that peerweb requires your torrent to have an index.html and that you can have nested subdirectories.

For an example, download ws and run it in the ./example directory in this repo.

Dependencies

All dependencies can be found in this repo under the ./example directory.

Unfortunately, peerweb only works in Chromium 49 or later (google-chrome-beta at the time of this writing). Chrome <40 has a bug preventing ServiceWorkers from loading blob files and all versions of Firefox that support ServiceWorkers has a bug preventing WebSockets from working when ServiceWorkers are being used for the page.

Installation

Download the above dependencies. Place router.js in the base of your project directory (along-side index.html). Then add the following to the <head> of your index.html file:

<script src="./path/to/async-1.5.2.js"></script>
<script src="./path/to/localforage-1.2.6.min.js"></script>
<script src="./path/to/webtorrent-0.72.1.min.js"></script>
<script src="./path/to/peerweb.js"></script>

Note: it is critical that router.js be served directly from ./router.js and not a subdirectory of your project. This allows the ServiceWorker to intercept all http requests for the webpage

How it works

peerweb uses the webtorrent project to download a static website. It then stores paths to the blobs for each file in the torrent in the browser's storage using localforage. It registers a ServiceWorker to intercept http requests from the page and attempts to resolve them against blobs found in the browser's storage. It then searches for index.html in the torrent and drops it into the current document.body triggering the website to render and the http requests to be intercepted by the ServiceWorker.

peerweb.js's People

Contributors

feross avatar prayagverma avatar

Stargazers

Sarp Güney Başaraner avatar Deiki avatar Alex Arena avatar  avatar xajkep avatar Bloo Alien avatar Fabian Beuke avatar monz avatar Jesús Leganés-Combarro avatar Guillermo Murúa avatar Paul G avatar カシオ 金城 大関 avatar kwan avatar Richard Brooks avatar  avatar voust avatar Uģis Ģērmanis avatar ROBERT MCDOWELL avatar Cønstantine Kovalensky avatar barkpixels avatar Katalyzzt avatar Stefano Balocco avatar  avatar Lantern Master  avatar Andreas Kröhnke avatar FTP avatar Claudio Lange avatar Chris D. Macrae avatar Julian Pistorius avatar Faisal Ababtain avatar Sara Tasche avatar Jadson G. Matos avatar Henrique Mayer avatar Lubomir Anastasov avatar A avatar Oleksandr Nikitin avatar Alexander Knorr avatar  avatar Maksim Balabash avatar  avatar Jillian Ada Burrows avatar idk avatar Mike Preston avatar Simon avatar 冯凯昌 avatar  avatar Fede avatar Luis Toscano avatar  avatar Carlson Santana Cruz avatar Michael S. Moody avatar Chikage avatar Carlos Venegas Arrabé avatar TaMeR avatar Paolo Bozzola avatar Costin Manolache avatar Thore Mikkel Cardel avatar Chris McCormick avatar ivan ivanoff avatar Nicolas Marshall avatar Gorka Ludlow avatar Andrew Chou avatar Jim Pick avatar Kyungyeol Kim (Bret) avatar Juan Diosdado avatar Jeremy Bae avatar Julien Bouquillon avatar Swapnil Shrikhande avatar Bud Parr avatar Pavel avatar ammyl33t avatar Dan Tocchini IV avatar René avatar Matthias Subileau avatar Sashko avatar Jee avatar Hing avatar Lucas avatar  avatar Cory Simmons avatar Pascal Boucher avatar Benjamin Stern avatar Julian Maingot avatar Hugo PENDZIUCH avatar Jack Valinsky avatar Giacomo Tüfekci avatar  avatar Alexander Kozhevin avatar Matthew Raymer avatar Xin Yang avatar Alvaro Pinot @alvaropinot avatar P.J. Henning avatar Gustavo 'Gus' Carreno avatar Christian Bagley avatar Aleksandar Kokar avatar Alexandre Nicastro avatar Sacha Corazzi avatar  avatar TMF_Archivist avatar  avatar

Watchers

TMF_Archivist avatar Weld avatar Waldir Pimenta avatar T avatar Julian Pistorius avatar Aleksandar Kokar avatar James Cloos avatar William Blankenship avatar Tristan avatar Hazael Díaz avatar  avatar Andry Kvart avatar  avatar

peerweb.js's Issues

Fallback when peerweb is not supported

Hello,

nice work. How about enabling a fallback to a non-torrent version in case the browser does not support it? For me this is the only issue blocking me from using it in production.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.