juncture-server
TypeScript icon, indicating that this package has built-in type declarations

2.0.5 • Public • Published

Juncture Server

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.

Features

  • 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

Installation

npm install juncture-server

For React integration, also install juncture-bridge:

npm install juncture-bridge

Basic Usage

Setting Up the Server with Default State

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.

Frontend (React)

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;

API

Juncture

Constructor

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

Methods

  • start(): Starts the server
  • setState(newState: any): Updates the state
  • getState(): Returns the current state

ExpressBridge

Methods

  • 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

ReactBridge (from juncture-bridge)

Constructor

new ReactBridge(url: string)
  • url: URL of the Juncture server

Methods

  • 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

License

MIT

Package Sidebar

Install

npm i juncture-server

Weekly Downloads

0

Version

2.0.5

License

MIT

Unpacked Size

11.1 kB

Total Files

9

Last publish

Collaborators

  • alihaydar