Создание однорангового компонента общего доступа к файлам в React & PeerJS

Событие data запускается всякий раз, когда пользователь на другой стороне (который я теперь буду называть «равноправным») отправляет файл текущему пользователю. Когда это происходит, мы вызываем метод onReceiveData , который мы определим позже. А пока знайте, что эта функция отвечает за обработку файлов, которые мы получили от однорангового узла.

Вам также необходимо добавить componentWillUnmount() который выполняется непосредственно перед размонтированием компонента из DOM. Здесь мы очищаем любые прослушиватели событий, которые были добавлены при монтировании компонента. Для этого компонента мы можем сделать это, вызвав метод destroy для объекта peer . Это закрывает соединение с сервером и завершает все существующие соединения. Таким образом, у нас не будет других слушателей событий, если этот компонент используется где-то еще на текущей странице.

 componentWillUnmount: function(){ this.state.peer.destroy(); }, 

Метод connect выполняется, когда текущий пользователь пытается подключиться к узлу. Мы соединяемся с одноранговым peer_id , вызывая метод connect в peer объекте и передавая ему peer_id , который мы также получаем из состояния. Позже вы увидите, как мы присваиваем значение peer_id . А пока, знайте, что peer_id — это значение, peer_id пользователем в текстовое поле для ввода идентификатора партнера. Значение, возвращаемое функцией connect затем сохраняется в состоянии. Затем мы делаем то же самое, что и раньше: прослушиваем событие open и data для текущего соединения. Обратите внимание, что на этот раз это для пользователя, который пытается подключиться к узлу. Другой ранее был для пользователя, к которому подключен. Нам нужно охватить оба случая, чтобы обмен файлами был двусторонним.

 connect: function(){ var peer_id = this.state.peer_id; var connection = this.state.peer.connect(peer_id); this.setState({ conn: connection }, () => { this.state.conn.on('open', () => { this.setState({ connected: true }); }); this.state.conn.on('data', this.onReceiveData); }); }, 

Метод sendFile выполняется всякий раз, когда файл выбирается с помощью ввода файла. Но вместо того, чтобы использовать this.files для получения данных файла, мы используем event.target.files . По умолчанию this в React относится к самому компоненту, поэтому мы не можем его использовать. Затем мы извлекаем первый файл из массива и создаем большой двоичный объект, передавая файлы и объект, содержащий тип файла, в качестве аргумента объекту Blob . Наконец, мы отправляем его нашему партнеру вместе с именем и типом файла, вызывая метод send для текущего однорангового соединения.

 sendFile: function(event){ console.log(event.target.files); var file = event.target.files[0]; var blob = new Blob(event.target.files, {type: file.type}); this.state.conn.send({ file: blob, filename: file.name, filetype: file.type }); }, 

Метод onReceiveData отвечает за обработку данных, полученных PeerJS. Это то, что ловит все, что отправлено методом sendFile . Таким образом, data аргумент data — это в основном объект, который мы передали методу conn.send ранее.

 onReceiveData: function(data){ ... }); 

Внутри функции мы создаем BLOB из данных, которые мы получили … Подождите, что? Но мы уже преобразовали файл в большой двоичный объект и отправили его с помощью PeerJS, так почему же нужно снова создавать большой двоичный объект? Я слышу тебя. Ответ в том, что когда мы отправляем BLOB-объект, он фактически не остается в виде BLOB-объекта Если вы знакомы с методом JSON.stringify для преобразования объектов в строки, он в основном работает так же. Таким образом, большой двоичный объект, который мы передали методу send преобразуется в формат, который можно легко отправить по сети. Когда мы его получим, это уже не тот блоб, который мы отправили. Вот почему нам нужно снова создать новый блоб. Но на этот раз мы должны поместить его в массив, так как это то, что ожидает объект Blob . Получив URL.createObjectURL объект, мы используем функцию URL.createObjectURL чтобы преобразовать его в объектный URL. Затем мы вызываем функцию addFile чтобы добавить файл в список полученных файлов.

 console.log('Received', data); var blob = new Blob([data.file], {type: data.filetype}); var url = URL.createObjectURL(blob); this.addFile({ 'name': data.filename, 'url': url }); 

Вот функция addFile . Все, что он делает, это получает все файлы, которые в данный момент находятся в состоянии, добавляет к ним новый файл и обновляет состояние. file_id используется в качестве значения для key атрибута, требуемого React при создании списков.

 addFile: function (file) { var file_name = file.name; var file_url = file.url; var files = this.state.files; var file_id = randomstring.generate(5); files.push({ id: file_id, url: file_url, name: file_name }); this.setState({ files: files }); }, 

Метод handleTextChange обновляет состояние всякий раз, когда изменяется значение текстового поля для ввода идентификатора партнера. Таким образом, состояние обновляется с текущим значением текстового поля идентификатора пира.

 handleTextChange: function(event){ this.setState({ peer_id: event.target.value }); }, 

Метод render визуализирует пользовательский интерфейс компонента. По умолчанию он отображает загружаемый текст, потому что компонент должен сначала получить уникальный идентификатор партнера. Как только у него есть одноранговый идентификатор, состояние обновляется, что вызывает повторную визуализацию компонента, но на этот раз с result в условии this.state.initialized . Внутри этого у нас есть другое условие, которое проверяет, подключен ли текущий пользователь к this.state.connected ( this.state.connected ). Если это так, мы вызываем метод renderConnected , если нет, то renderNotConnected() .

 render: function() { var result; if(this.state.initialized){ result = ( <div> <div> <span>{this.props.opts.my_id_label || 'Your PeerJS ID:'} </span> <strong className="mui--divider-left">{this.state.my_id}</strong> </div> {this.state.connected ? this.renderConnected() : this.renderNotConnected()} </div> ); } else { result = <div>Loading...</div>; } return result; }, 

Также обратите внимание, что выше мы используем реквизиты для настройки метки файлов. Поэтому, если my_id_label добавлен как свойство в объекте options ранее, он будет использовать значение, присвоенное этому, вместо значения в правой части символа двойной трубы ( || ).

Вот метод renderNotConnected . Все, что он делает, это показывает идентификатор текущего пользователя, текстовое поле для ввода идентификатора другого пользователя и кнопку для подключения к другому пользователю. Когда значение текстового поля изменяется, onChange функция onChange . Это вызывает handleTextChange который мы определили ранее. Это обновляет текст, который в данный момент находится в текстовом поле, а также значение peer_id в состоянии. Кнопка выполняет функцию connect при нажатии, которая инициирует соединение между узлами.

 renderNotConnected: function () { return ( <div> <hr /> <div className="mui-textfield"> <input type="text" className="mui-textfield" onChange={this.handleTextChange} /> <label>{this.props.opts.peer_id_label || 'Peer ID'}</label> </div> <button className="mui-btn mui-btn--accent" onClick={this.connect}> {this.props.opts.connect_label || 'connect'} </button> </div> ); }, 

С другой стороны, функция renderConnected показывает ввод файла и список файлов, которые были переданы текущему пользователю. Всякий раз, когда пользователь нажимает на ввод файла, он открывает окно выбора файла. Как только пользователь выбрал файл, он запускает onChange события onChange который, в свою очередь, вызывает метод sendFile который отправляет файл одноранговому sendFile . Ниже мы вызываем либо метод renderListFiles либо renderNoFiles зависимости от того, есть ли в данный момент файлы в состоянии.

 renderConnected: function () { return ( <div> <hr /> <div> <input type="file" name="file" id="file" className="mui--hide" onChange={this.sendFile} /> <label htmlFor="file" className="mui-btn mui-btn--small mui-btn--primary mui-btn--fab">+</label> </div> <div> <hr /> {this.state.files.length ? this.renderListFiles() : this.renderNoFiles()} </div> </div> ); }, 

Метод renderListFiles , как следует из названия, отвечает за перечисление всех файлов, которые в данный момент находятся в состоянии. Это перебирает все файлы, используя функцию map . Для каждой итерации мы вызываем функцию renderFile которая возвращает ссылку для каждого файла.

 renderListFiles: function(){ return ( <div id="file_list"> <table className="mui-table mui-table--bordered"> <thead> <tr> <th>{this.props.opts.file_list_label || 'Files shared to you: '}</th> </tr> </thead> <tbody> {this.state.files.map(this.renderFile, this)} </tbody> </table> </div> ); }, 

Вот функция renderFile которая возвращает строку таблицы, содержащую ссылку на файл.

 renderFile: function (file) { return ( <tr key={file.id}> <td> <a href={file.url} download={file.name}>{file.name}</a> </td> </tr> ); } 

Наконец, у нас есть функция, которая отвечает за рендеринг пользовательского интерфейса, когда еще нет файлов.

 renderNoFiles: function () { return ( <span id="no_files_message"> {this.props.opts.no_files_label || 'No files shared to you yet'} </span> ); }, 

Собираем все вместе

Мы используем команду browserify для связывания кода внутри каталога src . Вот полная команда, которую вы должны выполнить, находясь в корневом каталоге проекта:

 browserify -t [ babelify --presets [ es2015 react ] ] src/main.js -o js/main.js 

Разбивая его, сначала мы указываем опцию -t . Это позволяет нам использовать модуль преобразования. Здесь мы используем Babelify, которая использует предустановку реагирования и предустановку es2015. Итак, что происходит, так это то, что сначала Browserify просматривает указанный нами файл ( src/main.js ), анализирует его и вызывает Babelify, чтобы выполнить свою работу. Babelify использует предустановку es2015 для перевода всего кода ES6 в код ES5. В то время как предустановка React преобразует весь код JSX в обычный JavaScript. После того, как Browserify проверит все файлы, он объединит их, чтобы запустить в браузере.

Очки для рассмотрения

Если вы планируете использовать то, что вы узнали из этого урока, в своих собственных проектах. Обязательно учтите следующее:

• Разбейте компонент Filesharer на более мелкие. Вы могли заметить, что внутри компонента Filesharer есть куча кода. Обычно это не тот способ, которым вы ведете себя в React. Что вы хотели бы сделать, это разбить проект на более мелкие компоненты, насколько это возможно, а затем импортировать эти меньшие компоненты. Используя компонент Filesharer в качестве примера, мы могли бы иметь компонент TextInput для ввода идентификатора партнера, компонент List для перечисления полученных файлов и компонент FileInput для загрузки файлов. Идея состоит в том, чтобы каждый компонент выполнял только одну роль.
• Проверьте, доступны ли в браузере WebRTC и File API .
• Обрабатывать ошибки.
• Используйте Gulp для связывания кода при внесении изменений в файлы и при перезагрузке в реальном времени, чтобы автоматически перезагрузить браузер, как только это будет сделано.

Вывод

Это оно! Из этого руководства вы узнали, как работать с PeerJS и React, чтобы создать приложение для обмена файлами. Вы также узнали, как использовать Browserify, Babelify и предустановку Babel-React для преобразования кода JSX в код JavaScript, который может работать в браузерах.