feat: add listen code change

src/pages/container/preview/index.tsx

@@ -1,14 +1,60 @@
-import { Container } from '@abearxiong/container';
+import { Container, ContainerEdit, RenderData } from '@abearxiong/container';
 import { useEffect, useRef, useState } from 'react';
-import { useParams } from 'react-router';
-import { query } from '@/modules';
+import { replace, useParams } from 'react-router';
+import { query, ws, useStore } from '@/modules';
 import { message } from 'antd';
 
+export const useListener = (id?: string, opts?: any) => {
+  const { refresh } = opts || {};
+  const connected = useStore((state) => state.connected);
+  // 监听服务器的消息
+  useEffect(() => {
+    if (!id) return;
+    if (!connected) return;
+    ws.send(
+      JSON.stringify({
+        type: 'subscribe',
+        data: {
+          type: 'pageEdit',
+          data: {
+            cid: id,
+            // cids: [],
+            // pids:'',
+          },
+        },
+      }),
+    );
+    ws.addEventListener('message', listener);
+    return () => {
+      if (!id) return;
+      if (!connected) return;
+      ws.removeEventListener('message', listener);
+    };
+  }, [id, connected]);
+  const listener = (event) => {
+    const parseIfJson = (data: string) => {
+      try {
+        return JSON.parse(data);
+      } catch (e) {
+        return data;
+      }
+    };
+    const receivedData = parseIfJson(event.data);
+    if (typeof receivedData === 'string') return;
+    if (receivedData.type === 'pageEdit' && receivedData.source === 'container') {
+      const { data: containerData } = receivedData;
+      if (containerData.id !== id) return;
+      if (refresh) {
+        refresh(containerData);
+      }
+    }
+  };
+};
 export const Preview = () => {
   const params = useParams<{ id: string }>();
   const id = params.id;
   const ref = useRef<HTMLDivElement>(null);
-  const containerRef = useRef<any>(null);
+  const containerRef = useRef<Container | null>(null);
   const [data, setData] = useState<any>({});
 
   useEffect(() => {
@@ -28,6 +74,7 @@ export const Preview = () => {
       const code = {
         id: data.id,
         title: data.title,
+        codeId: data.Id,
         code: data.code,
         data: data.data,
       };
@@ -36,14 +83,40 @@ export const Preview = () => {
       message.error(res.msg || 'Failed to fetch data');
     }
   };
-  const init = async (data: any[]) => {
+  const refresh = (data: any) => {
+    if (!data.id) return;
+    const code = {
+      id: data.id,
+      title: data.title,
+      codeId: data.Id,
+      code: data.code,
+      data: data.data,
+      hash: '',
+    };
+    init([code], true);
+  };
+  useListener(id, { refresh: refresh });
+  const init = async (data: any[], replace: boolean = false) => {
     // console.log('data', data, ref.current);
+    if (containerRef.current) {
+      const container = containerRef.current;
+      console.log('data', data, container.data);
+      container.updateData(data);
+      await new Promise((resolve) => {
+        setTimeout(resolve, 2000);
+      });
+      console.log('update---data', data, container.data);
+      container.destroy(id!);
+      container.renderId(id!);
+      return;
+    }
+    console.log('data', containerRef.current);
     const container = new Container({
       root: ref.current!,
       data: data as any,
       showChild: false,
     });
-    container.render(id!);
+    container.renderId(id!);
     containerRef.current = container;
   };
   return (