Communication Space between JavaScript modules

Connect && Disconnect

1. modules have to connect to same space to communicate with others
2. make sure to disconnect when instance or component is destroyed

A.js ( React Function Component )

import { useEffect } from 'react';
import csp from 'nbrc-csp';

function A(props) {

    conn = null;

    useEffect(() => {
        // csp.connect(connection_name = '', space_name = '_default_')
        conn = csp.connect() // connect to '_default_' space with no name
        return function () {
            // disconnect from '_default_' space
            conn.disconnect();
        }
    }, []);

    return <>Component A</>;
}

export default A;

B.js ( React Class Component )

import React from 'react';
import csp from 'nbrc-csp';

class B extends React.Component {

    conn = null;

    componentDidMount() {
        this.conn = csp.connect() // connect to '_default_' space with no name
    }

    componentWillUnmount() {
	// disconnect from '_default_' space
        this.conn.disconnect();
    }

    render() {
        return <>Component B</>;
    }
}

export default B;

Events

Trigger Events ( A.js )

import { useEffect } from 'react';
import csp from 'nbrc-csp';

function A(props) {

    conn = null;

    useEffect(() => {
        // csp.connect(connection_name = '', space_name = '_default_')
        conn = csp.connect('ACom') // connect to '_default_' space and name this connection 'ACom'
        return function () {
            // disconnect from '_default_' space
            conn.disconnect();
        }
    }, []);

    function onClick() {
        // Trigger an event in the space and pass some parameters
        conn.trigger('A-Button-Clicked', 'param1', 123);
    }

    return <>
        <button onClick={onClick}>Trigger Event</button>
    </>
}

export default A;

Listen Events ( B.js )

import React from 'react';
import csp from 'nbrc-csp';

class B extends React.Component {

    conn = null;

    componentDidMount() {
        this.conn = csp.connect()
            .listen((event, ...params) => { // listen events in the space
                console.log(event.trigger); // who fired this event (connection name: ACom)
                console.log(event.name); // event name
                switch (event.name) {
                    case 'A-Button-Clicked':
                        console.log(...params); // 'param1'  123
                        break;
                }
            })
    }

    componentWillUnmount() {
	// disconnect from '_default_' space
        this.conn.disconnect();
    }

    render() {
        return <>Component B</>;
    }
}

export default B;

Expose

Expose to space ( A.js )

expose functions or variables to space, and can be accessed by other modules

import { useEffect } from 'react';
import csp from 'nbrc-csp';

function A(props) {

    conn = null;

    useEffect(() => {
        // csp.connect(connection_name = '', space_name = '_default_')
        conn = csp.connect('ACom') // connect to '_default_' space and name this connection 'ACom'
            .expose({ funA }) // expose funcA to space
        return function () {
            // disconnect from '_default_' space
            conn.disconnect();
        }
    }, []);

    /**
     * funcA will be exposed to space
     */
    function funA() {
        console.log('Function In A...');
    }

    function onClick() {
        // Trigger an event in the space and pass some parameters
        conn.trigger('A-Button-Clicked', 'param1', 123);
    }

    return <>
        <button onClick={onClick}>Trigger Event</button>
    </>
}

export default A;

Access Exposed Items ( B.js )

import React from 'react';
import csp from 'nbrc-csp';

class B extends React.Component {

    conn = null;

    componentDidMount() {
        this.conn = csp.connect()
            .listen((event, ...params) => { // listen events in the space
                console.log(event.trigger); // who fired this event (connection name: ACom)
                console.log(event.name); // event name
                switch (event.name) {
                    case 'A-Button-Clicked':
                        console.log(...params); // 'param1'  123
                        break;
                }
            })
    }

    componentWillUnmount() {
	// disconnect from '_default_' space
        this.conn.disconnect();
    }

    callA() {
        // call function in A Component by A's connction name ACom
        this.conn.getExpose().ACom.funcA();
    }

    render() {
        return <>
            <Button onClick={callA}>Call Function in A Component</Button>
        </>;
    }
}

export default B;

Connection Name

You can connect to a space with no name or a unique name.

But if you want to expose some thing( functions or variables ) to space, you must name the connection, because other modules have to invoke the exposed functions or access exposed variables by the connection name.

Multiple Spaces

An instance can have multiple spaces, distinguished by space names. No need to manually create a space, when connecting to a space, if the space name does not exist, it will be automatically created.

Only modules in the same space can communicate with each other.

Examples:

// csp.connect(connection_name = '', space_name = '_default_')
conn = csp.connect('','A'); // connect to space 'A' with no name
conn = csp.connect('c1','A'); // connect to space 'A' with name 'c1'
conn = csp.connect('c2','B'); // connect to space 'B' with name 'c2'
conn = csp.connect('c3'); // connect to space '_default_' with name 'c3'

Multiple Instances

import csp from 'nbrc-csp';

let newCSP = csp.createInstance();