> ## ⚠️ Deprecated
npm install @envision-digital/smms-fe-sdk> ## ⚠️ Deprecated
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
Assuming SMMS is being served on http://localhost:4002
``typescript
import { SDKConsumer } from "@envision-digital/smms-fe-sdk";
function App() {
const frameRef = React.useRef
const sdkRef = React.useRef
const [status, setStatus] = React.useState
ConnectionStatus.CONNECTING
);
const [currentLocation, setCurrentLocation] = React.useState
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 (
host
Status: {ConnectionStatus[status]}
location: {JSON.stringify(currentLocation)}
onClick={() => sdkRef.current!.sendToken(Math.random().toString())}
>
Send Token
);
}
`
Assuming SMMS is being served on http://localhost:4002
`typescript
import { SDKProvider } from "@envision-digital/smms-fe-sdk";
function App() {
const name = document.location.pathname.substring(1);
const sdkRef = React.useRef
const [ready, setReady] = React.useState(false);
const [receivedData, setReceivedData] = React.useState
const [displayedToken, setDisplayedToken] = React.useState
React.useEffect(() => {
sdkRef.current = new SDKProvider({
origin: "http://localhost:4002",
namespace: application-${name},application-${name}-topic
on: {
receiveToken: (message) => {
const token = message.data.content as string;
setDisplayedToken(token);
},
},
});
sdkRef.current.addEventListener(, (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 (
Application {name}
SDK Connected: {String(ready)}
Token: {displayedToken}
Received Data: {JSON.stringify(receivedData)}
);
}