Merge pull request #40 from ddddddO/endpoint

Endpoint
ddddddO · Jun 29, 2024 · a83abc2 · a83abc2
2 parents bd4c239 + 55b881f
commit a83abc2
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 19 deletions.
diff --git a/cmd/packemon-api/web/README.md b/cmd/packemon-api/web/README.md
@@ -1,6 +1,5 @@
 >[!WARNING]
 > - フロントいじったら、`npm run build` -> push 忘れない
-> - local開発時の `const endpoint` 面倒だけど一旦手動で変えてやる
 
 # memo
 - https://x.com/honey321998/status/1785882749670396269

diff --git a/...mon-api/web/dist/assets/index-Cijq9ZZc.js → ...mon-api/web/dist/assets/index-Dw3tDLHo.js b/...mon-api/web/dist/assets/index-Cijq9ZZc.js → ...mon-api/web/dist/assets/index-Dw3tDLHo.js
diff --git a/cmd/packemon-api/web/dist/index.html b/cmd/packemon-api/web/dist/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
-    <script type="module" crossorigin src="/assets/index-Cijq9ZZc.js"></script>
+    <script type="module" crossorigin src="/assets/index-Dw3tDLHo.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-DTexKck-.css">
   </head>
   <body>

diff --git a/cmd/packemon-api/web/src/endpoint.ts b/cmd/packemon-api/web/src/endpoint.ts
@@ -0,0 +1,17 @@
+export const getEndpoint = (): string => {
+  const loc = window.location
+  return loc.hostname === 'localhost'
+        ? 'http://localhost:8082/packet'
+        : loc.protocol + '//' + loc.host + '/packet'
+}
+
+export const getEndpointWS = (): string => {
+  const endpoint: string = (() => {
+    const loc = window.location
+    const protocol = loc.protocol === 'https:' ? 'wss:' : 'ws:'
+    return protocol + '//' + loc.host + loc.pathname + 'ws'
+  })()
+
+  const endpointDev: string = "ws://localhost:8082/ws"
+  return window.location.hostname === 'localhost' ? endpointDev : endpoint
+}
diff --git a/cmd/packemon-api/web/src/generator/Generator.tsx b/cmd/packemon-api/web/src/generator/Generator.tsx
@@ -6,8 +6,9 @@ import { useForm, SubmitHandler } from 'react-hook-form'
 import Ethernet from './Ethernet'
 import IPv4 from './IPv4'
 import { FormInput } from './inputTypes'
+import { getEndpoint } from '../endpoint'
 
-const handleSend = (endpoint: string, input: FormInput) => {
+const handleSend = (input: FormInput) => {
   const body = {
     protocol: input.ipv4.protocol,
     src_ip: input.ipv4.srcIP,
@@ -25,7 +26,7 @@ const handleSend = (endpoint: string, input: FormInput) => {
     body: JSON.stringify(body),
   }
 
-  fetch(endpoint, params)
+  fetch(getEndpoint(), params)
     .then((data) => data.json())
     .then((resp) => console.log(resp))
     .catch((error) => console.error(error))
@@ -38,11 +39,8 @@ export default () => {
     watch,
     formState,
   } = useForm<FormInput>()
-
-  const loc = window.location
-  const endpoint = window.location.host.match(/8082/) ? 'http://localhost:8082/packet' : loc.protocol + '//' + loc.host + '/packet'
   const onSubmit: SubmitHandler<FormInput> = (data) => {
-    handleSend(endpoint, data)
+    handleSend(data)
 
     console.log('Send data')
     console.log(data)

diff --git a/cmd/packemon-api/web/src/monitor/Monitor.tsx b/cmd/packemon-api/web/src/monitor/Monitor.tsx
@@ -3,14 +3,7 @@ import Col from 'react-bootstrap/Col'
 import Table from 'react-bootstrap/Table'
 import Pagination from 'react-bootstrap/Pagination'
 import _ from 'lodash'
-
-const ENDPOINT: string = (() => {
-  const loc = window.location
-  const protocol = loc.protocol === 'https:' ? 'wss:' : 'ws:'
-  return protocol + '//' + loc.host + loc.pathname + 'ws'
-})()
-
-const ENDPOINT_DEV: string = "ws://localhost:8082/ws"
+import { getEndpointWS } from '../endpoint'
 
 type Packet = {
   dstMAC: string
@@ -25,7 +18,7 @@ type Packet = {
 export default () => {
   const [packets, setPackets] = useState<Packet[]>([])
   const socketRef = useRef<WebSocket>()
-  const endpoint = window.location.host.match(/8082/) ? ENDPOINT_DEV : ENDPOINT
+  const endpoint = getEndpointWS()
   const [pageNum, setPageNum] = useState(1)
   const handlePagination = (e: any) => {
     setPageNum(e.target.text)