Почему не выполняется функция в React.js из библиотеки WebTorrent?

Question

[YungJabo]

Вроде запускается сам client, но вот выполнять client.add не хочет. Причем на node.js выполняет ее. Никак не пойму, даже сообщений об ошибке нет никаких.

React:

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import WebTorrent from "webtorrent";

function App() {
  const client = new WebTorrent();
  console.log(client);
  const torrentId =
    "magnet:?xt=urn:btih:96a1d6641ed402a504fde6afe819b13795bdf6c9&tr=udp%3A%2F%2Fopentor.net%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337%2Fannounce&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A6969%2Fannounce&tr=udp%3A%2F%2Fopentracker.i2p.rocks%3A6969%2Fannounce&tr=udp%3A%2F%2Fatrack.pow7.com%3A6969%2Fannounce&tr=udp%3A%2F%2Fpow7.com%3A6969%2Fannounce&tr=http%3A%2F%2Fsecure.pow7.com%2Fannounce&tr=http%3A%2F%2Ft1.pow7.com%2Fannounce&tr=udp%3A%2F%2Ft2.pow7.com%3A6969%2Fannounce&tr=http%3A%2F%2Ftracker.bittor.pw%3A1337%2Fannounce&tr=http%3A%2F%2Ftracker.dler.org%3A6969%2Fannounce&tr=udp%3A%2F%2Ftracker.zer0day.to%3A1337%2Fannounce&tr=http%3A%2F%2Fbt2.t-ru.org%2Fann%3Fmagnet";
  client.add(torrentId, function (torrent) {
    console.log("ok");
  });
  console.log(2);

  return <>Ок</>;
}

export default App;

Консоль:

Он просто проходит эту функцию и все

Answer 1

[Александр]

Вариант решения работает, хоть и выглядит так себе https://github.com/webtorrent/webtorrent/issues/26...
Пример https://codesandbox.io/p/sandbox/qna-q-1320018-yqkjsh

Comments

[YungJabo]

Теперь вот такие ошибки:

[YungJabo]

Uncaught Error: Cannot add duplicate torrent 187bfb983acdb0f2b16da815220b34ddb201c3a1
    r3 webtorrent.min.js:1
    p webtorrent.min.js:1
    a webtorrent.min.js:1
    emit webtorrent.min.js:1
    _onParsedTorrent webtorrent.min.js:1
    _onTorrentId webtorrent.min.js:1
    run webtorrent.min.js:1
    a webtorrent.min.js:1
    setTimeout handler*o2 webtorrent.min.js:1
    nextTick webtorrent.min.js:1
    o2 webtorrent.min.js:1
    App App.jsx:8
    React 8
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require2 chunk-AMS7QLHL.js:13
    js index.js:6
    __require2 chunk-AMS7QLHL.js:13
    React 2
    __require2 chunk-AMS7QLHL.js:13
    js React
    __require2 chunk-AMS7QLHL.js:13
    js React
    __require2 chunk-AMS7QLHL.js:13
    <anonymous> react-dom_client.js:21615
webtorrent.min.js:1:285431

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import WebTorrent from "webtorrent";

function App() {
  const client = new WebTorrent();
  const torrentId =
    "magnet:?xt=urn:btih:187bfb983acdb0f2b16da815220b34ddb201c3a1&tr=udp%3A%2F%2Fopentor.net%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337%2Fannounce&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A6969%2Fannounce&tr=udp%3A%2F%2Fopentracker.i2p.rocks%3A6969%2Fannounce&tr=udp%3A%2F%2Fatrack.pow7.com%3A6969%2Fannounce&tr=udp%3A%2F%2Fpow7.com%3A6969%2Fannounce&tr=http%3A%2F%2Fsecure.pow7.com%2Fannounce&tr=http%3A%2F%2Ft1.pow7.com%2Fannounce&tr=udp%3A%2F%2Ft2.pow7.com%3A6969%2Fannounce&tr=http%3A%2F%2Ftracker.bittor.pw%3A1337%2Fannounce&tr=http%3A%2F%2Ftracker.dler.org%3A6969%2Fannounce&tr=udp%3A%2F%2Ftracker.zer0day.to%3A1337%2Fannounce&tr=http%3A%2F%2Fbt2.t-ru.org%2Fann%3Fmagnet";
  client.add(torrentId, function (torrent) {
    console.log("ok");
  });
  console.log(client.add(torrentId));
  console.log(2);

  return <>Ок</>;
}

export default App;

При попытке вызвать client.add в console.log

[YungJabo]

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import WebTorrent from "webtorrent";

function App() {
  const client = new WebTorrent();
  const torrentId =
    "magnet:?xt=urn:btih:187bfb983acdb0f2b16da815220b34ddb201c3a1&tr=udp%3A%2F%2Fopentor.net%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337%2Fannounce&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A6969%2Fannounce&tr=udp%3A%2F%2Fopentracker.i2p.rocks%3A6969%2Fannounce&tr=udp%3A%2F%2Fatrack.pow7.com%3A6969%2Fannounce&tr=udp%3A%2F%2Fpow7.com%3A6969%2Fannounce&tr=http%3A%2F%2Fsecure.pow7.com%2Fannounce&tr=http%3A%2F%2Ft1.pow7.com%2Fannounce&tr=udp%3A%2F%2Ft2.pow7.com%3A6969%2Fannounce&tr=http%3A%2F%2Ftracker.bittor.pw%3A1337%2Fannounce&tr=http%3A%2F%2Ftracker.dler.org%3A6969%2Fannounce&tr=udp%3A%2F%2Ftracker.zer0day.to%3A1337%2Fannounce&tr=http%3A%2F%2Fbt2.t-ru.org%2Fann%3Fmagnet";
  // client.add(torrentId, function (torrent) {
  //   console.log("ok");
  // });
  console.log(client.add(torrentId));
  console.log(2);

  return <>Ок</>;
}

export default App;

Object { _events: {…}, _eventsCount: 3, _maxListeners: undefined, _debugId: "187bfb9", client: {…}, announce: undefined, urlList: undefined, path: undefined, _store: n2(e4, t3)
, _getAnnounceOpts: undefined, … }
App.jsx:14:10
2 App.jsx:15:10
Object { _events: {…}, _eventsCount: 3, _maxListeners: undefined, _debugId: "187bfb9", client: {…}, announce: undefined, urlList: undefined, path: undefined, _store: n2(e4, t3)
, _getAnnounceOpts: undefined, … }
App.jsx:14:10
2

Он не хочет его запускать

[YungJabo]

Он добавляет через add этот торрент, но файлов там нет, массив пустой выводит:

Object { _events: {…}, _eventsCount: 3, _maxListeners: undefined, _debugId: "187bfb9", client: {…}, announce: undefined, urlList: undefined, path: undefined, _store: n2(e4, t3)
, _getAnnounceOpts: undefined, … }
App.jsx:14:10
Array []
​
length: 0
​
<prototype>: Array []
App.jsx:15:10
2

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import WebTorrent from "webtorrent";

function App() {
  const client = new WebTorrent();
  const torrentId =
    "magnet:?xt=urn:btih:187bfb983acdb0f2b16da815220b34ddb201c3a1&tr=udp%3A%2F%2Fopentor.net%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337%2Fannounce&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A6969%2Fannounce&tr=udp%3A%2F%2Fopentracker.i2p.rocks%3A6969%2Fannounce&tr=udp%3A%2F%2Fatrack.pow7.com%3A6969%2Fannounce&tr=udp%3A%2F%2Fpow7.com%3A6969%2Fannounce&tr=http%3A%2F%2Fsecure.pow7.com%2Fannounce&tr=http%3A%2F%2Ft1.pow7.com%2Fannounce&tr=udp%3A%2F%2Ft2.pow7.com%3A6969%2Fannounce&tr=http%3A%2F%2Ftracker.bittor.pw%3A1337%2Fannounce&tr=http%3A%2F%2Ftracker.dler.org%3A6969%2Fannounce&tr=udp%3A%2F%2Ftracker.zer0day.to%3A1337%2Fannounce&tr=http%3A%2F%2Fbt2.t-ru.org%2Fann%3Fmagnet";
  // client.add(torrentId, function (torrent) {
  //   console.log("ok");
  // });
  console.log(client.add(torrentId));
  console.log(client.torrents[0].files);
  console.log(2);

  return <>Ок</>;
}

export default App;

[Александр]

YungJabo, А ошибку почему не прочитать?

Cannot add duplicate torrent 187bfb983acdb0f2b16da815220b34ddb201c3a1

Давайте переведу за Вас:

Невозможно добавить дубликат торрента 187bfb983acdb0f2b16da815220b34ddb201c3a1

Вы дважды добавили один и тот же id. А ещё Вы должны хранить экземпляр клиента в useRef, а не создавать на каждом рендере новый.

[YungJabo]

Это объект client:

Object { _events: {…}, _eventsCount: 3, _maxListeners: undefined, _debugId: "5a54d9c", client: {…}, announce: undefined, urlList: undefined, path: undefined, _store: n2(e4, t3), _getAnnounceOpts: undefined, … }
​
_amInterested: false
​
_critical: Array []
​
_debugId: "5a54d9c"
​
_downloadSpeed: function exports(e4)
​
_events: Object { ready: BoundFunctionObject, close: BoundFunctionObject }
​
_eventsCount: 2
​
_fileModtimes: undefined
​
_getAnnounceOpts: undefined
​
_maxListeners: undefined
​
_peers: Object {  }
​
_peersLength: 0
​
_queue: Array []
​
_rechokeIntervalId: 10
​
_rechokeNumSlots: 10
​
_rechokeOptimisticTime: 0
​
_rechokeOptimisticWire: null
​
_selections: Array []
​
_servers: Array []
​
_store: function n2(e4, t3)
​
_uploadSpeed: function exports(e4)
​
_xsRequests: Array []
​
announce: Array(13) [ "http://bt2.t-ru.org/ann?magnet", "http://secure.pow7.com/announce", "http://t1.pow7.com/announce", … ]
​
client: Object { _eventsCount: 1, peerId: "2d5757303030302d7076414a323855434e353830", nodeId: "b21d67d8ae353e15fab42e182c6fc7783a920771", … }
​
destroyed: false
​
discovery: Object { _eventsCount: 5, peerId: "2d5757303030302d7076414a323855434e353830", infoHash: "5a54d9ccebb11cca2adb284f52aceeef4207a28b", … }
​
done: false
​
files: Array []
​
infoHash: "5a54d9ccebb11cca2adb284f52aceeef4207a28b"
​
infoHashBuffer: Uint8Array(20) [ 90, 84, 217, … ]
​
magnetURI: "magnet:?xt=urn:btih:5a54d9ccebb11cca2adb284f52aceeef4207a28b&tr=http%3A%2F%2Fbt2.t-ru.org%2Fann%3Fmagnet&tr=http%3A%2F%2Fsecure.pow7.com%2Fannounce&tr=http%3A%2F%2Ft1.pow7.com%2Fannounce&tr=http%3A%2F%2Ftracker.bittor.pw%3A1337%2Fannounce&tr=http%3A%2F%2Ftracker.dler.org%3A6969%2Fannounce&tr=udp%3A%2F%2Fatrack.pow7.com%3A6969%2Fannounce&tr=udp%3A%2F%2Fopentor.net%3A6969&tr=udp%3A%2F%2Fopentracker.i2p.rocks%3A6969%2Fannounce&tr=udp%3A%2F%2Fpow7.com%3A6969%2Fannounce&tr=udp%3A%2F%2Ft2.pow7.com%3A6969%2Fannounce&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A6969%2Fannounce&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337%2Fannounce&tr=udp%3A%2F%2Ftracker.zer0day.to%3A1337%2Fannounce"
​
maxWebConns: 4
​
metadata: null
​
path: "/webtorrent/5a54d9ccebb11cca2adb284f52aceeef4207a28b"
​
paused: false
​
pieces: Array []
​
ready: false
​
received: 0
​
store: null
​
strategy: "sequential"
​
torrentFile: Uint8Array(586) [ 100, 56, 58, … ]
​
tr: Array(13) [ "http://bt2.t-ru.org/ann?magnet", "http://secure.pow7.com/announce", "http://t1.pow7.com/announce", … ]
​
uploaded: 0
​
urlList: Array []
​
wires: Array []
​
xt: "urn:btih:5a54d9ccebb11cca2adb284f52aceeef4207a28b"
​
<prototype>: Object { _onTorrentId: _onTorrentId(e3), _onParsedTorrent: _onParsedTorrent(e3), _processParsedTorrent: _processParsedTorrent(e3), … }
App.jsx:14:10

[YungJabo]

Александр, Да, с этим я понял. Знаю про useRef. Конкретно сейчас вот другой вопрос, он не видит торрент файлов в client