npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

electron-sender

v1.0.5

Published

A simple ElectronJS tool to send and receive messages between processes.

Downloads

8

Readme

electron-sender

A simple tool that lets you interact between processes in an ElectronJS app.

Quickstart

To install:

> npm i electron-sender

or

> npm install electron-sender

For developement environments, please use the --save-dev flag when installing.

To use:

main.js
const { app, BrowserWindow } = require("electron");
const Sender = require("electron-sender");

app.on("ready", () => {
  const mainWindow = new BrowserWindow({ ... });
  mainWindow.webContents.loadFile(__dirname + "/index.html");
  Sender.append(mainWindow);
  Sender.receive(mainWindow, "test_function", (param1, param2) => {
    console.log("Received param1: " + param1 + "\nReceived param2: " + param2);
  });
});
index.html
<!DOCTYPE html>
<html>
  <body>
    <script>
      Sender.send("test_function", ["string1", "string2"]);
    </script>
  </body>
</html>

And the output:

> Launch app
  > Window opens
  > Console message
    > Received param1: String  "string1"
    > Received param2: String  "string2"

Documentation

Definitions

Sender.receive - function receive(process: Electron.BrowserWindow)

Sender.send (main process) - function send(name: String, params: Array)

Sender.send (renderer process) - function send(name: String, params: Array)

Sender.append - function append(process: Electron.BrowserWindow)

What they do

Sender.receive() - defines a function to run

Sender.send() - runs a defined function (used in renderer and main processes)

Sender.append() - appends the tools to the selected process

How it works

Messages between processes are very simple.

Messages from main.js to index.html occur when a default function built-in called WebContent.executeJavascript executes a function defined in the renderer process (index.html).

Example:

# main.js
mainWindow.webContents.executeJavascript(`Sender.functions["test_function"]("string1", "string2")`);

// Is the same as

Sender.send("test_function", ["string1", "string2"]);
# index.html
<script>
Sender.functions["test_function"] = (param1, param2) => {
  console.log(param1, param2);
};

// Is the same as

Sender.receive("test_function", (param1, param2) => {
  console.log(param1, param2);
});
</script>

This process works the same way, send to receive in the main process, send to receive in the renderer process, Vice-Versa.

What certain functions do

Appending a process using Sender.append

This function prepares a certain ElectronJS process (window) for this package.

Basically it just gives the window the tools you need to interact between processes.

Sending messages or functions using Sender.send

This function works with both main and renderer processes, as well as Sender.receive.

This will listen for the specified message and run the defined function by Sender.receive.

Receiving messages using Sender.receive

Like mentioned, both send and receive functions are necessary for interaction.

This function is very important because you need a function to run using Sender.send, so without this, the package is useless.

Errors

Uncaught Error: Process "" is undefined

    This error occurs when using Sender.send could not find the function name defined by Sender.receive

License

MIT