npm 包 wormhole.js 使用教程

概述

wormhole.js 是一款轻量级的 JavaScript 库，它可以帮助你在两个不同的 Web 页面之间传输数据。它建立在浏览器 API postMessage() 基础上，并且可以跨域传递数据，非常适用于前后端分离的 Web 应用中。

在本文中，我们将介绍 wormhole.js 的基本用法，并且通过实例讲解如何在不同的 Web 页面之间实现数据传输。

安装

wormhole.js 可以通过 npm 下载安装：

npm install wormhole.js

引入

在需要使用 wormhole.js 的页面中引入：

const Wormhole = require('wormhole.js');

或者

import Wormhole from 'wormhole.js';

使用

开启通信

在页面 A 中开启通信：

const communicator = new Wormhole({
    name: 'PageA', // 设置名称
    target: 'http://localhost:8081' // 设置目标域名
});

communicator.open();

在页面 B 中开启通信：

const communicator = new Wormhole({
    name: 'PageB', // 设置名称
    target: 'http://localhost:8080' // 设置目标域名
});

communicator.open();

发送消息

在页面 A 中发送消息：

communicator.send('Hello, PageB!');

在页面 B 中接收消息：

const communicator = new Wormhole({
    name: 'PageB',
    target: 'http://localhost:8080'
});

communicator.listen((evt) => {
    console.log(evt.data); // Hello, PageB!
});

添加监听器

在页面 B 中添加监听器：

const communicator = new Wormhole({
    name: 'PageB',
    target: 'http://localhost:8080'
});

communicator.on('message', (data) => {
    console.log(data); // Hello, PageA!
});

在页面 A 中发送消息，并添加监听器：

communicator.send('Hello, PageB!');
communicator.on('message', (data) => {
    console.log(data); // Hello, PageB!
});

总结

通过学习本教程，我们了解了 wormhole.js 的基本使用方法，并通过实例讲解了如何在不同的 Web 页面之间实现数据传输，希望对你有所帮助！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671138dd3466f61ffe503