From 4bb3054a0ec5c969b1d1119fcb047d311031441d Mon Sep 17 00:00:00 2001 From: aronmal Date: Wed, 1 Feb 2023 12:00:25 +0100 Subject: [PATCH] Pages moved --- leaky-ships/components/SocketIO.tsx | 48 +++++++++++-------- leaky-ships/pages/api/hello.ts | 13 ----- leaky-ships/pages/api/{socket.ts => ws.ts} | 14 +++++- leaky-ships/pages/{ => dev}/gamefield.tsx | 2 +- leaky-ships/pages/{ => dev}/grid.tsx | 2 +- leaky-ships/pages/{ => dev}/grid2.tsx | 2 +- .../pages/{homepage.tsx => dev/index.tsx} | 0 leaky-ships/pages/{ => dev}/socket.tsx | 2 +- leaky-ships/pages/dev/socketio.tsx | 15 ++++++ leaky-ships/pages/index.tsx | 11 +++-- leaky-ships/pages/socketio.tsx | 22 --------- 11 files changed, 66 insertions(+), 65 deletions(-) delete mode 100644 leaky-ships/pages/api/hello.ts rename leaky-ships/pages/api/{socket.ts => ws.ts} (62%) rename leaky-ships/pages/{ => dev}/gamefield.tsx (91%) rename leaky-ships/pages/{ => dev}/grid.tsx (92%) rename leaky-ships/pages/{ => dev}/grid2.tsx (92%) rename leaky-ships/pages/{homepage.tsx => dev/index.tsx} (100%) rename leaky-ships/pages/{ => dev}/socket.tsx (96%) create mode 100644 leaky-ships/pages/dev/socketio.tsx delete mode 100644 leaky-ships/pages/socketio.tsx diff --git a/leaky-ships/components/SocketIO.tsx b/leaky-ships/components/SocketIO.tsx index fcae9a6..dca3aca 100644 --- a/leaky-ships/components/SocketIO.tsx +++ b/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 (
SocketIO
) diff --git a/leaky-ships/pages/api/hello.ts b/leaky-ships/pages/api/hello.ts deleted file mode 100644 index f8bcc7e..0000000 --- a/leaky-ships/pages/api/hello.ts +++ /dev/null @@ -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 -) { - res.status(200).json({ name: 'John Doe' }) -} diff --git a/leaky-ships/pages/api/socket.ts b/leaky-ships/pages/api/ws.ts similarity index 62% rename from leaky-ships/pages/api/socket.ts rename to leaky-ships/pages/api/ws.ts index 83d84a4..8b73f7d 100644 --- a/leaky-ships/pages/api/socket.ts +++ b/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() diff --git a/leaky-ships/pages/gamefield.tsx b/leaky-ships/pages/dev/gamefield.tsx similarity index 91% rename from leaky-ships/pages/gamefield.tsx rename to leaky-ships/pages/dev/gamefield.tsx index 7b56df3..b7abb82 100644 --- a/leaky-ships/pages/gamefield.tsx +++ b/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 ( diff --git a/leaky-ships/pages/grid.tsx b/leaky-ships/pages/dev/grid.tsx similarity index 92% rename from leaky-ships/pages/grid.tsx rename to leaky-ships/pages/dev/grid.tsx index da07730..b7b52a5 100644 --- a/leaky-ships/pages/grid.tsx +++ b/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 ( diff --git a/leaky-ships/pages/grid2.tsx b/leaky-ships/pages/dev/grid2.tsx similarity index 92% rename from leaky-ships/pages/grid2.tsx rename to leaky-ships/pages/dev/grid2.tsx index 9d3adb2..69afcf9 100644 --- a/leaky-ships/pages/grid2.tsx +++ b/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 ( diff --git a/leaky-ships/pages/homepage.tsx b/leaky-ships/pages/dev/index.tsx similarity index 100% rename from leaky-ships/pages/homepage.tsx rename to leaky-ships/pages/dev/index.tsx diff --git a/leaky-ships/pages/socket.tsx b/leaky-ships/pages/dev/socket.tsx similarity index 96% rename from leaky-ships/pages/socket.tsx rename to leaky-ships/pages/dev/socket.tsx index 57c68ce..7b3d227 100644 --- a/leaky-ships/pages/socket.tsx +++ b/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', () => { diff --git a/leaky-ships/pages/dev/socketio.tsx b/leaky-ships/pages/dev/socketio.tsx new file mode 100644 index 0000000..12b7789 --- /dev/null +++ b/leaky-ships/pages/dev/socketio.tsx @@ -0,0 +1,15 @@ +import SocketIO from '../../components/SocketIO' + +export default function Home() { + return ( + <> +
+
+
+ +
+
+
+ + ) +} diff --git a/leaky-ships/pages/index.tsx b/leaky-ships/pages/index.tsx index 7d57233..2a63814 100644 --- a/leaky-ships/pages/index.tsx +++ b/leaky-ships/pages/index.tsx @@ -11,11 +11,12 @@ export default function Home() {
-

Gamefield

-

Homepage

-

Grid Effect

-

Grid Effect with Content

-

SocketIO

+

Gamefield

+

Homepage

+

Grid Effect

+

Grid Effect with Content

+

Socket

+

SocketIO

) diff --git a/leaky-ships/pages/socketio.tsx b/leaky-ships/pages/socketio.tsx deleted file mode 100644 index c7e9e14..0000000 --- a/leaky-ships/pages/socketio.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import Head from 'next/head' -import SocketIO from '../components/SocketIO' - -export default function Home() { - return ( - <> - - Create Next App - - - - -
-
-
- -
-
-
- - ) -}