Partage de technologie

[JavaScript Script Universe] Communication temps réel et réseaux décentralisés : une introduction détaillée aux bibliothèques JavaScript

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Connexions peer-to-peer, gestion des seed WebRTC, communication en temps réel : explorez six bibliothèques JavaScript

Préface

Alors que les applications Web modernes nécessitent de plus en plus de communication et de décentralisation en temps réel, les bibliothèques JavaScript jouent un rôle clé dans la création de connexions peer-to-peer, le transfert de données en temps réel et les réseaux distribués. Cet article présentera plusieurs bibliothèques JavaScript populaires, notamment PeerJS, WebTorrent, Simple-Peer, Socket.IO, Libp2p et SwarmJS, chacune fournissant différentes fonctions et fonctionnalités pour répondre à différents besoins de développement.

Bienvenue à vous abonner à la chronique :Univers de scripts JavaScript

Annuaire d'articles

1. PeerJS : une bibliothèque de connexion peer-to-peer simple

1.1 Introduction

PeerJS est une bibliothèque JavaScript permettant d'établir des connexions peer-to-peer, ce qui facilite la communication directe entre les navigateurs. La bibliothèque fournit une API simple et facile à utiliser, permettant aux développeurs de créer rapidement des applications basées sur des connexions P2P. Grâce à PeerJS, les utilisateurs peuvent effectuer un chat vidéo, un partage de fichiers et d'autres fonctions directement dans le navigateur sans recourir à un serveur tiers.

1.1.1 Fonctions principales
  • Transfert de données direct point à point
  • Prend en charge la transmission directe des flux audio et vidéo
  • Fournir une API simple et facile à utiliser
1.1.2 Scénarios d'utilisation

PeerJS convient aux scénarios nécessitant une communication point à point dans le navigateur, tels que les plateformes de formation en ligne, les outils de collaboration en temps réel, les applications de vidéoconférence, etc.

1.2 Installation et configuration

1.2.1 Guide d'installation

Vous pouvez installer PeerJS via npm :

npm install peerjs
  • 1
1.2.2 Configuration de base

Avant d'utiliser PeerJS, vous devez introduire le fichier JavaScript correspondant dans la page :

<script src="https://cdn.jsdelivr.net/npm/peerjs@1"></script>
  • 1

1.3 Présentation de l'API

1.3.1 Créer un objet homologue

Tout d’abord, nous devons créer un objet Peer pour représenter le client actuel.

const peer = new Peer({key: 'your-api-key'});
  • 1

Dans le code ci-dessus,your-api-key Elle doit être remplacée par la clé API que vous avez demandée sur le site officiel de PeerJS.Si vous n'avez pas de clé API, vous pouvez accéder àSite officiel de PeerJSAppliquer.

1.3.2 Établir une connexion

Une fois l'objet Peer créé avec succès, nous pouvons essayer d'établir des connexions avec d'autres clients. Voici un exemple simple montrant comment établir une connexion peer-to-peer via PeerJS :

// 初始化Peer对象
const peer = new Peer({key: 'your-api-key'});

// 当Peer对象打开连接时
peer.on('open', (id) => {
  console.log('My peer ID is: ' + id);
});

// 尝试连接至另一个Peer
const conn = peer.connect('another-peer-id');

// 当连接建立时
conn.on('open', () => {
  // 发送数据
  conn.send('Hello, world!');
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

Dans l'exemple ci-dessus, nous avons d'abord initialisé un objet Peer et généré l'ID correspondant après avoir ouvert la connexion. Nous avons ensuite essayé d'établir une connexion avec un autre homologue et envoyé un message une fois la connexion établie.

Ce qui précède est une brève introduction et une utilisation de base de la bibliothèque PeerJS.Pour une documentation et des exemples d'API plus détaillés, veuillez vous référer àDocumentation officielle

2. WebTorrent : un référentiel torrent WebRTC à utiliser dans le navigateur

WebTorrent est une bibliothèque client P2P BitTorrent moderne qui peut être utilisée dans le navigateur et Node.js. Il utilise le canal de données WebRTC pour obtenir une transmission multimédia en streaming efficace.

2.1 Introduction

2.1.1 Fonctions principales

WebTorrent fournit une fonction de partage de fichiers peer-to-peer (P2P) basée sur WebRTC, qui peut télécharger et partager des fichiers torrent directement dans le navigateur, et prend également en charge l'exécution dans l'environnement Node.js.

2.1.2 Scénarios d'utilisation

WebTorrent peut être utilisé pour créer des applications de transmission multimédia en streaming multiplateforme pour des données vidéo, audio et autres données multimédia en temps réel, et peut également être utilisé dans l'éducation en ligne, les conférences à distance et d'autres domaines.

2.2 Installation et configuration

2.2.1 Guide d'installation

L'utilisation de WebTorrent dans un navigateur ne nécessite l'installation d'aucun logiciel, juste l'introduction de la bibliothèque JavaScript correspondante. Utilisé dans Node.js, peut être installé via npm :

npm install webtorrent
  • 1
2.2.2 Configuration de base

Dans l'environnement du navigateur, vous pouvez introduire directement les fichiers JavaScript liés à WebTorrent :

<script src="https://cdn.jsdelivr.net/npm/webtorrent/webtorrent.min.js"></script>
  • 1

Dans un environnement Node.js, WebTorrent peut être introduit en utilisant :

const WebTorrent = require('webtorrent');
  • 1

2.3 Présentation de l'API

2.3.1 Créer des graines

WebTorrent fournit une API pour créer des torrents, qui peut convertir des fichiers locaux ou des liens en fichiers torrent. L'exemple de code est le suivant :

const client = new WebTorrent();

// 创建种子
client.seed('path/to/file', { announce: ['wss://tracker.openwebtorrent.com'] }, torrent => {
  console.log('种子已创建:', torrent.magnetURI);
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

Pour plus d'informations sur la création de graines, veuillez vous référer à Documentation officielle de WebTorrent

2.3.2 Connexion des pairs

Les utilisateurs peuvent se connecter à d'autres nœuds, partager et télécharger des fichiers via WebTorrent. L'exemple de code est le suivant :

// 加入种子
client.add('magnet:?xt=urn:btih:6bec5a9f74c8d5ea5b9d0ea9cdaae3815f14a28b', torrent => {
  // 下载完成后触发
  torrent.on('done', () => {
    console.log('下载完成');
    // 获取文件
    const file = torrent.files[0];
    file.getBuffer((err, buffer) => {
      if (err) throw err;
      console.log('获取文件的缓冲区:', buffer);
    });
  });
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

Pour plus d'informations sur la connexion des pairs, veuillez vous référer à Documentation officielle de WebTorrent

Expansion : WebTorrent fournit également de nombreuses autres API et fonctions utiles, telles que le streaming, la gestion des files d'attente de téléchargement, etc., que les développeurs peuvent effectuer des recherches approfondies et utiliser en fonction de besoins spécifiques.

3. Simple-Peer : une bibliothèque WebRTC plus simple

3.1 Introduction

Simple-Peer est une bibliothèque JavaScript pour WebRTC qui fournit une interface plus simple pour implémenter la transmission de données point à point et la communication en streaming.

3.1.1 Fonctions principales

Simple-Peer fournit principalement les fonctions de base suivantes :

  • Établir une connexion peer-to-peer dans le navigateur
  • Réaliser la transmission de flux audio et vidéo
  • Fournit des canaux de données pour la transmission de données en temps réel
3.1.2 Scénarios d'utilisation

Simple-Peer peut être utilisé pour créer des applications de messagerie instantanée basées sur un navigateur, des systèmes de vidéoconférence, le partage de fichiers et d'autres scénarios nécessitant une communication point à point.

3.2 Installation et configuration

3.2.1 Méthode d'installation

Vous pouvez installer Simple-Peer via npm :

npm install simple-peer
  • 1

Ou utilisez CDN pour l'importer directement dans le fichier HTML :

<script src="https://cdn.jsdelivr.net/npm/simple-peer@latest"></script>
  • 1
3.2.2 Paramètres de base

Avant d'utiliser Simple-Peer, vous devez vous assurer que votre application prend en charge WebRTC et que l'utilisateur a autorisé l'utilisation de la caméra et du microphone.

3.3 Présentation de l'API

3.3.1 Créer un objet SimplePeer

Vous pouvez créer un objet SimplePeer à l'aide du code suivant :

const SimplePeer = require('simple-peer');

// 初始化 SimplePeer 对象
const peer = new SimplePeer({
  initiator: true, // 是否是连接的发起方
  trickle: false    // 是否启用 ICE trickle(加速连接过程)
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

Pour plus d'informations sur la création d'objets SimplePeer, veuillez vous référer à Documentation officielle

3.3.2 Envoyer des données

Une fois la connexion établie avec succès, vous pouvez envoyer des données via le canal de l'objet SimplePeer. Voici un exemple simple :

// 监听连接建立事件
peer.on('connect', () => {
  // 发送数据
  peer.send('Hello, world!');
});

// 监听数据接收事件
peer.on('data', data => {
  console.log('Received', data);
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

Dans l'exemple ci-dessus, on passe send La méthode envoie un morceau de données de chaîne et écoutedata événement pour recevoir des données.

Ce qui précède est un exemple simple de Simple-Peer. Pour des options d'utilisation et de configuration plus détaillées de l'API, veuillez vous référer à. Documentation officielle

4. Socket.IO : bibliothèque JavaScript pour une communication bidirectionnelle en temps réel

Socket.IO est une bibliothèque JavaScript qui offre des capacités de communication bidirectionnelle en temps réel et peut être utilisée pour créer des applications Web en temps réel. Il est basé sur le protocole WebSocket traditionnel et prend également en charge les sondages et autres mécanismes de communication en temps réel, ce qui le rend plus compatible.

4.1 Introduction

4.1.1 Fonctions principales

Les principales fonctionnalités de Socket.IO incluent :

  • Communication bidirectionnelle en temps réel
  • Gestion automatique des connexions
  • Prise en charge de plusieurs mécanismes de communication en temps réel
  • architecture événementielle
4.1.2 Scénarios d'utilisation

Socket.IO peut être utilisé dans des scénarios nécessitant une mise à jour des données en temps réel, tels que les jeux en ligne, la messagerie instantanée, l'édition collaborative en temps réel, etc.

4.2 Installation et configuration

4.2.1 Instructions d'installation

Installer via npm :

npm install socket.io
  • 1
4.2.2 Configuration de base

Côté serveur, utilisez le code suivant pour initialiser Socket.IO :

const io = require('socket.io')(http);
  • 1

Côté client, introduisez la bibliothèque client Socket.IO :

<script src="/socket.io/socket.io.js"></script>
  • 1

4.3 Présentation de l'API

4.3.1 Établir la connexion Socket

Côté client, établissez une connexion Socket avec le serveur via le code suivant :

const socket = io();
  • 1
4.3.2 Traitement des événements en temps réel

Socket.IO prend en charge le déclenchement et la surveillance d'événements personnalisés.Ce qui suit est un exemple simple, lorsque le côté serveur déclenchechat message Lorsqu'un événement survient, le client effectue les opérations correspondantes :
Terminal de service :

io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });
});
  • 1
  • 2
  • 3
  • 4
  • 5

Client:

socket.on('chat message', (msg) => {
  console.log('message: ' + msg);
});
  • 1
  • 2
  • 3

Pour des informations plus détaillées sur l'API et des exemples d'utilisation, voir Documentation officielle de Socket.IO

5. Libp2p : pile de protocoles réseau modulaire pour créer des applications réseau décentralisées

5.1 Présentation

Libp2p est une pile de protocoles réseau modulaire permettant de créer des applications réseau décentralisées. Elle fournit une série de modules et d'outils permettant aux développeurs de créer facilement des applications réseau peer-to-peer (P2P).

5.1.1 Fonctions principales
  • Plusieurs protocoles de transmission pris en charge
  • routage et découverte
  • transmission sécurisée
  • Évolutivité
5.1.2 Scénarios d'application
  • Chaîne de blocs
  • Stockage de fichiers distribué
  • Applications décentralisées

5.2 Installation et configuration

5.2.1 Instructions d'installation

Installez Libp2p via npm :

npm install libp2p
  • 1
5.2.2 Configuration de base
const Libp2p = require('libp2p')

async function createNode() {
  const node = await Libp2p.create()
  await node.start()
  console.log('Node started!')
}

createNode()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

5.3 Présentation de l'API

5.3.1 Création et gestion de nœuds

utiliserLibp2p.create()la méthode crée le nœud puis appellestart() Méthode pour démarrer le nœud. Voici l'exemple de code JavaScript complet :

const Libp2p = require('libp2p')

async function createNode() {
  const node = await Libp2p.create()
  await node.start()
  console.log('Node started!')
}

createNode()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Documentation officielle :Libp2p - Créer un nœud

5.3.2 Transmission et routage des données

Libp2p fournit une API riche pour gérer la transmission et le routage des données, comme l'utilisation de protocoles de transmission pour la transmission de données, la mise en œuvre de stratégies de routage personnalisées, etc. Voici un exemple simple de transfert de données :

const Libp2p = require('libp2p')
const TCP = require('libp2p-tcp')
const MPLEX = require('libp2p-mplex')

async function createNode() {
  const node = await Libp2p.create({
    addresses: {
      listen: ['/ip4/0.0.0.0/tcp/0']
    },
    modules: {
      transport: [TCP],
      streamMuxer: [MPLEX]
    }
  })
  await node.start()
  console.log('Node started!')
}

createNode()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

Documentation officielle :Libp2p – Transmission et routage des données

Grâce à l'introduction, à l'installation et à la configuration ci-dessus, ainsi qu'à la présentation de l'API de Libp2p, j'espère que cela pourra vous aider à comprendre et à commencer à utiliser la bibliothèque Libp2p plus rapidement.

6. SwarmJS : bibliothèque JavaScript basée sur le protocole réseau Swarm pour le stockage et la communication distribués

6.1 Introduction

SwarmJS est une bibliothèque JavaScript basée sur le protocole réseau Swarm, conçue pour fournir des capacités de stockage et de communication distribuées. Il permet aux développeurs d'échanger et de stocker des données sur un réseau P2P, permettant une gestion des données hautement sécurisée et décentralisée.

6.1.1 Fonctions principales

Les principales fonctionnalités de SwarmJS incluent :

  • Stockage distribué : grâce au protocole réseau Swarm, le stockage distribué des données est réalisé pour garantir une fiabilité et une durabilité élevées des données.
  • Communication P2P : prend en charge la communication basée sur les réseaux P2P, permettant aux applications de transférer directement des messages et d'échanger des données entre les nœuds.
6.1.2 Scénarios d'utilisation

SwarmJS peut être utilisé dans des scénarios tels que des applications décentralisées (DApps), des portefeuilles de crypto-monnaie, le stockage de fichiers distribués, etc. pour obtenir un stockage sécurisé et une communication efficace des données.

6.2 Installation et configuration

6.2.1 Méthode d'installation

SwarmJS peut être installé via l'outil de gestion de packages npm :

npm install swarm-js
  • 1
6.2.2 Paramètres de base

Une fois l'installation terminée, la bibliothèque SwarmJS peut être introduite des manières suivantes :

const Swarm = require('swarm-js');
  • 1

6.3 Présentation de l'API

6.3.1 Rejoindre le réseau Swarm

Rejoindre le réseau Swarm à l'aide de SwarmJS est très simple et peut se faire avec seulement quelques lignes de code :

// 创建Swarm实例
const mySwarm = new Swarm();

// 加入Swarm网络
mySwarm.joinNetwork();
  • 1
  • 2
  • 3
  • 4
  • 5

Une documentation détaillée de l'API est disponible surDocumentation officielle de SwarmJSVu dans .

6.3.2 Stockage et récupération des données

SwarmJS fournit des fonctions de stockage et de récupération de données simples et puissantes. Voici un exemple simple :

// 存储数据
mySwarm.put('key', 'value');

// 检索数据
mySwarm.get('key', (err, value) => {
  if (err) {
    console.error(err);
  } else {
    console.log('Retrieved value:', value);
  }
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

Pour plus de détails sur l'API sur le stockage et la récupération des données, veuillez vous référer àDocumentation officielle de SwarmJS

Grâce à SwarmJS, nous pouvons facilement mettre en œuvre un stockage et une communication distribués basés sur le protocole réseau Swarm, offrant ainsi de nouvelles possibilités au développement d'applications.

Résumer

Cet article présente une série de bibliothèques JavaScript importantes qui jouent un rôle important dans le développement d'applications Web modernes. Qu'il s'agisse de créer une plate-forme de communication en temps réel, de mettre en œuvre la gestion des semences WebRTC ou de développer des applications réseau décentralisées, ces bibliothèques fournissent des fonctions riches et des API flexibles, offrant aux développeurs des outils puissants. En ayant une compréhension approfondie des fonctions de base, des scénarios d'utilisation et de la présentation des API de ces bibliothèques, les développeurs peuvent mieux choisir les bons outils et accélérer le processus de développement d'applications.