Skip to main content

RemoteEvents

Description​

A service that applies changes saved by other users to Gantt live

RemoteEvents listens to the server events stream and applies the changes of tasks, links and assignments made by other clients. For details, see Getting changes from other users.

Usage​

new RemoteEvents(
   provider: RestDataProvider,
   config: {
      url: string,
      onResync?: () => void,
      onConnectionChange?: (online: boolean) => void,
      onMessage?: (message: string) => void,
      params?: { [name: string]: string } | (() => { [name: string]: string }),
      withCredentials?: boolean,
   }
)

You can import the service from @svar-ui/gantt-data-provider.

Parameters​

  • provider - (required) the RestDataProvider instance that saves data of this Gantt
  • config - (required) an object with the following parameters:
    • url - (required) the URL of the server events stream
    • onResync - (optional) a function called when the connection is restored; reload data in it
    • onConnectionChange - (optional) a function called when the connection opens (true) or is lost (false)
    • onMessage - (optional) a function that replaces the default handling of incoming messages
    • params - (optional) query parameters added to the stream URL. The clientId parameter is always added
    • withCredentials - (optional) if true, the stream request is sent with credentials (cookies)

Properties and methods​

  • clientId - a unique id of the client. Pass it to the server in the X-Client-Id header via setHeaders()
  • connect(api) - connects to the events stream and starts applying changes to Gantt. Returns a promise resolved when the connection is open
  • disconnect() - closes the connection

Server messages​

The server sends each change as a JSON message:

{
   type: "task" | "link" | "assignment",
   action: "add" | "update" | "delete",
   id: string | number,
   data?: {}, // the saved record
   from: string // clientId of the client that made the change
}

Example​

import { useState, useMemo } from "react";
import { Gantt } from "@svar-ui/react-gantt";
import { RestDataProvider, RemoteEvents } from "@svar-ui/gantt-data-provider";

const url = "https://some_backend_url";

function App() {
  const [tasks, setTasks] = useState([]);
  const [links, setLinks] = useState([]);
  const [connected, setConnected] = useState(false);

  const { restProvider, remoteEvents, load } = useMemo(() => {
    const restProvider = new RestDataProvider(url);

    function load() {
      restProvider.getData().then(data => {
        setTasks(data.tasks);
        setLinks(data.links);
      });
    }

    const remoteEvents = new RemoteEvents(restProvider, {
      url: `${url}/events`,
      onResync: load, // reloads data when the connection is restored
      onConnectionChange: online => setConnected(online),
    });
    restProvider.setHeaders({ "X-Client-Id": remoteEvents.clientId });

    return { restProvider, remoteEvents, load };
  }, []);

  function init(api) {
    api.setNext(restProvider);
    remoteEvents.connect(api).finally(load);
  }

  return <Gantt init={init} tasks={tasks} links={links} />;
}

export default App;

For the full setup, see Getting changes from other users.

Related articles: