You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
2.8 KiB
121 lines
2.8 KiB
import { useCallback, useEffect } from "react";
|
|
import Stomp from "webstomp-client";
|
|
import SockJS from "sockjs-client";
|
|
import { proxy } from "../package.json";
|
|
|
|
import logo from "./logo.svg";
|
|
import "./App.css";
|
|
|
|
let stomp;
|
|
|
|
const connect = async (token) => {
|
|
if (stomp != null) return;
|
|
let url = "/api/ws";
|
|
let message = "Connect to Websocket";
|
|
// webpack-dev-server also uses sockjs-client;
|
|
// default proxy may incorrectly route requests
|
|
// resulting in transport switch,
|
|
// which is slow on https.
|
|
//
|
|
// Hence, we cannot rely on default proxy.
|
|
// Requests should be sent directly to a websocket.
|
|
if (process.env.NODE_ENV !== "production") {
|
|
url = `${proxy}${url}`;
|
|
message += " Directly";
|
|
}
|
|
console.info(message);
|
|
const sock = new SockJS(url);
|
|
stomp = Stomp.over(sock);
|
|
|
|
// disable stomp logging
|
|
stomp.debug = (msg) => {};
|
|
|
|
stomp.connect(
|
|
// { "X-Authorization": token.split(".").slice(0, 2).join(".") + ".alkdjalskdjals" },
|
|
{ "Authorization": `Bearer ${token}` },
|
|
(frame) => {
|
|
console.log("Connected", frame);
|
|
|
|
const requestUrl = "/app/simple";
|
|
let params = {
|
|
tratata: 1,
|
|
gratata: 0,
|
|
};
|
|
|
|
stomp.subscribe("/user/simple", (results) => {
|
|
console.log(`msg from server: ${results.body}`);
|
|
});
|
|
|
|
stomp.send(requestUrl, JSON.stringify(params));
|
|
},
|
|
(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;
|