Scribd
Upload
5 views1 page

Core Code

The document is a React component that establishes a WebSocket connection and provides functionality to toggle fullscreen mode. It includes event listeners to log visibility changes and user focus/blur events. The component renders two buttons for opening and closing fullscreen mode.

Uploaded by

ductungpho1005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views1 page

Core Code

The document is a React component that establishes a WebSocket connection and provides functionality to toggle fullscreen mode. It includes event listeners to log visibility changes and user focus/blur events. The component renders two buttons for opening and closing fullscreen mode.

Uploaded by

ductungpho1005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 1

import { useEffect } from "react";

import io from "socket.io-client";


const socket = io("ws://localhost:1234");
const App = () => {
let elem = document.documentElement;

/* View in fullscreen */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) {
/* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) {
/* IE11 */
elem.msRequestFullscreen();
}
}

/* Close fullscreen */
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
/* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
/* IE11 */
document.msExitFullscreen();
}
}
useEffect(() => {
document.addEventListener("visibilitychange", (event) => {
if (document.visibilityState == "hidden") {
console.log("tab is inactive");
}
});
window.addEventListener("blur", () => {
console.log("User switched to another application");
});

window.addEventListener("focus", () => {
console.log("User is back to the website");
});
});

return (
<div>
<button onClick={openFullscreen}>Open Full Screen</button>{" "}
<button onClick={closeFullscreen}>Close screen</button>
</div>
);
};

export default App;

You might also like