Compartilhamento de tecnologia

[JavaScript Script Universe] Comunicação em tempo real e redes descentralizadas: uma introdução detalhada às bibliotecas JavaScript

2024-07-12

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

Conexões ponto a ponto, gerenciamento de sementes WebRTC, comunicação em tempo real: explore seis bibliotecas JavaScript

Prefácio

À medida que as aplicações web modernas exigem cada vez mais comunicação e descentralização em tempo real, as bibliotecas JavaScript desempenham um papel fundamental na construção de conexões peer-to-peer, transferência de dados em tempo real e redes distribuídas. Este artigo apresentará várias bibliotecas JavaScript populares, incluindo PeerJS, WebTorrent, Simple-Peer, Socket.IO, Libp2p e SwarmJS, cada uma delas fornecendo diferentes funções e recursos para atender a diferentes necessidades de desenvolvimento.

Bem-vindo a assinar a coluna:Universo de scripts JavaScript

Diretório de artigos

1. PeerJS: uma biblioteca simples de conexão ponto a ponto

1.1 Introdução

PeerJS é uma biblioteca JavaScript para estabelecer conexões ponto a ponto, o que facilita a comunicação direta entre navegadores. Esta biblioteca fornece uma API simples e fácil de usar, permitindo que os desenvolvedores criem rapidamente aplicativos baseados em conexões P2P. Através do PeerJS, os usuários podem realizar chat de vídeo, compartilhamento de arquivos e outras funções diretamente no navegador, sem recorrer a um servidor de terceiros.

1.1.1 Funções principais
  • Transferência direta de dados ponto a ponto
  • Suporta transmissão direta de fluxos de áudio e vídeo
  • Fornece API simples e fácil de usar
1.1.2 Cenários de uso

PeerJS é adequado para cenários que exigem comunicação ponto a ponto no navegador, como plataformas educacionais online, ferramentas de colaboração em tempo real, aplicativos de videoconferência, etc.

1.2 Instalação e configuração

1.2.1 Guia de instalação

Você pode instalar o PeerJS via npm:

npm install peerjs
  • 1
1.2.2 Configuração básica

Antes de usar PeerJS, você precisa inserir o arquivo JavaScript correspondente na página:

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

1.3 Visão geral da API

1.3.1 Criar objeto peer

Primeiro, precisamos criar um objeto Peer para representar o cliente atual.

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

No código acima,your-api-key Ela deve ser substituída pela chave API que você solicitou no site oficial do PeerJS.Se você não tiver uma chave de API, acesseSite oficial do PeerJSAplicar.

1.3.2 Estabelecendo uma conexão

Depois que o objeto Peer for criado com sucesso, podemos tentar estabelecer conexões com outros clientes. Aqui está um exemplo simples que mostra como estabelecer uma conexão ponto a ponto 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

No exemplo acima, primeiro inicializamos um objeto Peer e geramos o ID correspondente após abrir a conexão. Tentamos então estabelecer uma conexão com outro peer e enviamos uma mensagem após a conexão ser estabelecida.

O texto acima é uma breve introdução e uso básico da biblioteca PeerJS.Para obter documentação e exemplos de API mais detalhados, consulteDocumentação oficial

2. WebTorrent: um repositório de torrent WebRTC para uso no navegador

WebTorrent é uma biblioteca cliente P2P BitTorrent moderna que pode ser usada no navegador e no Node.js. Ele utiliza o canal de dados WebRTC para obter transmissão eficiente de streaming de mídia.

2.1 Introdução

2.1.1 Funções principais

WebTorrent fornece uma função de compartilhamento de arquivos ponto a ponto (P2P) baseada em WebRTC, que pode baixar e compartilhar arquivos torrent diretamente no navegador e também suporta execução no ambiente Node.js.

2.1.2 Cenários de uso

O WebTorrent pode ser usado para criar aplicativos de transmissão de mídia de streaming multiplataforma para vídeo, áudio e outros dados multimídia em tempo real, e também pode ser usado em educação on-line, conferência remota e outros campos.

2.2 Instalação e configuração

2.2.1 Guia de Instalação

A utilização do WebTorrent em um navegador não requer a instalação de nenhum software, apenas a introdução da biblioteca JavaScript correspondente. Usado em Node.js, pode ser instalado através do npm:

npm install webtorrent
  • 1
2.2.2 Configuração básica

No ambiente do navegador, você pode introduzir diretamente arquivos JavaScript relacionados ao WebTorrent:

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

Em um ambiente Node.js, o WebTorrent pode ser introduzido usando:

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

2.3 Visão geral da API

2.3.1 Criar sementes

WebTorrent fornece uma API para criação de torrents, que pode converter arquivos locais ou links em arquivos torrent. O código de exemplo é o seguinte:

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

Para obter mais informações sobre a criação de sementes, consulte Documentação oficial do WebTorrent

2.3.2 Conectando pares

Os usuários podem se conectar a outros nós, compartilhar e baixar arquivos através do WebTorrent. O código de exemplo é o seguinte:

// 加入种子
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

Para obter mais informações sobre como conectar pares, consulte Documentação oficial do WebTorrent

Expansão: O WebTorrent também fornece muitas outras APIs e funções úteis, como streaming, gerenciamento de filas de download, etc., que os desenvolvedores podem realizar pesquisas aprofundadas e usar de acordo com necessidades específicas.

3. Simple-Peer: uma biblioteca WebRTC mais simples

3.1 Introdução

Simple-Peer é uma biblioteca JavaScript para WebRTC que fornece uma interface mais simples para implementar transmissão de dados ponto a ponto e comunicação de streaming.

3.1.1 Funções principais

Simple-Peer fornece principalmente as seguintes funções principais:

  • Estabeleça uma conexão ponto a ponto no navegador
  • Realize a transmissão de fluxos de áudio e vídeo
  • Fornece canais de dados para transmissão de dados em tempo real
3.1.2 Cenários de uso

Simple-Peer pode ser usado para criar aplicativos de mensagens instantâneas baseados em navegador, sistemas de videoconferência, compartilhamento de arquivos e outros cenários que exigem comunicação ponto a ponto.

3.2 Instalação e configuração

3.2.1 Método de instalação

Você pode instalar o Simple-Peer via npm:

npm install simple-peer
  • 1

Ou use o CDN para importá-lo diretamente no arquivo HTML:

<script src="https://cdn.jsdelivr.net/npm/simple-peer@latest"></script>
  • 1
3.2.2 Configurações básicas

Antes de usar o Simple-Peer, você precisa garantir que seu aplicativo suporta WebRTC e que o usuário autorizou o uso da câmera e do microfone.

3.3 Visão geral da API

3.3.1 Criar objeto SimplePeer

Você pode criar um objeto SimplePeer usando o seguinte código:

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

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

Para obter mais informações sobre a criação de objetos SimplePeer, consulte Documentação oficial

3.3.2 Enviar dados

Depois que a conexão for estabelecida com sucesso, você poderá enviar dados através do canal do objeto SimplePeer. Aqui está um exemplo simples:

// 监听连接建立事件
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

No exemplo acima, passamos send O método envia um pedaço de dados de string e escutadata evento para receber dados.

O exemplo acima é um exemplo simples de Simple-Peer. Para opções mais detalhadas de uso e configuração da API, consulte. Documentação oficial

4. Socket.IO: biblioteca JavaScript para comunicação bidirecional em tempo real

Socket.IO é uma biblioteca JavaScript que fornece recursos de comunicação bidirecional em tempo real e pode ser usada para construir aplicativos da Web em tempo real. É baseado no protocolo WebSocket tradicional e também suporta polling e outros mecanismos de comunicação em tempo real, tornando-o mais compatível.

4.1 Introdução

4.1.1 Funções principais

Os principais recursos do Socket.IO incluem:

  • Comunicação bidirecional em tempo real
  • Gerenciamento automático de conexão
  • Suporte a vários mecanismos de comunicação em tempo real
  • arquitetura orientada a eventos
4.1.2 Cenários de uso

Socket.IO pode ser aplicado em cenários que exigem atualização de dados em tempo real, como jogos online, mensagens instantâneas, edição colaborativa em tempo real, etc.

4.2 Instalação e configuração

4.2.1 Instruções de instalação

Instale via npm:

npm install socket.io
  • 1
4.2.2 Configuração básica

No lado do servidor, use o seguinte código para inicializar o Socket.IO:

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

No lado do cliente, introduza a biblioteca cliente Socket.IO:

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

4.3 Visão geral da API

4.3.1 Estabelecer conexão de soquete

No lado cliente, estabeleça uma conexão Socket com o servidor através do seguinte código:

const socket = io();
  • 1
4.3.2 Processamento de eventos em tempo real

Socket.IO oferece suporte ao acionamento e monitoramento de eventos personalizados.A seguir está um exemplo simples, quando o lado do servidor acionachat message Quando ocorre um evento, o cliente realiza as operações correspondentes:
Terminal de serviço:

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

Cliente:

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

Para obter informações mais detalhadas sobre API e exemplos de uso, consulte Documentação oficial do Socket.IO

5. Libp2p: Pilha de protocolo de rede modular para construção de aplicativos de rede descentralizados

5.1 Introdução

Libp2p é uma pilha de protocolos de rede modular para a construção de aplicativos de rede descentralizados. Ele fornece uma série de módulos e ferramentas que permitem aos desenvolvedores construir facilmente aplicativos de rede ponto a ponto (P2P).

5.1.1 Funções principais
  • Vários protocolos de transmissão suportados
  • roteamento e descoberta
  • transmissão segura
  • Escalabilidade
5.1.2 Cenários de aplicação
  • Blockchain
  • Armazenamento de arquivos distribuído
  • Aplicativos descentralizados

5.2 Instalação e configuração

5.2.1 Instruções de instalação

Instale Libp2p via npm:

npm install libp2p
  • 1
5.2.2 Configuração básica
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 Visão geral da API

5.3.1 Criação e gerenciamento de nós

usarLibp2p.create()método cria o nó e então chamastart() Método para iniciar o nó. Aqui está o código de exemplo JavaScript completo:

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

Documentação oficial:Libp2p - Criar um nó

5.3.2 Transmissão e roteamento de dados

Libp2p fornece uma API rica para lidar com transmissão e roteamento de dados, como usar protocolos de transmissão para transmissão de dados, implementar estratégias de roteamento personalizadas, etc. Aqui está um exemplo simples de transferência de dados:

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

Documentação oficial:Libp2p - Transmissão e Roteamento de Dados

Por meio da introdução, instalação e configuração acima e da visão geral da API do Libp2p, espero que possa ajudá-lo a entender e começar a usar a biblioteca Libp2p mais rapidamente.

6. SwarmJS: biblioteca JavaScript baseada no protocolo de rede Swarm para armazenamento e comunicação distribuídos

6.1 Introdução

SwarmJS é uma biblioteca JavaScript baseada no protocolo de rede Swarm, projetada para fornecer armazenamento distribuído e recursos de comunicação. Ele permite que os desenvolvedores troquem e armazenem dados em uma rede P2P, permitindo um gerenciamento de dados altamente seguro e descentralizado.

6.1.1 Funções principais

Os principais recursos do SwarmJS incluem:

  • Armazenamento distribuído: Através do protocolo de rede Swarm, o armazenamento distribuído de dados é realizado para garantir alta confiabilidade e durabilidade dos dados.
  • Comunicação P2P: Suporta comunicação baseada em redes P2P, permitindo que aplicativos transfiram mensagens diretamente e troquem dados entre nós.
6.1.2 Cenários de uso

SwarmJS pode ser usado em cenários como aplicativos descentralizados (DApps), carteiras de criptomoedas, armazenamento distribuído de arquivos, etc., para obter armazenamento seguro e comunicação eficiente de dados.

6.2 Instalação e configuração

6.2.1 Método de instalação

O SwarmJS pode ser instalado através da ferramenta de gerenciamento de pacotes npm:

npm install swarm-js
  • 1
6.2.2 Configurações básicas

Após a conclusão da instalação, a biblioteca SwarmJS pode ser introduzida das seguintes maneiras:

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

6.3 Visão geral da API

6.3.1 Junte-se à rede Swarm

Entrar na rede Swarm usando SwarmJS é muito simples e pode ser feito com apenas algumas linhas de código:

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

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

A documentação detalhada da API pode ser encontrada emDocumentação oficial do SwarmJSVer em .

6.3.2 Armazenamento e recuperação de dados

SwarmJS fornece funções simples e poderosas de armazenamento e recuperação de dados.

// 存储数据
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

Para obter mais detalhes da API sobre armazenamento e recuperação de dados, consulteDocumentação oficial do SwarmJS

Através do SwarmJS, podemos implementar facilmente armazenamento distribuído e comunicação baseada no protocolo de rede Swarm, trazendo novas possibilidades para o desenvolvimento de aplicações.

Resumir

Este artigo apresenta uma série de bibliotecas JavaScript importantes que desempenham um papel importante no desenvolvimento de aplicativos da web modernos. Seja construindo uma plataforma de comunicação em tempo real, implementando o gerenciamento de sementes WebRTC ou desenvolvendo aplicativos de rede descentralizados, essas bibliotecas fornecem funções ricas e APIs flexíveis, fornecendo aos desenvolvedores ferramentas poderosas. Ao ter uma compreensão profunda das principais funções, cenários de uso e visão geral da API dessas bibliotecas, os desenvolvedores podem escolher melhor as ferramentas certas e acelerar o processo de desenvolvimento de aplicativos.