next-post-message

🌳 Tiny & elegant & better windows post message,simple bnd powerful.

Install the package

pnpm install next-post-message

Basic Usage

Sender Window (windowA)

Sending messages has never been easier:

import { Npm } from 'next-post-message'

const tgtWin = document.getElementById('iframeB').contentWindow
const npm = new Npm({ channel: '/chat' })

const { answer } = npm.post('Hello!', tgtWin)

answer
  .then(res => console.log('Received：', res))
  .catch(err => console.error('Error：', err))

Receiver Window (windowB)

In the receiver window, set up a handler to receive messages and send responses:

import { Npm } from 'next-post-message'

const npm = new Npm({ channel: '/chat' })

npm.onReceive(async (msg) => {
  console.log('Received :', msg)
  return 'Hello back'
})

Advanced Usage

🚀 PostMan

Let's be honest, specifying the target window every time you send a message can get tedious.

That's where the PostMan class comes in. It helps manage message sending with custom options and a pre-specified target window.

Sender Window (windowA)

import { Npm } from 'next-post-message'

const tgtWin = document.getElementById('iframeB').contentWindow
const npm = new Npm({ channel: '/detail/blog' })

const postMan = npm.createPostMan(tgtWin, {
  maxWaitTime: 20000,
  enableDebug: true
})

const { answer: answer1 } = postMan.post('Hello through PostMan')
const { answer: answer2 } = postMan.post('Hello again through PostMan')

Receiver Window (windowB)

import { Npm } from 'next-post-message'

const npm = new Npm({ channel: '/detail/blog', enableDebug: true })

npm.onReceive(async (msg) => {
  console.log('Received in:', message)
  return 'Hello back'
})

🚀 GetMan

Using Multiple GetMan Instances for Listening Different Channels

Receiver Window (windowB)

import { Npm } from 'next-post-message'

const npm = new Npm({ enableDebug: true })

const getMan = npm.createGetMan({ channel: '/chat' })
getMan.onReceive(msg => console.log('Chat:', msg))

const getMan2 = npm.createGetMan({ channel: '/update' })
getMan2.onReceive(msg => console.log('Update:', msg))

Hope these examples help you get started quickly and make the most of NextPostMessage!

leizhenpeng / next-post-message Goto Github PK