93 lines
2.0 KiB
JavaScript
93 lines
2.0 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { io } from "socket.io-client";
|
|
|
|
function useInput({ type }) {
|
|
const [value, setValue] = useState("");
|
|
const input = (
|
|
<input
|
|
|
|
value={value}
|
|
onChange={(e) => setValue(e.target.value)}
|
|
type={type}
|
|
/>
|
|
);
|
|
return [value, input];
|
|
}
|
|
|
|
function App() {
|
|
const [ENDPOINT, setEndpoint] = useInput({ type: "text" });
|
|
const [connected, setConnected] = useState(false);
|
|
const [emit, setEmit] = useInput({ type: "text" });
|
|
const [emitMsg, setEmitMsg] = useInput({ type: "text" });
|
|
const [listenMsg, setListenMsg] = useState(null);
|
|
const [listen, setListen] = useInput({ type: "text" });
|
|
const [socket, setScoket] = useState("");
|
|
const [responseListen, setResponseListen] = useState("");
|
|
const [responseEmit, setResponseEmit] = useState("");
|
|
|
|
|
|
|
|
const handleConnection = async () => {
|
|
// setEndpoint();
|
|
|
|
await setScoket(io(ENDPOINT))
|
|
setTimeout(() => {
|
|
if (socket) {
|
|
setConnected(true)
|
|
} else {
|
|
setConnected(false)
|
|
}
|
|
}, 100);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
};
|
|
const emitMessage = async () => {
|
|
const msg = await socket.emit(emit,emitMsg)
|
|
setResponseEmit(msg)
|
|
}
|
|
const listenOnMessage = () => {
|
|
socket.on(listen, (res) => {
|
|
setResponseListen(res)
|
|
})
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<p>ENTER THE ENDPOINT</p>
|
|
{setEndpoint} -> {ENDPOINT}
|
|
<br />
|
|
<button onClick={handleConnection}>CLICK HERE TO TEST</button>
|
|
{
|
|
connected
|
|
? <>
|
|
<p>CONNECTED</p>
|
|
<br/>
|
|
|
|
<div>
|
|
{setEmit} -> emit {emit}
|
|
{
|
|
emit ? setEmitMsg : ""
|
|
}
|
|
<button onClick={emitMessage}>CLICK HERE TO EMIT</button>
|
|
</div>
|
|
<div>
|
|
{setListen} -> listen on {listen}
|
|
<button onClick={listenOnMessage}>CLICK HERE TO LISTEN ON</button>
|
|
<p>{ responseListen}</p>
|
|
</div>
|
|
</>
|
|
: ""
|
|
}
|
|
|
|
<p>
|
|
</p>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default App;
|