feat(nodejs:website): Add phonix provider.

Author: gsmlg

nodejs/packages/website/package.json

@@ -6,29 +6,32 @@
     "build": "next build && next export -o build && touch build/.nojekyll",
     "start": "next start"
   },
-  "dependencies": {},
-  "publishConfig": {
-    "access": "public"
-  },
-  "devDependencies": {
-    "@types/node": "^16.10.3",
-    "@types/react": "^17.0.27",
+  "dependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "@mui/icons-material": "^5.0.3",
     "@mui/material": "^5.0.3",
     "@mui/styles": "^5.0.1",
-    "axios": "^0.22.0",
     "next": "11.1.2",
+    "phoenix-provider": "^1.0.0",
     "react": "17.0.2",
     "react-dnd": "^14.0.4",
     "react-dnd-html5-backend": "^14.0.2",
     "react-dnd-touch-backend": "^14.1.1",
     "react-dom": "17.0.2",
     "react-markdown": "^7.0.1",
     "remark-gfm": "^3.0.0",
-    "rxjs": "^7.4.0",
+    "rxjs": "^7.4.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@gsmlg/scripts": "^1.0.0",
+    "@types/node": "^16.10.3",
+    "@types/react": "^17.0.27",
+    "axios": "^0.22.0",
     "typescript": "^4.4.3"
   }
 }

nodejs/packages/website/pages/_app.tsx

@@ -4,6 +4,7 @@ import Head from 'next/head';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
 import { CacheProvider, EmotionCache } from '@emotion/react';
+import { Provider as PhoenixProvider } from 'phoenix-provider';
 import theme from '../src/theme';
 import createEmotionCache from '../src/createEmotionCache';
 
@@ -28,12 +29,14 @@ export default function MyApp(props: MyAppProps) {
           content="minimum-scale=1, initial-scale=1, width=device-width"
         />
       </Head>
-      <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={theme}>
-          <CssBaseline />
-          <Component {...pageProps} />
-        </ThemeProvider>
-      </StyledEngineProvider>
+      <PhoenixProvider url={'/socket'} params={{ token: 'anonymous' }}>
+        <StyledEngineProvider injectFirst>
+          <ThemeProvider theme={theme}>
+            <CssBaseline />
+            <Component {...pageProps} />
+          </ThemeProvider>
+        </StyledEngineProvider>
+      </PhoenixProvider>
     </CacheProvider>
   );
 }

nodejs/packages/website/src/components/Layout/index.js

@@ -16,6 +16,8 @@ import MenuIcon from '@mui/icons-material/Menu';
 
 import Link from 'next/link';
 
+import { useSocket } from 'phoenix-provider';
+
 const RootSection = styled('section')((
   {
     theme
@@ -37,7 +39,7 @@ const ContainerSection = styled('section')((
 }));
 const Footer = styled('footer')((
   {
-    theme
+    theme,
   }
 ) => ({
   // height: '2em',
@@ -47,6 +49,14 @@ const Footer = styled('footer')((
   color: theme.palette.getContrastText(theme.palette.primary.main),
   backgroundColor: theme.palette.primary.main,
 }));
+const SocketStatus = styled('div')(({ theme, status }) => ({
+  display: 'inline-block',
+  width: 16,
+  height: 16,
+  borderRadius: 8,
+  margin: '0 8px',
+  backgroundColor: status.color,
+}));
 
 const menus = [
   {name: 'Home', href: '/'},
@@ -57,6 +67,40 @@ const menus = [
 ];
 
 const Layout = ({children}, ref) => {
+  const socket = useSocket();
+  const [socketStatus, setSocketStatus] = React.useState({ color: 'transperant' });
+  React.useEffect(() => {
+    if (socket.vsn) {
+      const updateState = () => {
+        console.log(socket);
+        const state = '';//socket.connectionState();
+        switch(state) {
+          case "connecting":
+            setSocketStatus({ color: 'blue' });
+            break;
+          case "open":
+            setSocketStatus({ color: 'green' });
+            break;
+          case "closing":
+            setSocketStatus({ color: 'orange' });
+            break;
+          default:
+            // "closed"
+            setSocketStatus({ color: 'gray' });
+        }
+      };
+      updateState();
+      const list = [
+        socket.onOpen(updateState),
+        socket.onClose(updateState),
+        socket.onError(updateState),
+        socket.onMessage(updateState),
+      ];
+      return () => {
+        socket.off(list);
+      };
+    }
+  }, [socket]);
 
   const requestPerm = React.useCallback(() => {
     Notification.requestPermission();
@@ -66,6 +110,7 @@ const Layout = ({children}, ref) => {
     <RootSection ref={ref}>
       <AppBar position="static">
         <Toolbar>
+          <SocketStatus status={socketStatus} />
           <IconButton
             onClick={requestPerm}
             color="inherit"