Pages moved

leaky-ships/components/SocketIO.tsx

@@ -1,27 +1,37 @@
+import { useEffect } from 'react'
 import { io } from 'socket.io-client'
 
 function SocketIO() {
-    const socket = io("ws://localhost:5001")
-    socket.on('test2', (warst) => {
-        console.log('Test2:', warst, socket.id)
-    })
-    socket.on("connect", () => {
-        console.log(socket.connected) // true
-        setTimeout(() => {
-            socket.emit('test', "warst")
-            socket.emit('test', "tsra")
-            socket.emit('test', "1234")
-            // socket.disconnect()
-        }, 1000)
-    })
+    useEffect(() => {
+        socketInitializer()
+    }, [])
 
-    socket.on("test", () => {
-        console.log("Got test1234") // false
-    })
+    const socketInitializer = async () => {
+        await fetch('/api/ws')
+
+        const socket = io()
+        socket.on('test2', (warst) => {
+            console.log('Test2:', warst, socket.id)
+        })
+        socket.on("connect", () => {
+            console.log(socket.connected) // true
+            setTimeout(() => {
+                socket.emit('test', "warst")
+                socket.emit('test', "tsra")
+                socket.emit('test', "1234")
+                // socket.disconnect()
+            }, 1000)
+        })
+
+        socket.on("test", () => {
+            console.log("Got test1234") // false
+        })
+
+        socket.on("disconnect", () => {
+            console.log(socket.connected) // false
+        })
+    }
 
-    socket.on("disconnect", () => {
-        console.log(socket.connected) // false
-    })
     return (
         <div>SocketIO</div>
     )

leaky-ships/pages/api/hello.ts

@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-type Data = {
-  name: string
-}
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>
-) {
-  res.status(200).json({ name: 'John Doe' })
-}

leaky-ships/pages/api/ws.ts

@@ -4,9 +4,9 @@ import { NextApiResponseWithSocket } from '../../interfaces/NextApiSocket'
 
 const SocketHandler = (req: NextApiRequest, res: NextApiResponseWithSocket) => {
   if (res.socket.server.io) {
-    console.log('Socket is already running')
+    console.log('Socket is already running ' + req.url)
   } else {
-    console.log('Socket is initializing')
+    console.log('Socket is initializing ' + req.url)
     const io = new Server(res.socket.server)
     res.socket.server.io = io
 
@@ -14,6 +14,16 @@ const SocketHandler = (req: NextApiRequest, res: NextApiResponseWithSocket) => {
       socket.on('input-change', msg => {
         socket.broadcast.emit('update-input', msg)
       })
+      // console.log(socket.id)
+      // console.log(socket)
+      // ...
+
+      socket.on("test", (payload) => {
+        console.log("Got test:", payload)
+        // ...
+      })
+
+      socket.emit('test2', 'lol')
     })
   }
   res.end()

leaky-ships/pages/dev/gamefield.tsx

@@ -1,5 +1,5 @@
 import Head from 'next/head'
-import Gamefield from '../components/Gamefield'
+import Gamefield from '../../components/Gamefield'
 
 export default function Home() {
   return (

leaky-ships/pages/dev/grid.tsx

@@ -1,5 +1,5 @@
 import Head from 'next/head'
-import Grid from '../components/Grid'
+import Grid from '../../components/Grid'
 
 export default function Home() {
   return (

leaky-ships/pages/dev/grid2.tsx

@@ -1,5 +1,5 @@
 import Head from 'next/head'
-import Grid2 from '../components/Grid2'
+import Grid2 from '../../components/Grid2'
 
 export default function Home() {
   return (

leaky-ships/pages/dev/socket.tsx

@@ -10,7 +10,7 @@ const Home = () => {
   }, [])
 
   const socketInitializer = async () => {
-    await fetch('/api/socket')
+    await fetch('/api/ws')
     socket = io()
 
     socket.on('connect', () => {

leaky-ships/pages/dev/socketio.tsx

@@ -0,0 +1,15 @@
+import SocketIO from '../../components/SocketIO'
+
+export default function Home() {
+  return (
+    <>
+      <main>
+        <div className="App">
+          <header className="App-header">
+            <SocketIO />
+          </header>
+        </div>
+      </main>
+    </>
+  )
+}

leaky-ships/pages/index.tsx

@@ -11,11 +11,12 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <main>
-        <p><Link href='/gamefield' target='_blank'>Gamefield</Link></p>
-        <p><Link href='/homepage' target='_blank'>Homepage</Link></p>
-        <p><Link href='/grid' target='_blank'>Grid Effect</Link></p>
-        <p><Link href='/grid2' target='_blank'>Grid Effect with Content</Link></p>
-        <p><Link href='/socketio' target='_blank'>SocketIO</Link></p>
+        <p><Link href='/dev/gamefield' target='_blank'>Gamefield</Link></p>
+        <p><Link href='/dev' target='_blank'>Homepage</Link></p>
+        <p><Link href='/dev/grid' target='_blank'>Grid Effect</Link></p>
+        <p><Link href='/dev/grid2' target='_blank'>Grid Effect with Content</Link></p>
+        <p><Link href='/dev/socket' target='_blank'>Socket</Link></p>
+        <p><Link href='/dev/socketio' target='_blank'>SocketIO</Link></p>
       </main>
     </>
   )

leaky-ships/pages/socketio.tsx

@@ -1,22 +0,0 @@
-import Head from 'next/head'
-import SocketIO from '../components/SocketIO'
-
-export default function Home() {
-  return (
-    <>
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <main>
-        <div className="App">
-          <header className="App-header">
-            <SocketIO />
-          </header>
-        </div>
-      </main>
-    </>
-  )
-}