Skip to content

Plugin System

Marcel edited this page Jul 22, 2024 · 2 revisions

The plugin system was created to allow for better customization and more freedom. Its possible to add custom socket events, add custom code like functions and features or modify existing functions. Since the plugins integrade directly into the server the possibilities are endless.


Table of Contents


Plugin Structure

Plugins are stored in the in the /plugins directory which can be found in the root of the software where the index.mjs is located at. The folder structure of a plugin is like the following:

\---Your-Plugin-Name
    +---functions
    +---sockets
    +---web 

Please note: These folders have to exist! The folders can be empty but they have to be present!

Once you put everthing in the /plugins folder, everything inside the Your-Plugin-Name/web folder will be copied to the /public/plugins/Your-Plugin-Name folder

A complete example plugin would look like this (more to it later):

\---example
    +---functions
    |       info.mjs
    |       plugin_onLoad.mjs
    |       
    +---sockets
    |       example_event.mjs
    |       
    \---web
            main.js

Server Side Entry point

In the functions folder you would put your code that should be run on the server. If you create a file with a filename that contains the name "onLoad" like in the example above called plugin_onLoad.mjs then it will be executed when the server starts. This is your entry point on the server side.

Example:

// plugin_onLoad.mjs

// Example Imports
import { pluginInfo, exampleAdd } from "./info.mjs" // your custom file
import { consolas } from "../../../modules/functions/io.mjs"

// Example Code
consolas("Plugin Info")
console.log(pluginInfo)
console.log(exampleAdd(2,2))





// info.mjs
// Example file for exporting variables and function etc
export let pluginInfo = {
    author:  "HackTheDev",
    version: "1.0",
    license: "none"
}

export function exampleAdd(a, b){
    return a + b;
}

Custom Socket Events

In the sockets folder you can define custom socket.io events. This can be useful to introduce new features. All .mjs files in the sockets folder will be imported automatically.

Example:

import { validateMemberId } from "../../../modules/functions/main.mjs";
import { serverconfig } from "../../../index.mjs";

export default (socket) => {
    socket.on('coolExample', (member, response) => {
        if (
            validateMemberId(member.id, socket) === true &&
            serverconfig.servermembers[member.id].token === member.token
        ) {
            response({ type: 'success', message: "It worked" });
            
        } else {
            response({ type: 'error', message: 'Invalid member or token' });
        }
    });
};

For testing you could paste the following code in the web console of the client and see if it shows a popup with the message

socket.emit("coolExample", {id: getID(), token: getToken()}, function (response) {
	alert(response.message)
});

Client Side Entry Point

In the web folder you put everything that you want to change in the web client. You main entry file will be main.js and it needs to be in the webfolder, otherwise your plugin wont have a entry point for the client. You could create additional files and reference/import them from the main.js file.

Example:

// Example Code
// The main.js file is your entry point (client-side).
let channels = document.querySelectorAll("li.channelTrigger");

channels.forEach(channel => {
    console.log(channel)
    channel.style.backgroundColor = "red";
});

Example on how you could import functions from another file:

// file1.js
// Define a function to add two values
function addValues(a, b) {
    return a + b;
}

// Expose the function to the global scope
window.addValues = addValues;




// file2.js 
// Define a function to subtract two values
function subtractValues(a, b) {
    return a - b;
}

// Expose the function to the global scope
window.subtractValues = subtractValues;




// file3.js
// use the functions defined in file1.js and file2.js
function calculate() {
    let sum = window.addValues(10, 5);
    console.log("Sum:", sum);  // Output: Sum: 15

    let difference = window.subtractValues(10, 5);
    console.log("Difference:", difference);  // Output: Difference: 5
}

// Call the calculate function to test
calculate();