Juncture Server is a TypeScript module that bridges React with Node.js applications, providing graphical user interfaces for Node.js apps. It works in conjunction with the juncture-bridge library to enable seamless communication between frontend and backend.
- Easy integration with Express server
- Real-time communication using Socket.IO
- TypeScript support
- Can be used in both JavaScript and TypeScript projects
- Supports both import and require syntax
- Seamless integration with React via juncture-bridge
npm install juncture-server
For React integration, also install juncture-bridge:
npm install juncture-bridge
You can initialize Juncture with a default state and configuration. Here's an example:
import Juncture from 'juncture-server';
let defaultState = {
counter: 0,
message: ""
}
const app = new Juncture(3000, defaultState);
const bridge = app.bridge;
// Backend (Node.js)
// Simple command handler
bridge.registerHandler('greet', async (args) => {
const greeting = `Hello, ${args.name}!`;
app.setState({ ...app.getState(), message: greeting });
return greeting;
});
// Stream example
bridge.registerHandler('count', async (args) => {
const { countTo } = args;
for (let i = 1; i <= countTo; i++) {
app.setState({ ...app.getState(), counter: i });
bridge.broadcast('counterUpdate', i);
await new Promise(resolve => setTimeout(resolve, 1000));
}
return 'Counting completed!';
});
app.start();
This setup allows you to define a default state and use it in your handlers. The handlers demonstrate how the state is updated and used.
First, create a bridge instance:
// utils/bridge.js
import ReactBridge from "juncture-bridge";
const bridge = new ReactBridge("http://localhost:3000");
export default bridge;
Then, use the bridge in your React components:
import React, { useState, useEffect } from 'react';
import bridge from "../utils/bridge";
function App() {
const [message, setMessage] = useState('');
const [counter, setCounter] = useState(0);
const handleGreeting = () => {
bridge.execute("greet", { name: "World" })
.then(setMessage)
.catch(console.error);
};
const handleCounting = () => {
bridge.execute("count", { countTo: 5 })
.then(console.log)
.catch(console.error);
};
useEffect(() => {
bridge.on("counterUpdate", (data) => {
setCounter(data);
});
bridge.on("stateUpdate", (newState) => {
setMessage(newState.message);
setCounter(newState.counter);
});
return () => {
bridge.off("counterUpdate");
bridge.off("stateUpdate");
};
}, []);
return (
<div>
<button onClick={handleGreeting}>Greet</button>
<p>{message}</p>
<button onClick={handleCounting}>Start Counting</button>
<p>Current count: {counter}</p>
</div>
);
}
export default App;
new Juncture(port?: number, defaultState?: any, config?: Partial<JunctureConfig>)
-
port
: The port the server will run on (default: 3000) -
defaultState
: Initial state (default: {}) -
config
: Configuration options
-
start()
: Starts the server -
setState(newState: any)
: Updates the state -
getState()
: Returns the current state
-
registerHandler(command: string, handler: (args: any) => Promise<any>)
: Registers a new command handler -
broadcast(event: string, data: any)
: Broadcasts an event to all connected clients
new ReactBridge(url: string)
-
url
: URL of the Juncture server
-
execute(command: string, args: any): Promise<any>
: Executes a command on the server -
on(event: string, callback: (data: any) => void)
: Listens for an event -
off(event: string)
: Stops listening for an event
MIT