技術共有

[JavaScript Script Universe] リアルタイム通信と分散ネットワーク: JavaScript ライブラリの詳細な紹介

2024-07-12

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

ピアツーピア接続、WebRTC シード管理、リアルタイム通信: 6 つの JavaScript ライブラリを探索する

序文

最新の Web アプリケーションではリアルタイム通信と分散化の必要性がますます高まっているため、JavaScript ライブラリはピアツーピア接続、リアルタイム データ転送、分散ネットワークの構築において重要な役割を果たしています。この記事では、PeerJS、WebTorrent、Simple-Peer、Socket.IO、Libp2p、SwarmJS など、いくつかの人気のある JavaScript ライブラリを紹介します。各ライブラリは、さまざまな開発ニーズを満たすためにさまざまな機能を提供します。

コラムの購読を歓迎します:JavaScript スクリプトの世界

記事ディレクトリ

1. PeerJS: シンプルなピアツーピア接続ライブラリ

1.1 はじめに

PeerJS は、ピアツーピア接続を確立するための JavaScript ライブラリであり、ブラウザ間の直接通信を簡単にします。このライブラリはシンプルで使いやすい API を提供し、開発者が P2P 接続に基づいたアプリケーションを迅速に構築できるようにします。 PeerJS を通じて、ユーザーはサードパーティのサーバーに頼ることなく、ビデオ チャット、ファイル共有、その他の機能をブラウザーで直接実行できます。

1.1.1 コア機能
  • 直接ポイントツーポイントデータ転送
  • オーディオおよびビデオストリームの直接送信をサポート
  • シンプルで使いやすいAPIを提供
1.1.2 使用シナリオ

PeerJS は、オンライン教育プラットフォーム、リアルタイム コラボレーション ツール、ビデオ会議アプリケーションなど、ブラウザーでのポイントツーポイント通信を必要とするシナリオに適しています。

1.2 インストールと構成

1.2.1 インストールガイド

npm 経由で PeerJS をインストールできます。

npm install peerjs
  • 1
1.2.2 基本構成

PeerJS を使用する前に、対応する JavaScript ファイルをページに導入する必要があります。

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

1.3 APIの概要

1.3.1 ピアオブジェクトの作成

まず、現在のクライアントを表す Peer オブジェクトを作成する必要があります。

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

上記のコードでは、your-api-key PeerJS 公式 Web サイトで申請した API キーに置き換える必要があります。API キーをお持ちでない場合は、次の場所にアクセスしてください。PeerJS公式サイト適用する。

1.3.2 接続の確立

Peer オブジェクトが正常に作成されたら、他のクライアントとの接続の確立を試みることができます。以下は、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

上の例では、最初に Peer オブジェクトを初期化し、接続を開いた後に対応する ID を出力しました。次に、別のピアとの接続を確立しようとし、接続が確立された後にメッセージを送信しました。

以上が PeerJS ライブラリの簡単な紹介と基本的な使い方です。より詳細な API ドキュメントと例については、以下を参照してください。公式ドキュメント

2. WebTorrent: ブラウザで使用する WebRTC torrent リポジトリ

WebTorrent は、ブラウザーと Node.js で使用できる最新の P2P BitTorrent クライアント ライブラリです。 WebRTC データ チャネルを利用して、効率的なストリーミング メディア送信を実現します。

2.1 はじめに

2.1.1 コア機能

WebTorrent は、WebRTC に基づいたピアツーピア (P2P) ファイル共有機能を提供します。これにより、Torrent ファイルをブラウザーで直接ダウンロードして共有でき、Node.js 環境での実行もサポートします。

2.1.2 使用シナリオ

WebTorrent を使用すると、リアルタイム ビデオ、オーディオ、その他のマルチメディア データ用のクロスプラットフォーム ストリーミング メディア送信アプリケーションを作成でき、オンライン教育、リモート会議、その他の分野でも使用できます。

2.2 インストールと構成

2.2.1 インストールガイド

ブラウザで WebTorrent を使用するには、ソフトウェアのインストールは必要ありません。対応する JavaScript ライブラリを導入するだけで済みます。 Node.js で使用され、npm を通じてインストールできます。

npm install webtorrent
  • 1
2.2.2 基本構成

ブラウザ環境では、WebTorrent 関連の JavaScript ファイルを直接導入できます。

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

Node.js 環境では、以下を使用して WebTorrent を導入できます。

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

2.3 APIの概要

2.3.1 シードの作成

WebTorrent は、ローカル ファイルまたはリンクを torrent ファイルに変換できる torrent を作成するための API を提供します。サンプル コードは次のとおりです。

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

シードの作成の詳細については、を参照してください。 WebTorrent 公式ドキュメント

2.3.2 ピアの接続

ユーザーは、WebTorrent を通じて他のノードに接続し、ファイルを共有およびダウンロードできます。サンプル コードは次のとおりです。

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

ピアの接続の詳細については、を参照してください。 WebTorrent 公式ドキュメント

拡張: WebTorrent は、ストリーミング、ダウンロード キューの管理など、他の多くの便利な API や機能も提供しており、開発者はこれらを詳細な調査を行って、特定のニーズに応じて使用できます。

3. Simple-Peer: よりシンプルな WebRTC ライブラリ

3.1 はじめに

Simple-Peer は、ポイントツーポイントのデータ送信とストリーミング通信を実装するためのよりシンプルなインターフェイスを提供する WebRTC 用の JavaScript ライブラリです。

3.1.1 コア機能

Simple-Peer は主に次のコア機能を提供します。

  • ブラウザでピアツーピア接続を確立する
  • 音声と映像のストリーム伝送を実現
  • リアルタイムデータ送信用のデータチャネルを提供します
3.1.2 使用シナリオ

Simple-Peer を使用すると、ブラウザベースのインスタント メッセージング アプリケーション、ビデオ会議システム、ファイル共有、およびポイントツーポイント通信を必要とするその他のシナリオを構築できます。

3.2 インストールと構成

3.2.1 インストール方法

Simple-Peer は npm 経由でインストールできます。

npm install simple-peer
  • 1

または、CDN を使用して HTML ファイルに直接インポートします。

<script src="https://cdn.jsdelivr.net/npm/simple-peer@latest"></script>
  • 1
3.2.2 基本設定

Simple-Peer を使用する前に、アプリケーションが WebRTC をサポートしていること、およびユーザーがカメラとマイクの使用を許可していることを確認する必要があります。

3.3 APIの概要

3.3.1 SimplePeerオブジェクトの作成

次のコードを使用して SimplePeer オブジェクトを作成できます。

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

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

SimplePeer オブジェクトの作成の詳細については、を参照してください。 公式ドキュメント

3.3.2 データの送信

接続が正常に確立されると、SimplePeer オブジェクトのチャネルを通じてデータを送信できます。簡単な例を次に示します。

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

上の例では、次のように渡します。 send このメソッドは文字列データの一部を送信し、それをリッスンします。data データを受信するイベント。

上記は Simple-Peer の簡単な例です。詳細な API の使用法と設定オプションについては、を参照してください。 公式ドキュメント

4. Socket.IO: リアルタイム双方向通信用の JavaScript ライブラリ

Socket.IO は、リアルタイムの双方向通信機能を提供する JavaScript ライブラリであり、リアルタイム Web アプリケーションの構築に使用できます。従来の WebSocket プロトコルに基づいており、ポーリングやその他のリアルタイム通信メカニズムもサポートしているため、互換性が向上しています。

4.1 はじめに

4.1.1 コア機能

Socket.IO のコア機能には次のようなものがあります。

  • リアルタイム双方向通信
  • 自動接続管理
  • 複数のリアルタイム通信メカニズムのサポート
  • イベント駆動型アーキテクチャ
4.1.2 使用シナリオ

Socket.IO は、オンライン ゲーム、インスタント メッセージング、リアルタイムの共同編集など、データのリアルタイム更新が必要なシナリオで使用できます。

4.2 インストールと構成

4.2.1 インストール手順

npm 経由でインストールします。

npm install socket.io
  • 1
4.2.2 基本構成

サーバー側では、次のコードを使用して Socket.IO を初期化します。

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

クライアント側では、Socket.IO クライアント ライブラリを導入します。

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

4.3 APIの概要

4.3.1 ソケット接続の確立

クライアント側では、次のコードを使用してサーバーとのソケット接続を確立します。

const socket = io();
  • 1
4.3.2 リアルタイムイベント処理

Socket.IO は、カスタム イベントのトリガーと監視をサポートしています。以下は、サーバー側がトリガーしたときの簡単な例です。chat message イベントが発生すると、クライアントは対応する操作を実行します。
サービスターミナル:

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

クライアント:

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

API の詳細情報と使用例については、次を参照してください。 Socket.IO 公式ドキュメント

5. Libp2p: 分散型ネットワーク アプリケーションを構築するためのモジュラー ネットワーク プロトコル スタック

5.1 はじめに

Libp2p は、分散型ネットワーク アプリケーションを構築するためのモジュール式ネットワーク プロトコル スタックで、開発者がピアツーピア (P2P) ネットワーク アプリケーションを簡単に構築できるようにする一連のモジュールとツールを提供します。

5.1.1 コア機能
  • 複数の伝送プロトコルをサポート
  • ルーティングと検出
  • 安全な送信
  • スケーラビリティ
5.1.2 アプリケーションシナリオ
  • ブロックチェーン
  • 分散ファイルストレージ
  • 分散型アプリケーション

5.2 インストールと構成

5.2.1 インストール手順

npm 経由で Libp2p をインストールします。

npm install libp2p
  • 1
5.2.2 基本構成
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 APIの概要

5.3.1 ノードの作成と管理

使用Libp2p.create()メソッドはノードを作成してから呼び出しますstart()ノードを起動するメソッド。完全な JavaScript サンプル コードは次のとおりです。

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

公式ドキュメント:Libp2p - ノードを作成する

5.3.2 データの送信とルーティング

Libp2p は、データ送信に送信プロトコルを使用したり、カスタム ルーティング戦略を実装したりするなど、データ送信とルーティングを処理するための豊富な API を提供します。簡単なデータ転送の例を次に示します。

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

公式ドキュメント:Libp2p - データ転送とルーティング

上記の Libp2p の紹介、インストールと構成、API の概要を通じて、Libp2p ライブラリを理解し、より早く使い始めるのに役立つことを願っています。

6. SwarmJS: 分散ストレージと通信用の Swarm ネットワーク プロトコルに基づく JavaScript ライブラリ

6.1 はじめに

SwarmJS は、Swarm ネットワーク プロトコルに基づく JavaScript ライブラリであり、分散ストレージと通信機能を提供するように設計されています。これにより、開発者は P2P ネットワーク上でデータを交換および保存できるため、安全性の高い分散型データ管理が可能になります。

6.1.1 コア機能

SwarmJS の中核となる機能は次のとおりです。

  • 分散ストレージ: Swarm ネットワーク プロトコルを通じて、データの分散ストレージが実現され、データの高い信頼性と耐久性が確保されます。
  • P2P 通信: P2P ネットワークに基づく通信をサポートし、アプリケーションがノード間でメッセージを直接転送し、データを交換できるようにします。
6.1.2 使用シナリオ

SwarmJS は、分散型アプリケーション (DApps)、暗号通貨ウォレット、分散ファイル ストレージなどのシナリオで使用して、データの安全なストレージと効率的な通信を実現できます。

6.2 インストールと構成

6.2.1 インストール方法

SwarmJS は、npm パッケージ管理ツールを通じてインストールできます。

npm install swarm-js
  • 1
6.2.2 基本設定

インストールが完了したら、次の方法で SwarmJS ライブラリを導入できます。

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

6.3 APIの概要

6.3.1 Swarm ネットワークに参加する

SwarmJS を使用して Swarm ネットワークに参加するのは非常に簡単で、わずか数行のコードで実行できます。

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

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

詳細な API ドキュメントは次の場所にあります。SwarmJS 公式ドキュメントで表示します。

6.3.2 データの保存と取得

SwarmJS は、シンプルかつ強力なデータの保存および取得機能を提供します。以下に簡単な例を示します。

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

データの保存と取得に関する API の詳細については、以下を参照してください。SwarmJS 公式ドキュメント

SwarmJS を通じて、Swarm ネットワーク プロトコルに基づいた分散ストレージと通信を簡単に実装でき、アプリケーション開発に新たな可能性をもたらします。

要約する

この記事では、最新の Web アプリケーション開発で重要な役割を果たす一連の重要な JavaScript ライブラリを紹介します。リアルタイム通信プラットフォームの構築、WebRTC シード管理の実装、分散ネットワーク アプリケーションの開発のいずれであっても、これらのライブラリは豊富な機能と柔軟な API を提供し、開発者に強力なツールを提供します。これらのライブラリのコア機能、使用シナリオ、API の概要を深く理解することで、開発者は適切なツールをより適切に選択し、アプリケーション開発プロセスをスピードアップできます。