41 lines
1.1 KiB
JavaScript
41 lines
1.1 KiB
JavaScript
|
|
import React, { useState, useContext, useEffect, useRef } from "react";
|
|
import { GlobalContext} from "./GlobalContext.js";
|
|
import "./PingPong.css";
|
|
|
|
const PingPong = () => {
|
|
const [ count, setCount ] = useState(0);
|
|
const global = useContext(GlobalContext);
|
|
|
|
const onWsMessage = (event) => {
|
|
const data = JSON.parse(event.data);
|
|
switch (data.type) {
|
|
case 'ping':
|
|
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 => 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 }; |