From 04415ef28f8e7281c13546f168f2582a82bcb34f Mon Sep 17 00:00:00 2001 From: RobinLinus Date: Sat, 22 Sep 2018 04:44:17 +0200 Subject: [PATCH] Cleanup --- README.md | 16 ++--- client/scripts/network.js | 122 +++++++++++++++++++------------------- client/scripts/ui.js | 2 +- client/styles.css | 1 + 4 files changed, 73 insertions(+), 68 deletions(-) diff --git a/README.md b/README.md index 0744ba4..5cb278f 100644 --- a/README.md +++ b/README.md @@ -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 ``` diff --git a/client/scripts/network.js b/client/scripts/network.js index 6e61a78..ff113f3 100644 --- a/client/scripts/network.js +++ b/client/scripts/network.js @@ -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 = { diff --git a/client/scripts/ui.js b/client/scripts/ui.js index 42ca141..8ef5251 100644 --- a/client/scripts/ui.js +++ b/client/scripts/ui.js @@ -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'); } diff --git a/client/styles.css b/client/styles.css index f6e84b5..121ea7b 100644 --- a/client/styles.css +++ b/client/styles.css @@ -625,6 +625,7 @@ screen and (min-width: 1100px) { x-instructions { top: 24px; } + footer .logo { --icon-size: 40px; }