import { useCallback, useEffect } from "react";
|
|
import Stomp from "webstomp-client";
|
|
import SockJS from "sockjs-client";
|
|
import logo from "./logo.svg";
|
|
import "./App.css";
|
|
|
|
let stomp
|
|
|
|
const connect = async (token) => {
|
|
if (stomp != null) return;
|
|
console.info("Connect to Websocket");
|
|
const sock = new SockJS("/api/ws");
|
|
stomp = Stomp.over(sock);
|
|
|
|
stomp.connect(
|
|
{"X-Authorization": token},
|
|
(frame) => {
|
|
console.log("Connected", frame);
|
|
|
|
const requestUrl = "/app/simple";
|
|
let params = {
|
|
tratata: 1,
|
|
gratata: 0
|
|
}
|
|
stomp.send(
|
|
requestUrl,
|
|
JSON.stringify(params)
|
|
);
|
|
stomp.subscribe("/user/simple", (results, errors)=>{
|
|
console.log("results: ", results);
|
|
console.log("errors: ", errors);
|
|
});
|
|
|
|
},
|
|
error => {
|
|
console.error("Disconnected: ", error);
|
|
}
|
|
);
|
|
}
|
|
|
|
function App({ keycloak }) {
|
|
const fetchFromApi = useCallback(async (url) => {
|
|
const response = await fetch(url, {
|
|
headers: {
|
|
Authorization: `Bearer ${keycloak.token}`,
|
|
},
|
|
});
|
|
if (response.ok) {
|
|
alert(await response.text());
|
|
} else {
|
|
console.error(response.statusText);
|
|
}
|
|
}, [keycloak.token]);
|
|
|
|
useEffect(() => {
|
|
connect(keycloak.token);
|
|
}, [keycloak.token]);
|
|
|
|
return (
|
|
<div className="App">
|
|
<header className="App-header">
|
|
<img src={logo} className="App-logo" alt="logo" />
|
|
<p>
|
|
Edit <code>src/App.js</code> and save to reload.
|
|
</p>
|
|
<span
|
|
className="App-link"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
fetchFromApi("/api/userinfo");
|
|
}}
|
|
>
|
|
Get user email
|
|
</span>
|
|
<br />
|
|
<span
|
|
className="App-link"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
fetchFromApi("/api/users");
|
|
}}
|
|
>
|
|
Get all users
|
|
</span>
|
|
<br />
|
|
<span
|
|
className="App-link"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
keycloak.logout({
|
|
redirectUri: "http://localhost:3000",
|
|
});
|
|
}}
|
|
>
|
|
Logout
|
|
</span>
|
|
</header>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|