jakob/PairDrop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Cleanup

Browse source
This commit is contained in:
RobinLinus 2018-09-22 04:44:17 +02:00
parent 52bd7692e9
commit 04415ef28f
4 changed files with 73 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
README.md
View file

@ -2,7 +2,7 @@
[Snapdrop](https://snapdrop.net): local file sharing in your browser - inspired by Apple's Airdrop.
#### Snapdrop Version 2 is built with the following awesome technologies:
#### Snapdrop (Version 2) is built with the following awesome technologies:
* Vanilla HTML5 / ES6 / CSS3
* Progressive Web App
* [WebRTC](http://webrtc.org/)
@ -18,12 +18,12 @@
* [idownloadblog](http://www.idownloadblog.com/2015/12/29/snapdrop/)
* [thenextweb](http://thenextweb.com/insider/2015/12/27/snapdrop-is-a-handy-web-based-replacement-for-apples-fiddly-airdrop-file-transfer-tool/)
* [winboard](http://www.winboard.org/artikel-ratgeber/6253-dateien-vom-desktop-pc-mit-anderen-plattformen-teilen-mit-snapdrop.html)
* [免費資源網路社群](https://free.com.tw/snapdrop/?utm_content=buffere6987&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer)
* [免費資源網路社群](https://free.com.tw/snapdrop/)
##### What about the connection? Is it a P2P-connection directly from device to device or is there any third-party-server?
It uses a P2P connection if WebRTC is supported by the browser. (WebRTC needs a Signaling Server, but it is only used to establish a connection and is not involved in the file transfer).
If WebRTC isn’t supported (Safari, IE) it uses a Web Sockets fallback for the file transfer. The server connects the clients with a stream.
If WebRTC isn’t supported (Safari, IE) it uses a Web Sockets fallback for the file transfer. The server connects the clients with each other.
##### What about privacy? Will files be saved on third-party-servers?
None of your files are ever saved on any server.
@ -33,15 +33,15 @@ But it does use Google Analytics.
##### Is SnapDrop a fork of ShareDrop?
No. ShareDrop is built with Ember. Snapdrop is built with vanilla ES6.
I wanted to play around with Progressive Web Apps and then I got the idea of a local file sharing app. By doing research on this idea I found and analysed ShareDrop. I liked it and thought about how to improve it.
ShareDrop uses WebRTC only and isn't compatible with Safari Browsers. Snapdrop uses a Websocket fallback and some hacks to make Snapdrop work due to the download restrictions on iDevices.
ShareDrop uses WebRTC only and isn't compatible with Safari browsers. Snapdrop uses a Websocket fallback and some hacks to make Snapdrop work due to the download restrictions on iDevices.
### Snapdrop is awesome! How can I support it?
* [File bugs, give feedback, submit suggestions](https://github.com/RobinLinus/snapdrop/issues)
* Share Snapdrop on your social media.
* [Buy me a cup of coffee](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=R9C5E42UYEQCN)
* Fix bugs and make a Pull Request. This is my first open source project, so I am not very used to the common workflow, but we'll figure it out!
* Do Security Analysis and suggestions
* Fix bugs and make a pull request.
* Do security analysis and suggestions
## Local Development
```
@ -49,7 +49,9 @@ ShareDrop uses WebRTC only and isn't compatible with Safari Browsers. Snapdrop u
cd snapdrop/server
npm install
node index.js
cd ../client
# open a second shell:
cd snapdrop/client
python -m SimpleHTTPServer
```

122
client/scripts/network.js
View file

@ -20,14 +20,6 @@ class ServerConnection {
this._socket = ws;
}
_isConnected() {
return this._socket && this._socket.readyState === this._socket.OPEN;
}
_isConnecting() {
return this._socket && this._socket.readyState === this._socket.CONNECTING;
}
_onMessage(msg) {
msg = JSON.parse(msg);
console.log('WS:', msg);
@ -82,6 +74,14 @@ class ServerConnection {
if (document.hidden) return;
this._connect();
}
_isConnected() {
return this._socket && this._socket.readyState === this._socket.OPEN;
}
_isConnecting() {
return this._socket && this._socket.readyState === this._socket.CONNECTING;
}
}
class Peer {
@ -192,16 +192,12 @@ class Peer {
}
_onDownloadProgress(progress) {
Events.fire('file-progress', {
sender: this._peerId,
progress: progress
});
Events.fire('file-progress', { sender: this._peerId, progress: progress });
}
_onFileReceived(proxyFile) {
Events.fire('file-received', proxyFile);
this.sendJSON({ type: 'transfer-complete' });
// this._digester = null;
}
_onTransferCompleted() {
@ -213,17 +209,13 @@ class Peer {
}
sendText(text) {
this.sendJSON({
type: 'text',
text: btoa(unescape(encodeURIComponent(text)))
});
const unescaped = btoa(unescape(encodeURIComponent(text)));
this.sendJSON({ type: 'text', text: unescaped });
}
_onTextReceived(message) {
Events.fire('text-received', {
text: decodeURIComponent(escape(atob(message.text))),
sender: this._peerId
});
const escaped = decodeURIComponent(escape(atob(message.text)));
Events.fire('text-received', { text: escaped, sender: this._peerId });
}
}
@ -232,35 +224,37 @@ class RTCPeer extends Peer {
constructor(serverConnection, peerId) {
super(serverConnection, peerId);
if (!peerId) return; // we will listen for a caller
this._start(peerId, true);
this._connect(peerId, true);
}
_start(peerId, isCaller) {
if (!this._peer) {
this._isCaller = isCaller;
this._peerId = peerId;
this._peer = new RTCPeerConnection(RTCPeer.config);
this._peer.onicecandidate = e => this._onIceCandidate(e);
this._peer.onconnectionstatechange = e => this._onConnectionStateChange(e);
}
_connect(peerId, isCaller) {
if (!this._conn) this._openConnection(peerId, isCaller);
if (isCaller) {
this._createChannel();
this._openChannel();
} else {
this._peer.ondatachannel = e => this._onChannelOpened(e);
this._conn.ondatachannel = e => this._onChannelOpened(e);
}
}
_createChannel() {
const channel = this._peer.createDataChannel('data-channel', { reliable: true });
_openConnection(peerId, isCaller) {
this._isCaller = isCaller;
this._peerId = peerId;
this._conn = new RTCPeerConnection(RTCPeer.config);
this._conn.onicecandidate = e => this._onIceCandidate(e);
this._conn.onconnectionstatechange = e => this._onConnectionStateChange(e);
}
_openChannel() {
const channel = this._conn.createDataChannel('data-channel', { reliable: true });
channel.binaryType = 'arraybuffer';
channel.onopen = e => this._onChannelOpened(e);
this._peer.createOffer(d => this._onDescription(d), e => this._onError(e));
this._conn.createOffer(d => this._onDescription(d), e => this._onError(e));
}
_onDescription(description) {
// description.sdp = description.sdp.replace('b=AS:30', 'b=AS:1638400');
this._peer.setLocalDescription(description,
this._conn.setLocalDescription(description,
_ => this._sendSignal({ sdp: description }),
e => this._onError(e));
}
@ -270,23 +264,16 @@ class RTCPeer extends Peer {
this._sendSignal({ ice: event.candidate });
}
_sendSignal(signal) {
signal.type = 'signal';
signal.to = this._peerId;
this._server.send(signal);
}
onServerMessage(message) {
if (!this._peer) this._start(message.sender, false);
const conn = this._peer;
if (!this._conn) this._connect(message.sender, false);
if (message.sdp) {
this._peer.setRemoteDescription(new RTCSessionDescription(message.sdp), () => {
this._conn.setRemoteDescription(new RTCSessionDescription(message.sdp), () => {
if (message.sdp.type !== 'offer') return;
this._peer.createAnswer(d => this._onDescription(d), e => this._onError(e));
this._conn.createAnswer(d => this._onDescription(d), e => this._onError(e));
}, e => this._onError(e));
} else if (message.ice) {
this._peer.addIceCandidate(new RTCIceCandidate(message.ice));
this._conn.addIceCandidate(new RTCIceCandidate(message.ice));
}
}
@ -301,34 +288,48 @@ class RTCPeer extends Peer {
_onChannelClosed() {
console.log('RTC: channel closed', this._peerId);
if (!this.isCaller) return;
this._start(this._peerId, true); // reopen the channel
this._connect(this._peerId, true); // reopen the channel
}
_onConnectionStateChange(e) {
console.log('RTC: state changed:', this._peer.connectionState);
switch (this._peer.connectionState) {
console.log('RTC: state changed:', this._conn.connectionState);
switch (this._conn.connectionState) {
case 'disconnected':
this._onChannelClosed();
break;
case 'failed':
this._peer = null;
this._conn = null;
this._onChannelClosed();
break;
}
}
_send(message) {
this._channel.send(message);
}
_onError(error) {
console.error(error);
}
_send(message) {
this._channel.send(message);
}
_sendSignal(signal) {
signal.type = 'signal';
signal.to = this._peerId;
this._server.send(signal);
}
refresh() {
// check if channel open. otherwise create one
if (this._peer && this._channel && this._channel.readyState !== 'open') return;
this._start(this._peerId, this._isCaller);
// check if channel is open. otherwise create one
if (this._isConnected() || this._isConnecting()) return;
this._connect(this._peerId, this._isCaller);
}
_isConnected() {
return this._channel && this._channel.readyState === 'open';
}
_isConnecting() {
return this._channel && this._channel.readyState === 'connecting';
}
}
@ -422,7 +423,7 @@ class FileChunker {
this._partitionSize += chunk.byteLength;
this._onChunk(chunk);
if (this._isPartitionEnd() || this.isFileEnd()) {
this._onPartitionEnd(this._partitionSize);
this._onPartitionEnd(this._offset);
return;
}
this._readChunk();
@ -447,6 +448,7 @@ class FileChunker {
}
class FileDigester {
constructor(meta, callback) {
this._buffer = [];
this._bytesReceived = 0;
@ -473,6 +475,7 @@ class FileDigester {
});
this._callback = null;
}
}
class Events {
@ -485,7 +488,6 @@ class Events {
}
}
window.isRtcSupported = !!(window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection);
RTCPeer.config = {

2
client/scripts/ui.js
View file

@ -392,8 +392,8 @@ class Notifications {
}
_copyText(message, notification) {
document.copy(message);
notification.close();
if(!document.copy(message)) return;
this._notify('Copied text to clipboard');
}

1
client/styles.css
View file

@ -625,6 +625,7 @@ screen and (min-width: 1100px) {
x-instructions {
top: 24px;
}
footer .logo {
--icon-size: 40px;
}