Skip to content

Commit

Permalink
Merge pull request #231 from hepengwei/feat_he
Browse files Browse the repository at this point in the history
调试
  • Loading branch information
hepengwei authored Dec 13, 2023
2 parents a6a38cf + 6374d19 commit 9c1d012
Show file tree
Hide file tree
Showing 6 changed files with 123 additions and 72 deletions.
2 changes: 1 addition & 1 deletion docs/main.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions docs/service-worker.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions scripts/webpack.prod.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const prodConfig = {
},
},
resolveApp("CNAME"),
resolveApp("service-worker.js"),
],
}),
],
Expand Down
13 changes: 13 additions & 0 deletions service-worker.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
// 监听客户端发过来的message
self.addEventListener("message", function (event) {
// 处理接收到的消息
const message = event.data;
console.log("SW接收到客户端的消息:", message);

// 向所有客户端页面发送消息
self.clients.matchAll().then(function (clients) {
clients.forEach(function (client) {
client.postMessage(message);
});
});
});
1 change: 1 addition & 0 deletions src/constants/common.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,6 @@ export const ECHART_COMMON_COLOR = [
];

export const IFRAME_ID = "bIframe";
// export const THAT_PAGE_URL = "http://localhost:3003";
export const THAT_PAGE_URL = "https://michellez.cn";
export const THAT_PAGE_PASSWORD = '123456';
177 changes: 106 additions & 71 deletions src/hooks/useQuantumEntanglement.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const useQuantumEntanglement = (
) => {
const pageId = useRef<string>(Math.random().toString(36).substring(2));
const [thatPageInfo, setThatPageInfo] = useState<ThatPageInfo | null>(null);
const thatPageId = useRef<string>("");
const thatPageInfoRef = useRef<ThatPageInfo | null>(null);
const isThatPageReady = useRef<boolean>(false);
const sendTimer = useRef<number>(0);
const receiveTimer = useRef<number>(0);
Expand Down Expand Up @@ -73,7 +73,7 @@ const useQuantumEntanglement = (
receiveTimer.current = window.setTimeout(() => {
receiveTimer.current = 0;
window.localStorage.removeItem(receiveKey);
thatPageId.current = "";
thatPageInfoRef.current = null;
setThatPageInfo(null);
}, 1500);
}
Expand All @@ -84,105 +84,140 @@ const useQuantumEntanglement = (
const onMessage = useCallback((e: any) => {
console.log(777, e);
if (e.origin !== thatPageUrl) return;
if (e.data) {
if (e.data.includes("keepAlive")) {
window.localStorage.setItem("keepAliveInfo", e.data);
if ("serviceWorker" in navigator) {
if (e.data) {
if (e.data.includes("keepAlive")) {
navigator.serviceWorker?.controller?.postMessage({
type: "keepAliveInfo",
value: e.data,
});
} else {
navigator.serviceWorker?.controller?.postMessage({
type: receiveKey,
value: e.data,
});
}
} else {
window.localStorage.setItem(receiveKey, e.data);
navigator.serviceWorker?.controller?.postMessage({
type: receiveKey,
value: "",
});
}
}
}, []);

const resendMessage = useCallback(() => {
if (window.self === window.top) {
postInfo();
// 自己页面移动后需要重新setThatPageInfo,使页面重新刷新
if (thatPageInfoRef.current) {
const newThatPageInfo = { ...thatPageInfoRef.current };
thatPageInfoRef.current = newThatPageInfo;
setThatPageInfo(newThatPageInfo);
}
} else {
window.localStorage.setItem("keepAliveInfo", "");
window.localStorage.setItem(receiveKey, "");
// getLocalThatPageInfo();
}
}, []);

const onStorage = useCallback((e: any) => {
if (e.key === "keepAliveInfo") {
if (e.newValue) {
const keepAliveInfo = JSON.parse(e.newValue);
if (keepAliveInfo && keepAliveInfo.pageId === thatPageId.current) {
useScreenPosition(resendMessage);

// 从Service Worker发过来message时的回调
const onReceiveSWMessage = useCallback((event: any) => {
const message = event.data;
console.log("接收到SW的消息:", message);
if (message.type === "keepAliveInfo") {
if (message.value) {
const keepAliveInfo = JSON.parse(message.value);
if (thatPageInfoRef.current) {
if (
keepAliveInfo &&
keepAliveInfo.pageId === thatPageInfoRef.current?.pageId
) {
// 如果收到了保活信息,则清除receiveTimer
if (receiveTimer.current) {
window.clearTimeout(receiveTimer.current);
receiveTimer.current = 0;
}
}
} else {
// 如果收到了保活信息,则清除receiveTimer
if (receiveTimer.current) {
window.clearTimeout(receiveTimer.current);
receiveTimer.current = 0;
}
const newThatPageInfo = { pageId: keepAliveInfo.pageId, x: 0, y: 0 };
thatPageInfoRef.current = newThatPageInfo;
setThatPageInfo(newThatPageInfo);
}
}
} else if (e.key === receiveKey) {
if (e.newValue) {
const thatPageInfo = JSON.parse(e.newValue);
} else if (message.type === receiveKey) {
if (message.value) {
const thatPageInfo = JSON.parse(message.value);
if (thatPageInfo) {
thatPageId.current = thatPageInfo.pageId;
thatPageInfoRef.current = thatPageInfo;
setThatPageInfo(thatPageInfo);
} else {
thatPageId.current = "";
thatPageInfoRef.current = null;
setThatPageInfo(null);
}
} else {
thatPageId.current = "";
thatPageInfoRef.current = null;
setThatPageInfo(null);
}
}
}, []);

// 获取localStorage中的另一页面的信息,并setThatPageInfo
const getLocalThatPageInfo = () => {
const thatPageInfoStr = window.localStorage.getItem(receiveKey);
if (thatPageInfoStr) {
const thatPageInfo = JSON.parse(thatPageInfoStr);
if (thatPageInfo) {
thatPageId.current = thatPageInfo.pageId;
setThatPageInfo(thatPageInfo);
} else {
thatPageId.current = "";
setThatPageInfo(null);
}
} else {
thatPageId.current = "";
setThatPageInfo(null);
}
};

const resendMessage = useCallback(() => {
if (window.self === window.top) {
postInfo();
getLocalThatPageInfo();
}
}, []);
useLayoutEffect(() => {
if ("serviceWorker" in navigator) {
if (window.self === window.top) {
if (iframeId && elementRef?.current) {
const aIframe: HTMLIFrameElement = document.createElement("iframe");
aIframe.id = iframeId;
aIframe.style.visibility = "hidden";
console.log(222);
aIframe.onload = () => {
console.log("iframe ready");
isThatPageReady.current = true;
resendMessage();

useScreenPosition(resendMessage);
window.addEventListener("resize", resendMessage);
sendTimer.current = window.setInterval(() => {
postKeepAliveInfo();
}, 600);
};
aIframe.src = thatPageUrl;
elementRef.current.appendChild(aIframe);

useLayoutEffect(() => {
window.addEventListener("message", onMessage, false);
if (window.self === window.top) {
if (iframeId && elementRef?.current) {
const aIframe: HTMLIFrameElement = document.createElement("iframe");
aIframe.id = iframeId;
aIframe.style.visibility = "hidden";
console.log(222);
aIframe.onload = () => {
console.log("iframe ready");
isThatPageReady.current = true;
resendMessage();
// 监听从serviceWorker发过来的message
navigator.serviceWorker.addEventListener(
"message",
onReceiveSWMessage
);
}
} else {
// 注册Service Worker
navigator.serviceWorker
.register("service-worker.js")
.then(() => {
console.log("注册Service Worker成功");
})
.catch(() => {
console.log("注册Service Worker失败");
});

window.addEventListener("storage", onStorage);
window.addEventListener("resize", resendMessage);
sendTimer.current = window.setInterval(() => {
postKeepAliveInfo();
}, 600);
};
aIframe.src = thatPageUrl;
elementRef.current.appendChild(aIframe);
window.addEventListener("message", onMessage, false);
}
}

return () => {
window.removeEventListener("message", onMessage);
if (window.self === window.top) {
window.removeEventListener("storage", onStorage);
window.removeEventListener("resize", resendMessage);
sendTimer.current && window.clearInterval(sendTimer.current);
receiveTimer.current && window.clearTimeout(receiveTimer.current);
if ("serviceWorker" in navigator) {
if (window.self === window.top) {
window.removeEventListener("resize", resendMessage);
sendTimer.current && window.clearInterval(sendTimer.current);
receiveTimer.current && window.clearTimeout(receiveTimer.current);
} else {
window.removeEventListener("message", onMessage, false);
}
}
};
}, []);
Expand Down

0 comments on commit 9c1d012

Please sign in to comment.