View on GitHub

PlugPlex

The modern way to extend the web

Download this project as a .zip file Download this project as a tar.gz file

Writing Plugs

Creating you own PlugPlex plugs is actually very easy. All you need is Visual Studio and knowledge of C#. Start by creating a class library project, and add a reference to PlugPlex.exe and websocket-sharp.dll. Those files can be found in the location where you installed PlugPlex (if you used the installer, it will be installed in C:\Program Files (x86)\PlugPlex). Create a new (public) class and make it extend Plug:

using PlugPlex;

public class MyPlug : Plug{
...
}

Now implement the name property within the class:

public override string name {
	get { return "MyPlug"; }
}

Don’t worry about the schemas error. We’ll deal with that later.’

Parameters in Plugs

Parameters are passed to functions in plugs with schemas. A schema is a class with public fields for each parameter. For example, for a basic Print(string) function, you would make a class called PrintSchema and add a public string field. Then you would define the Print function as taking a PrintSchema parameter. For example:

public void Print(PrintSchema args){
	Console.WriteLine(args.message);
}

...

public class PrintSchema{
	public string message;
}

If the function takes multiple parameters, put them all in the scheme, like this:

public int Add(AddSchema args){
	return args.A + args.B;
}

...

public class AddSchema{
	public int A;
	public int B;
}

Defining the Schemas

Once you have functions and the schemas they need, you must declare a Dictionary<string, Type> property to tell PlugPlex about the schemas. Each entry in the dictionary sould have a string key representing the name of a function, and a Type value representing the typeof the schema the function takes as a parameter. For example, a schema dictionary for the Print and Add functions above would look like this:

public Dictionary<string, Type> schemas {
	get {
		Dictionary<string, Type> _schemas

		_schemas.Add("Print", typeof(PrintSchema));
		_schemas.Add("Add", typeof(AddSchema));

		return _schemas;
	}
}

You must declare the schemas for every function you intend to call from javascript.

Using the Plug

To use your plug, build the project and copy the DLL into the PlugPlex Plugs folder. Go to the folder where you installed PlugPlex (if you used the installer, it will be installed in C:\Program Files (x86)\PlugPlex), and find the Plugs folder. put your plug DLL there. Now start PlugPlex, and you can use you plug in javascript.

Calling Plugs From Javascript

To call a plug from javascript, you must first establish a connection to the plug. First, include plug-plex.js:

<script src="https://cdn.jsdelivr.net/gh/Hyperdraw/PlugPlex@v1.0.1-js2/PlugPlex.JS/plug-plex.js"></script>

Now, create a new Plug object, passing the name of the plug. This should be the same as the name property of the plug class. The second parameter of the constructor is a callback function, called when the connection is ready. Do not try to use the plug until the connection is complete and the callback has been called.

var myPlug = new Plug("MyPlug", plugLoadedCallback);

function plugLoadedCallback(){
	//Call plug functions...
}

To call a plug function, use the plug object’s Call function. The first parameter is the name of the function to call. The second parameter is an object to pass as the arguments to the function. The object should match the functions schema. For example, the AddSchema had two fields - A and B, so the object would look like this: {A: 7, B: 4} to add 7 and 4. Keep in mind that calls are asynchronous, and return values are returned as Promise objects. If you want to wait for an asynchronous call, use await. Sadly, await can only be used in async functions, so make plugLoadedCallback async. Try this:

var myPlug = new Plug("MyPlug", plugLoadedCallback);

async function plugLoadedCallback(){
	// Add two numbers
	var sum = await myPlug.Call("Add", {A: 45, B: 19});
	
	// Print the sum to the browser console
	console.log(sum);

	// Print the sum to the PlugPlex console
	await myPlug.Call("Print", {message: sum.toString()});
}

Tip: You can pass on optional third parameter the the Plug contructor, which is a callback called if the connection failed, such as if the user does not have that plug, or doesn’t have PlugPlex running

Now you can create wrapper functions:

async function Add(a, b){
	return (await myPlug.Call("Add", {A: a, B: b}));
}

async function Print(message){
	await myPlug.Call("Print", {message: message});
}

And use them like this:

async function plugLoadedCallback(){
	await Print(await Add(75, 62));
}

So get out there and start making plugs!