Use a local PeerJS server.

client/actions/DownloadActions.js

@@ -3,9 +3,7 @@ import alt from '../alt';
 export default alt.createActions(class DownloadActions {
   constructor() {
     this.generateActions(
-      'beginDownload',
       'requestDownload',
-      'cancelDownlaod',
       'setDownloadInfo'
     )
   }

client/actions/PeerActions.js

@@ -3,7 +3,7 @@ import alt from '../alt';
 export default alt.createActions(class PeerActions {
   constructor() {
     this.generateActions(
-      'setPeerID'
+      'peerConnected'
     )
   }
 })

client/components/App.js

@@ -53,19 +53,15 @@ export default class App extends React.Component {
 
   render() {
     if (this.state.readyToUpload) {
-      return (
+      return <div>
-        <div>
+        <FileDescription file={this.state.uploadFile} />
-          <FileDescription file={this.state.uploadFile} />
+        <Tempalink token={this.state.uploadToken} />
-          <Tempalink token={this.state.uploadToken} />
+      </div>;
-        </div>
-      );
     } else if (this.state.readyToDownload) {
-      return (
+      return <div>
-        <div>
+        <FileDescription file={this.state.downloadFile} />
-          <FileDescription file={this.state.downloadFile} />
+        <button onClick={this.downloadFile.bind(this)}>Download</button>
-          <button onClick={this.downloadFile.bind(this)}>Download</button>
+      </div>;
-        </div>
-      );
     } else {
       return <DropZone onDrop={this.uploadFile.bind(this)} />;
     }

client/components/DropZone.js

@@ -14,13 +14,11 @@ export default class DropZone extends React.Component {
   }
 
   render() {
-    return (
+    return <div className="drop-zone"
-      <div className="drop-zone"
+      onDragOver={this.dragOver.bind(this)}
-        onDragOver={this.dragOver.bind(this)}
+      onDrop={this.drop.bind(this)}>
-        onDrop={this.drop.bind(this)}>
+      Drop a file here.
-        Drop a file here.
+    </div>;
-      </div>
-    );
   }
 
 }

client/components/FileDescription.js

@@ -3,13 +3,11 @@ import React from 'react';
 export default class FileDescription extends React.Component {
 
   render() {
-    return (
+    return <div className="file-description">
-      <div className="file-description">
+      <span className="file-name">{this.props.file.name}</span>
-        <span className="file-name">{this.props.file.name}</span>
+      <span className="file-size">{this.props.file.size}</span>
-        <span className="file-size">{this.props.file.size}</span>
+      <span className="file-type">{this.props.file.type}</span>
-        <span className="file-type">{this.props.file.type}</span>
+    </div>;
-      </div>
-    );
   }
 
 }

client/components/Tempalink.js

@@ -4,9 +4,7 @@ export default class Tempalink extends React.Component {
 
   render() {
     var url = window.location.origin + '/d/' + this.props.token;
-    return (
+    return <a href={url} className="tempalink">{url}</a>;
-      <a href={url} className="tempalink">{url}</a>
-    );
   }
 
 }

client/peer.js

@@ -1,13 +0,0 @@
-import DownloadActions from './actions/DownloadActions';
-import Peer from 'peerjs';
-import PeerActions from './actions/PeerActions';
-
-var peer = module.exports = new Peer({ key: '8w3x9m637e0o1or' });
-
-peer.on('open', function () {
-  PeerActions.setPeerID(peer.id);
-});
-
-peer.on('connection', function (conn) {
-  DownloadActions.beginDownload(conn);
-});

client/stores/DownloadStore.js

@@ -25,21 +25,17 @@ export default alt.createStore(class DownloadStore {
     this.bindActions(DownloadActions);
     this.bindActions(PeerActions);
 
-    this.conn = null;
     this.token = null;
     this.file = null;
     this.status = new DownloadStatus();
   }
 
-  onSetPeerID() {
-    this.waitFor(PeerStore.dispatchToken);
-    if (this.status.isOffline() && this.token) this.status.set('ready');
-  }
-
   onSetDownloadInfo(info) {
+    if (!this.status.isOffline()) return;
+    this.status.set('ready');
+
     this.token = info.token;
     this.file = new DownloadFile(info.name, info.size, info.type);
-    if (this.status.isOffline() && PeerStore.getPeerID()) this.status.set('ready');
   }
 
   onRequestDownload() {
@@ -52,11 +48,10 @@ export default alt.createStore(class DownloadStore {
     });
   }
 
-  onBeginDownload(conn) {
+  onPeerConnected(conn) {
     if (!this.status.isRequesting()) return;
     this.status.set('downloading');
 
-    this.conn = conn;
     let chunkSize = conn.metadata.chunkSize;
     let i = 0;
 
@@ -78,20 +73,9 @@ export default alt.createStore(class DownloadStore {
 
     conn.on('close', () => {
       if (!this.status.isDownloading()) return;
-      this._cancel();
+      this.status.set('cancelled');
+      this.file.clearPackets();
     });
   }
 
-  onCancelDownload() {
-    if (!this.status.isRequesting() && !this.status.isDownloading()) return;
-    this._cancel();
-  }
-
-  _cancel() {
-    this.status.set('cancelled');
-    if (this.conn) this.conn.close();
-    this.conn = null;
-    this.file.clearPackets();
-  }
-
 })

client/stores/PeerStore.js

@@ -1,19 +1,30 @@
+import Peer from 'peerjs';
 import PeerActions from '../actions/PeerActions';
 import alt from '../alt';
+import uuid from 'node-uuid';
 
-export default alt.createStore(class PeerStore {
+let id = uuid.v4();
+let peer = new Peer(id, {
+  host: window.location.hostname,
+  port: window.location.port,
+  path: '/peer'
+});
 
-  constructor() {
+peer.on('connection', (conn) => {
-    this.bindActions(PeerActions);
+  PeerActions.peerConnected(conn);
-    this.peerID = null;
+});
-  }
+
+export default alt.createStore(class PeerStore {
 
-  onSetPeerID(id) {
+  static connect(peerID, metadata) {
-    this.peerID = id;
+    return peer.connect(peerID, {
+      reliable: true,
+      metadata: metadata
+    });
   }
 
   static getPeerID() {
-    return this.getState().peerID;
+    return id;
   }
 
 })

client/stores/UploadStore.js

@@ -1,10 +1,8 @@
-import PeerActions from '../actions/PeerActions';
 import PeerStore from './PeerStore';
 import Status from '../Status';
 import UploadActions from '../actions/UploadActions';
 import UploadFile from '../UploadFile';
 import alt from '../alt';
-import peer from '../peer';
 import socket from '../socket';
 
 const chunkSize = 32;
@@ -12,7 +10,6 @@ const chunkSize = 32;
 class UploadStatus extends Status {
   constructor() {
     super([
-      'offline',
       'ready',
       'processing',
       'uploading'
@@ -23,17 +20,12 @@ class UploadStatus extends Status {
 export default alt.createStore(class UploadStore {
 
   constructor() {
-    this.bindActions(PeerActions);
     this.bindActions(UploadActions);
 
+    this.status = new UploadStatus();
     this.token = null;
     this.file = null;
-    this.status = new UploadStatus();
+    this.downloaders = [];
-  }
-
-  onSetPeerID(id) {
-    this.waitFor(PeerStore.dispatchToken);
-    if (this.status.isOffline()) this.status.set('ready');
   }
 
   onUploadFile(file) {
@@ -54,33 +46,26 @@ export default alt.createStore(class UploadStore {
 
   onSendToDownloader(peerID) {
     if (!this.status.isUploading()) return;
+    this.downloaders.push(peerID); // TODO
 
-    let file = this.file;
+    let conn = PeerStore.connect(peerID, {
-    let conn = peer.connect(peerID, {
+      chunkSize: chunkSize
-      reliable: true,
-      metadata: { chunkSize: chunkSize }
     });
 
-    conn.on('open', function () {
+    let totalPackets = this.file.countPackets();
-
+    let i = 0;
-      let packets = file.countPackets();
-      let packet = 0;
 
-      function sendNextChunk() {
+    let sendNextChunk = () => {
-        for (let i = 0; i < chunkSize; i++) {
+      for (let j = 0; i < totalPackets && j < chunkSize; i++, j++) {
-          if (packet >= packets) break;
+        let packet = this.file.getPacket(i);
-          let b = file.getPacket(packet);
+        conn.send(packet);
-          conn.send(b);
-          packet++;
-        }
       }
+    }
 
-      conn.on('data', function (data) {
+    conn.on('open', () => { sendNextChunk(); });
-        if (data === 'more') sendNextChunk();
-      });
-
-      sendNextChunk();
 
+    conn.on('data', (data) => {
+      if (data === 'more') sendNextChunk();
     });
   }
 

package.json

@@ -5,8 +5,8 @@
   "main": "server/index.js",
   "scripts": {
     "start": "node server/index.js",
-    "build": "./node_modules/.bin/browserify -d -o static/app.js -t babelify -t reactify client/index.js",
+    "build": "./node_modules/.bin/browserify -d -o static/app.js -t babelify client/index.js",
-    "watch": "./node_modules/.bin/watchify -d -o static/app.js -t babelify -t reactify client/index.js"
+    "watch": "./node_modules/.bin/watchify -d -o static/app.js -t babelify client/index.js"
   },
   "repository": {
     "type": "git",
@@ -19,18 +19,19 @@
   },
   "homepage": "https://github.com/kern/webdrop",
   "dependencies": {
-    "alt": "^0.14.4",
     "bases": "^0.2.1",
     "ejs": "^2.3.1",
     "express": "^4.12.0",
-    "peerjs": "^0.3.14",
+    "peer": "^0.2.8",
     "socket.io": "^1.3.5"
   },
   "devDependencies": {
+    "alt": "^0.14.4",
     "babelify": "^5.0.4",
+    "node-uuid": "^1.4.3",
+    "peerjs": "^0.3.14",
     "browserify": "^9.0.3",
     "react": "^0.13.0",
-    "reactify": "^1.1.0",
     "socket.io-client": "^1.3.5",
     "watchify": "^2.4.0"
   },

server/index.js

@@ -2,6 +2,7 @@ var Upload = require('./Upload');
 var express = require('express');
 var http = require('http');
 var path = require('path');
+var peer = require('peer');
 var routes = require('./routes');
 var socketIO = require('socket.io');
 
@@ -17,7 +18,9 @@ server.listen(process.env.PORT || 3000, function () {
 
 app.set('view engine', 'ejs');
 app.set('views', path.resolve(__dirname, '../views'));
+
 app.use(routes);
+app.use('/peer', peer.ExpressPeerServer(server));
 
 io.on('connection', function (socket) {