47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import React, { useState, useContext, useEffect, useRef } from "react";
|
|
import { GlobalContext } from "./GlobalContext";
|
|
import "./PingPong.css";
|
|
|
|
const PingPong: React.FC = () => {
|
|
const [count, setCount] = useState<number>(0);
|
|
const global = useContext(GlobalContext);
|
|
|
|
const onWsMessage = (event: MessageEvent) => {
|
|
const data = JSON.parse(event.data as string);
|
|
switch (data.type) {
|
|
case "ping":
|
|
if (global.ws) {
|
|
global.ws.send(JSON.stringify({ type: "pong", timestamp: data.ping }));
|
|
}
|
|
setCount(count + 1);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
const refWsMessage = useRef(onWsMessage);
|
|
|
|
useEffect(() => {
|
|
refWsMessage.current = onWsMessage;
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!global.ws) {
|
|
return;
|
|
}
|
|
const cbMessage = (e: MessageEvent) => refWsMessage.current(e);
|
|
global.ws.addEventListener("message", cbMessage);
|
|
return () => {
|
|
global.ws.removeEventListener("message", cbMessage);
|
|
};
|
|
}, [global.ws, refWsMessage]);
|
|
|
|
return (
|
|
<div className="PingPong">
|
|
Game {global.gameId}: {global.name} {global.ws ? "has socket" : "no socket"} {count} pings
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { PingPong };
|