@envision-digital/smms-fe-sdk

smms-fe-sdk

Feature

Provide a channel where the parent frame and iframe can communicate with each other.

1. Listen to SMMS's connection events (connecting, connected, connectionTimeout)
2. Pass token to SMMS
3. Listen to SMMS's location change
4. Use the same SDK when developing web applications for SMMS to load

SMMS's parent frame

Assuming SMMS is being served on http://localhost:4002

import { SDKConsumer } from "@envision-digital/smms-fe-sdk";

function App() {
  const frameRef = React.useRef<HTMLIFrameElement>(null);
  const sdkRef = React.useRef<SDKConsumer | undefined>();
  const [status, setStatus] = React.useState<ConnectionStatus>(
    ConnectionStatus.CONNECTING
  );
  const [currentLocation, setCurrentLocation] = React.useState<LocationObj>();
  React.useEffect(() => {
    sdkRef.current = new SDKConsumer({
      origin: "http://localhost:4002",
      targetWindow: frameRef.current!.contentWindow!,
      token: () => "this is a token from parent frame",
      on: {
        locationChange: (message) => {
          setCurrentLocation(message.data.content as LocationObj);
        },
      },
      lifecycleListener: setStatus,
      connectionTimeoutIn: 5000,
    });
    return () => sdkRef.current?.destroy();
  }, []);
  return (
    <div className="App">
      <div>host</div>
      <div>Status: {ConnectionStatus[status]}</div>
      <div>location: {JSON.stringify(currentLocation)}</div>
      <div>
        <button
          onClick={() => sdkRef.current!.sendToken(Math.random().toString())}
        >
          Send Token
        </button>
      </div>
      <iframe ref={frameRef} src="http://localhost:4002" title="SMMS"></iframe>
    </div>
  );
}

Web applications for SMMS to load

Assuming SMMS is being served on http://localhost:4002

import { SDKProvider } from "@envision-digital/smms-fe-sdk";

function App() {
  const name = document.location.pathname.substring(1);
  const sdkRef = React.useRef<SDKProvider<{ token: string }>>();
  const [ready, setReady] = React.useState(false);
  const [receivedData, setReceivedData] = React.useState<unknown>();
  const [displayedToken, setDisplayedToken] = React.useState<string>();
  React.useEffect(() => {
    sdkRef.current = new SDKProvider({
      origin: "http://localhost:4002",
      namespace: `application-${name}`,
      on: {
        receiveToken: (message) => {
          const token = message.data.content as string;
          setDisplayedToken(token);
        },
      },
    });
    sdkRef.current.addEventListener(`application-${name}-topic`, (data) => {
      setReceivedData(data.data.content);
    });
    sdkRef.current.initConnection().then((message) => {
      const token = message.data.content?.token as string;
      setDisplayedToken(token);
      setReady(true);
    });
    return () => sdkRef.current?.destroy();
  }, []);
  return (
    <div className="App">
      <div>Application {name}</div>
      <div>SDK Connected: {String(ready)}</div>
      <div>Token: {displayedToken}</div>
      <div>Received Data: {JSON.stringify(receivedData)}</div>
    </div>
  );
}