@planningcenter/jolt-client NPM

Jolt client-side library

This is a Typescript implementation of a Jolt client. It is suitable for use in client-side browser environments.

Usage

This client is not tied to React in any way. So, the following is just an example of how you could use this library with React hooks.

// Maybe you want some kind of useJoltChannel.js hook
import { useEffect, useState } from "react";
import Jolt from "@planningcenter/jolt-client";

function useJoltChannel(channelName) {
  const [joltChannel, setJoltChannel] = useState();

  useEffect(() => {
    const jolt = new Jolt("wss://your.endpoint.here", {
      authToken: "your:auth:token:or:whatever",
      fetchSubscribeTokenFn: async (channel, connectionId, { claims }) =>
        "your:subscribe:token",
    });
    setJoltChannel(jolt.subscribe(channelName));
    return () => jolt.unsubscribe(channelName);
  }, [channelName]);

  return joltChannel;
}

// Elsewhere...

function ComponentCommunicatingWithJolt() {
  const channel = useJoltChannel("someChannel");
  useEffect(() => {
    if (!channel) return;

    const handleMessage = ({ event, data, channel }) => doSomething(data);
    return channel.bind("someEvent", handleMessage));
  }, [channel])
}