Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
magic-portal
Advanced tools
Readme
Pass objects with async methods between WebWorkers and the main thread easily
This is a Node.js module available through the
npm registry. It can be installed using the
npm
or
yarn
command line tools.
npm install magic-portal --save
You load the library in both the main thread and the worker (same library, there's no client/server distinction)
and then create a new MagicPortal(channel)
where channel
is either the worker or the window.
Then you call .set
and .get
on it like it's a Map
, except you have to await
the .get
.
The functions on the object HAVE to be async functions that return Promises.
index.html
<script src="https://unpkg.com/magic-portal/dist/index.umd.js"></script>
<script>
;(async () => {
let worker = new Worker("./worker.js")
const portal = new MagicPortal(worker)
portal.set('main', {
alert: async (msg) => window.alert(msg)
})
let adder = await portal.get('adder')
let result = await adder.add(2, 2)
console.log('2 + 2 =', result)
})();
</script>
worker.js
importScripts([
"https://unpkg.com/magic-portal/dist/index.umd.js"
])
;(async () => {
const portal = new MagicPortal(self)
portal.set('adder', {
add: async (a, b) => a + b
})
let main = await portal.get('main')
main.alert('hello from worker')
})();
index.html
<script type="module">
import MagicPortal from "https://unpkg.com/magic-portal/dist/index.es6.js"
;(async () => {
let worker = new Worker("./worker.js", {type: "module"})
const portal = new MagicPortal(worker)
portal.set('main', {
alert: async (msg) => window.alert(msg)
})
let adder = await portal.get('adder')
let result = await adder.add(2, 2)
console.log('2 + 2 =', result)
})();
</script>
worker.js
import MagicPortal from "https://unpkg.com/magic-portal/dist/index.es6.js"
;(async () => {
const portal = new MagicPortal(self)
portal.set('adder', {
add: async (a, b) => a + b
})
let main = await portal.get('main')
main.alert('hello from worker')
})();
If you have some methods where you don't care about the return value, you can use the void
option to tell MagicPortal you don't need to wait for the result.
This will cut the number of postMessage
calls used in half, which could be useful if you have very high throughput (like an event emitter).
portal.set('main', {
add: async (a, b) => a + b,
alert: async (msg) => window.alert(msg)
}, {
void: ['alert']
})
Under the hood it uses a very simple postMessage
remote procedure call (RPC) that looks like this:
// Announce "I am able to start receiving messages"
{
type: "MP_INIT"
}
// Announce "I have this object"
{
type: "MP_SET",
object: "adder",
methods: ["adder"]
}
// Method call (request)
{
type: "MP_CALL",
object: "adder",
method: "add",
args: [2, 2],
id: 36
}
// Return value (response)
{
type: "MP_RETURN",
id: 36,
result: 4
}
// or Error
{
type: "MP_RETURN",
id: 36,
error: "this is the error message"
}
Both sides of the MagicPortal queue their messages until they have received an MP_INIT
message to account for the slight delay in starting up WebWorker threads.
Calling .set
sends (or queues) an MP_SET
message, and when you call .get
, it returns a promise that is resolved once a corresponding MP_SET
message is received.
(Therefore you should try to make all your .set
calls before you start await
ing for .get
calls to avoid a mutual deadlock where both threads are await
ing.)
The object returned by .get
has methods that correspond to the function
properties of the original object passed to .set
.
Calling these methods sends an MP_CALL
message with the arguments, and the MagicPortal on the other side of the channel will receive the MP_CALL
message and call the original method with those arguments.
Therefore the function arguments have to be serializable by the structured clone algorithm used by postMessage
to send values.
npm install
npm test
None
MIT
FAQs
Pass objects with async methods between WebWorkers and the main thread easily
The npm package magic-portal receives a total of 110 weekly downloads. As such, magic-portal popularity was classified as not popular.
We found that magic-portal demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.