Teknologian jakaminen

[JavaScript Script Universe] Reaaliaikainen viestintä ja hajautetut verkot: yksityiskohtainen esittely JavaScript-kirjastoista

2024-07-12

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

Vertaisyhteydet, WebRTC-siemenhallinta, reaaliaikainen viestintä: tutustu kuuteen JavaScript-kirjastoon

Esipuhe

Koska nykyaikaiset verkkosovellukset vaativat yhä enemmän reaaliaikaista viestintää ja hajauttamista, JavaScript-kirjastot ovat avainasemassa vertaisyhteyksien, reaaliaikaisen tiedonsiirron ja hajautettujen verkkojen rakentamisessa. Tässä artikkelissa esitellään useita suosittuja JavaScript-kirjastoja, mukaan lukien PeerJS, WebTorrent, Simple-Peer, Socket.IO, Libp2p ja SwarmJS, joista jokainen tarjoaa erilaisia ​​toimintoja ja ominaisuuksia erilaisiin kehitystarpeisiin.

Tervetuloa tilaamaan kolumni:JavaScript Script Universe

Artikkelihakemisto

1. PeerJS: Yksinkertainen peer-to-peer-yhteyskirjasto

1.1 Johdanto

PeerJS on JavaScript-kirjasto vertaisyhteyksien muodostamiseen, mikä helpottaa suoraa kommunikointia selainten välillä. Tämä kirjasto tarjoaa yksinkertaisen ja helppokäyttöisen API:n, jonka avulla kehittäjät voivat rakentaa nopeasti P2P-yhteyksiin perustuvia sovelluksia. PeerJS:n kautta käyttäjät voivat suorittaa videokeskustelun, tiedostojen jakamisen ja muita toimintoja suoraan selaimessa turvautumatta kolmannen osapuolen palvelimeen.

1.1.1 Perustoiminnot
  • Suora pisteestä pisteeseen tiedonsiirto
  • Tukee suoraa äänen ja videon siirtoa
  • Tarjoa yksinkertainen ja helppokäyttöinen API
1.1.2 Käyttöskenaariot

PeerJS sopii skenaarioihin, jotka edellyttävät point-to-point -kommunikaatiota selaimessa, kuten verkkokoulutusalustoille, reaaliaikaisille yhteistyötyökaluille, videoneuvottelusovelluksille jne.

1.2 Asennus ja konfigurointi

1.2.1 Asennusopas

Voit asentaa PeerJS:n npm:n kautta:

npm install peerjs
  • 1
1.2.2 Peruskokoonpano

Ennen kuin käytät PeerJS:ää, sinun on lisättävä sivulle vastaava JavaScript-tiedosto:

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

1.3 API yleiskatsaus

1.3.1 Luo vertaisobjekti

Ensin meidän on luotava vertaisobjekti edustamaan nykyistä asiakasta.

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

Yllä olevassa koodissayour-api-key Se tulisi korvata API-avaimella, jota hait PeerJS:n virallisella verkkosivustolla.Jos sinulla ei ole API-avainta, voit siirtyä osoitteeseenPeerJS:n virallinen verkkosivustoKäytä.

1.3.2 Yhteyden muodostaminen

Kun Peer-objekti on luotu onnistuneesti, voimme yrittää muodostaa yhteyksiä muihin asiakkaisiin. Tässä on yksinkertainen esimerkki, joka näyttää, kuinka vertaisyhteys muodostetaan PeerJS:n kautta:

// 初始化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

Yllä olevassa esimerkissä alustimme ensin vertaisobjektin ja lähetimme vastaavan tunnuksen, kun se avasi yhteyden. Yritimme sitten muodostaa yhteyden toiseen kumppaniin ja lähetimme viestin yhteyden muodostumisen jälkeen.

Yllä oleva on lyhyt esittely ja PeerJS-kirjaston peruskäyttö.Katso tarkemmat API-dokumentaatiot ja esimerkit osoitteestaVirallinen dokumentaatio

2. WebTorrent: WebRTC-torrent-varasto käytettäväksi selaimessa

WebTorrent on moderni P2P BitTorrent -asiakaskirjasto, jota voidaan käyttää selaimessa ja Node.js:ssä. Se hyödyntää WebRTC-datakanavaa tehokkaan suoratoistomedian siirron saavuttamiseksi.

2.1 Johdanto

2.1.1 Perustoiminnot

WebTorrent tarjoaa WebRTC:hen perustuvan P2P-tiedostonjakotoiminnon, joka voi ladata ja jakaa torrent-tiedostoja suoraan selaimessa ja tukee myös Node.js-ympäristössä käyttöä.

2.1.2 Käyttöskenaariot

WebTorrentin avulla voidaan luoda monialustaisia ​​suoratoistomedian siirtosovelluksia reaaliaikaiselle video-, audio- ja muulle multimediadatalle, ja sitä voidaan käyttää myös verkkokoulutuksessa, etäneuvotteluissa ja muilla aloilla.

2.2 Asennus ja konfigurointi

2.2.1 Asennusopas

WebTorrentin käyttäminen selaimessa ei vaadi minkään ohjelmiston asennusta, vain vastaavan JavaScript-kirjaston käyttöönottoa. Käytetään Node.js:ssä, voidaan asentaa npm:n kautta:

npm install webtorrent
  • 1
2.2.2 Peruskokoonpano

Selainympäristössä voit esitellä suoraan WebTorrentiin liittyviä JavaScript-tiedostoja:

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

Node.js-ympäristössä WebTorrent voidaan ottaa käyttöön käyttämällä:

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

2.3 API yleiskatsaus

2.3.1 Luo siemeniä

WebTorrent tarjoaa API:n torrentien luomiseen, joka voi muuntaa paikallisia tiedostoja tai linkkejä torrent-tiedostoiksi. Esimerkkikoodi on seuraava:

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

Lisätietoja siementen luomisesta on osoitteessa WebTorrent virallinen dokumentaatio

2.3.2 Vertaisliitännät

Käyttäjät voivat muodostaa yhteyden muihin solmuihin, jakaa ja ladata tiedostoja WebTorrentin kautta. Esimerkkikoodi on seuraava:

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

Lisätietoja Peersin yhdistämisestä on osoitteessa WebTorrent virallinen dokumentaatio

Laajennus: WebTorrent tarjoaa myös monia muita hyödyllisiä API-liittymiä ja toimintoja, kuten suoratoiston, latausjonojen hallinnan jne., joita kehittäjät voivat tehdä perusteellisen tutkimuksen ja käyttää niitä erityistarpeiden mukaan.

3. Simple-Peer: Yksinkertaisempi WebRTC-kirjasto

3.1 Johdanto

Simple-Peer on WebRTC:n JavaScript-kirjasto, joka tarjoaa yksinkertaisemman käyttöliittymän pisteestä pisteeseen tiedonsiirron ja suoratoistoviestinnän toteuttamiseen.

3.1.1 Perustoiminnot

Simple-Peer tarjoaa pääasiassa seuraavat ydintoiminnot:

  • Muodosta vertaisyhteys selaimessa
  • Toteuta ääni- ja videovirtojen siirto
  • Tarjoaa datakanavia reaaliaikaista tiedonsiirtoa varten
3.1.2 Käyttöskenaariot

Simple-Peerillä voidaan rakentaa selainpohjaisia ​​pikaviestisovelluksia, videoneuvottelujärjestelmiä, tiedostojen jakamista ja muita skenaarioita, jotka vaativat pisteestä pisteeseen -viestintää.

3.2 Asennus ja konfigurointi

3.2.1 Asennustapa

Voit asentaa Simple-Peerin npm:n kautta:

npm install simple-peer
  • 1

Tai tuo se suoraan HTML-tiedostoon CDN:n avulla:

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

Ennen kuin käytät Simple-Peeria, sinun on varmistettava, että sovelluksesi tukee WebRTC:tä ja että käyttäjä on valtuuttanut kameran ja mikrofonin käytön.

3.3 API yleiskatsaus

3.3.1 Luo SimplePeer-objekti

Voit luoda SimplePeer-objektin käyttämällä seuraavaa koodia:

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

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

Lisätietoja SimplePeer-objektien luomisesta on kohdassa Virallinen dokumentaatio

3.3.2 Lähetä tiedot

Kun yhteys on muodostettu onnistuneesti, voit lähettää tietoja SimplePeer-objektin kanavan kautta. Tässä on yksinkertainen esimerkki:

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

Yllä olevassa esimerkissä ohitamme send Menetelmä lähettää osan merkkijonodataa ja kuuntelee sen läpidata tapahtuma tietojen vastaanottamiseksi.

Yllä oleva on yksinkertainen esimerkki Simple-Peeristä. Katso tarkemmat API-käyttö- ja konfigurointivaihtoehdot Virallinen dokumentaatio

4. Socket.IO: JavaScript-kirjasto reaaliaikaista kaksisuuntaista viestintää varten

Socket.IO on JavaScript-kirjasto, joka tarjoaa reaaliaikaisia, kaksisuuntaisia ​​viestintäominaisuuksia ja jota voidaan käyttää reaaliaikaisten verkkosovellusten rakentamiseen. Se perustuu perinteiseen WebSocket-protokollaan ja tukee myös kyselyitä ja muita reaaliaikaisia ​​viestintämekanismeja, mikä tekee siitä yhteensopivamman.

4.1 Johdanto

4.1.1 Perustoiminnot

Socket.IO:n ydinominaisuuksiin kuuluvat:

  • Reaaliaikainen kaksisuuntainen viestintä
  • Automaattinen yhteydenhallinta
  • Useiden reaaliaikaisten viestintämekanismien tuki
  • tapahtumalähtöinen arkkitehtuuri
4.1.2 Käyttöskenaariot

Socket.IO:ta voidaan soveltaa skenaarioissa, jotka vaativat reaaliaikaista tietojen päivittämistä, kuten verkkopeleissä, pikaviestinnässä, reaaliaikaisessa yhteismuokkauksessa jne.

4.2 Asennus ja konfigurointi

4.2.1 Asennusohjeet

Asenna npm:n kautta:

npm install socket.io
  • 1
4.2.2 Peruskokoonpano

Käytä palvelinpuolella seuraavaa koodia Socket.IO:n alustamiseen:

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

Esittele asiakaspuolella Socket.IO-asiakaskirjasto:

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

4.3 API yleiskatsaus

4.3.1 Muodosta Socket-liitäntä

Muodosta asiakaspuolella Socket-yhteys palvelimeen seuraavan koodin avulla:

const socket = io();
  • 1
4.3.2 Reaaliaikainen tapahtumien käsittely

Socket.IO tukee mukautettujen tapahtumien laukaisua ja seurantaa.Seuraava on yksinkertainen esimerkki, kun palvelinpuoli laukeaachat message Kun tapahtuma tapahtuu, asiakas suorittaa vastaavat toiminnot:
Palvelupääte:

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

Asiakas:

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

Katso tarkemmat API-tiedot ja käyttöesimerkit Socket.IO:n virallinen dokumentaatio

5. Libp2p: Modulaarinen verkkoprotokollapino hajautettujen verkkosovellusten rakentamiseen

5.1 Johdanto

Libp2p on modulaarinen verkkoprotokollapino hajautettujen verkkosovellusten rakentamiseen. Se tarjoaa joukon moduuleja ja työkaluja, joiden avulla kehittäjät voivat helposti rakentaa vertaisverkkosovelluksia (P2P).

5.1.1 Perustoiminnot
  • Useita lähetysprotokollia tuetaan
  • reititys ja löytäminen
  • turvallinen lähetys
  • Skaalautuvuus
5.1.2 Sovellusskenaariot
  • Blockchain
  • Hajautettu tiedostotallennus
  • Hajautetut sovellukset

5.2 Asennus ja konfigurointi

5.2.1 Asennusohjeet

Asenna Libp2p npm:n kautta:

npm install libp2p
  • 1
5.2.2 Peruskokoonpano
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 yleiskatsaus

5.3.1 Solmun luominen ja hallinta

käyttääLibp2p.create()menetelmä luo solmun ja kutsuu sittenstart() Menetelmä solmun käynnistämiseksi. Tässä on täydellinen JavaScript-esimerkkikoodi:

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

Virallinen dokumentaatio:Libp2p - Luo solmu

5.3.2 Tiedonsiirto ja reititys

Libp2p tarjoaa monipuolisen sovellusliittymän tiedonsiirron ja reitityksen käsittelemiseen, kuten siirtoprotokollien käyttämiseen tiedonsiirrossa, mukautettujen reititysstrategioiden toteuttamiseen jne. Tässä on yksinkertainen esimerkki tiedonsiirrosta:

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

Virallinen dokumentaatio:Libp2p - Tiedonsiirto ja reititys

Yllä olevan Libp2p:n esittelyn, asennuksen ja määrityksen sekä API-katsauksen avulla toivon, että se auttaa sinua ymmärtämään Libp2p-kirjastoa ja pääsemään sen käyttöön nopeammin.

6. SwarmJS: Swarm-verkkoprotokollaan perustuva JavaScript-kirjasto hajautettua tallennusta ja viestintää varten

6.1 Johdanto

SwarmJS on Swarm-verkkoprotokollaan perustuva JavaScript-kirjasto, joka on suunniteltu tarjoamaan hajautettuja tallennus- ja viestintäominaisuuksia. Sen avulla kehittäjät voivat vaihtaa ja tallentaa tietoja P2P-verkon kautta, mikä mahdollistaa erittäin turvallisen ja hajautetun tiedonhallinnan.

6.1.1 Perustoiminnot

SwarmJS:n ydinominaisuuksiin kuuluvat:

  • Hajautettu tallennus: Swarm-verkkoprotokollan avulla toteutetaan tietojen hajautettu tallennus varmistaakseen tietojen korkean luotettavuuden ja kestävyyden.
  • P2P-viestintä: Tukee P2P-verkkoihin perustuvaa viestintää, jolloin sovellukset voivat siirtää viestejä suoraan ja vaihtaa tietoja solmujen välillä.
6.1.2 Käyttöskenaariot

SwarmJS:ää voidaan käyttää sellaisissa skenaarioissa kuin hajautetut sovellukset (DApps), kryptovaluuttalompakot, hajautettu tiedostojen tallennus jne., jotta saavutetaan turvallinen tallennus ja tehokas tiedonsiirto.

6.2 Asennus ja konfigurointi

6.2.1 Asennustapa

SwarmJS voidaan asentaa npm-paketinhallintatyökalun kautta:

npm install swarm-js
  • 1
6.2.2 Perusasetukset

Kun asennus on valmis, SwarmJS-kirjasto voidaan ottaa käyttöön seuraavilla tavoilla:

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

6.3 API yleiskatsaus

6.3.1 Liity Swarm-verkostoon

Swarm-verkkoon liittyminen SwarmJS:n avulla on hyvin yksinkertaista ja se voidaan tehdä vain muutamalla koodirivillä:

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

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

Yksityiskohtainen API-dokumentaatio löytyy osoitteestaSwarmJS:n virallinen dokumentaatioNäytä sisään .

6.3.2 Tietojen tallennus ja haku

SwarmJS tarjoaa yksinkertaisia ​​ja tehokkaita tietojen tallennus- ja hakutoimintoja. Seuraava on yksinkertainen esimerkki:

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

Lisätietoja sovellusliittymän tietojen tallentamisesta ja hakemisesta on osoitteessaSwarmJS:n virallinen dokumentaatio

SwarmJS:n avulla voimme helposti toteuttaa Swarm-verkkoprotokollaan perustuvan hajautetun tallennustilan ja tiedonsiirron, mikä tuo uusia mahdollisuuksia sovelluskehitykseen.

Tee yhteenveto

Tämä artikkeli esittelee sarjan tärkeitä JavaScript-kirjastoja, joilla on tärkeä rooli nykyaikaisessa verkkosovelluskehityksessä. Olipa kyseessä reaaliaikaisen viestintäalustan rakentaminen, WebRTC-siemenhallinnan käyttöönotto tai hajautettujen verkkosovellusten kehittäminen, nämä kirjastot tarjoavat monipuolisia toimintoja ja joustavia API-liittymiä, jotka tarjoavat kehittäjille tehokkaita työkaluja. Kun kehittäjät tuntevat perusteellisesti näiden kirjastojen ydintoiminnot, käyttöskenaariot ja API-katsauksen, kehittäjät voivat valita oikeat työkalut ja nopeuttaa sovellusten kehitysprosessia.