Websocket connection with spring boot and react.js
I'm trying to connect my react.jsocks client to my spring boot backend web sockets but I can't connect them, it's giving me some errors on the chrome console like this:
chrome console error
I don't have any errors in my Spring Boot part, but there are some warnings like:
Spring Boot Console
Why can't I connect them? My react.js part looks like this:
import background from'../Styles/Background.module.css'
import formdesign from'../Styles/FormDesign.module.css'
import Bounce from 'react-reveal/Bounce';
import cookies from 'js-cookie'
import Menustyle from'../Styles/Menu.module.css'
import {useLocation, useNavigate} from 'react-router-dom';
import { useState ,useEffect } from 'react';
import swal from 'sweetalert';
import Swal from 'sweetalert2'
import { connect } from 'react-redux';
import { Oval } from 'react-loader-spinner';
import {GetWithAuth ,GetWithRefresh,beforeRegister,registerWithMail, beforeLogin} from '../Services/HttpServices';
import { isUserBlockExist } from '../Services/UserPrefs';
import SockJS from 'sockjs-client';
import { over } from 'stompjs';
let number = 1;
const Login = (props)=>{
const navigate = useNavigate();
const location = useLocation();
const [isLoading, setIsLoading] = useState(true);
const [allState,setAllState] = useState({
title:props.title,
message:props.message,
button:props.button,
show:true
});
const beforeLoad = async ()=>{
let sock = new SockJS(`${process.env.REACT_APP_ROOT_URL}/wss`);
let stompClient = over(sock);
stompClient.connect({},function(frame){
console.log("Connected : "+frame);
//stompClient.subscribe("/user-connect/user",this.onPrivateMessage);
});
try{
console.log(process.env.REACT_APP_ROOT_URL);
let response = await GetWithAuth(`${process.env.REACT_APP_ROOT_URL}/auth/route`,"/homepage",props.jwtsession);
if(response.route == "/"){
document.body.className = background.deneme;
props.setJwtSession("");
//localStorage.removeItem("jwtsession");
}
else{
document.body.className = Menustyle.deneme;
}
setIsLoading(false);
navigate(response.route);
}
catch{
window.location.reload();
}
}
const handleClick = ()=>{
if(allState.show === false && number === 1){
setAllState({show:true,message:"Have Account ?",title:"Sign-Up"});
}
else if(allState.show === false && number === 2){
setAllState({show:true,message:"Don't Have Account ?",title:"Login"});
}
}
const submit = async()=>{
if(document.getElementById("password").value.trim().length ==0){
swal({
title: "Password Field Is Required!",
text: "Please Write Your Password",
icon: "error",
button: "Close This Alert",
});
}
else if(document.getElementById("username").value.trim().length ==0){
swal({
title: "Username Field Is Required!",
text: "Please Write Your Username",
icon: "error",
button: "Close This Alert",
});
}
else if(document.getElementById("username").value.trim().length >=15&&allState.title!="Login"){
swal({
title: "Username Can Not More Than 15 Characters",
text: "Please Try Another Username",
icon: "error",
button: "Close This Alert",
});
}
else if(document.getElementById("email")!=null && document.getElementById("email").value.trim().length ==0){
swal({
title: "E-Mail Field Is Required!",
text: "Please Write Your E-Mail",
icon: "error",
button: "Close This Alert",
});
}
else if(allState.title === "Sign-Up"){
let postres = await beforeRegister(`${process.env.REACT_APP_ROOT_URL}/auth/beforeregister`,document.getElementById("username").value.trim(),document.getElementById("email").value,document.getElementById("password").value);
if(postres.created == true){
Swal.fire({
html:`<h1>Please Write The Code We Sent To Your Email</h1>
<input type="text" id="code" class="swal2-input" placeholder="CODE" style="width:50%;">
<button id="send" class="btn btn-success">
SEND
</button><br/><br/>
You Have <strong></strong> seconds.<br/><br/>
`,
timer:90000,
icon: "success",
allowOutsideClick:false,
showCancelButton:true,
didOpen: ()=>{
const content = Swal.getHtmlContainer()
const $ = content.querySelector.bind(content)
const send = $('#send');
const code = $('#code');
send.addEventListener("click",async()=>{
let postres2 = await registerWithMail(`${process.env.REACT_APP_ROOT_URL}/auth/registerwithmail`,code.value.trim().toLowerCase());
if(postres2.created == true){
props.setJwtSession(postres2.accessToken);
//localStorage.setItem("jwtsession",postres2.accessToken);
navigate('/homepage');
Swal.close();
}
else if(postres2.created == false){
Swal.close();
swal({
title: postres2.error,
text: "Please Check And Try Again",
icon: "error",
button: "Close This Alert",
});
}
});
Swal.showLoading();
setInterval(() => {
Swal.getHtmlContainer().querySelector('strong')
.textContent = (Swal.getTimerLeft() / 1000)
.toFixed(0)
}, 100)
}})
}
else{
swal({
title: postres.error,
text: "Please Check And Try Again",
icon: "error",
button: "Close This Alert",
});
}
}
else if(allState.title === "Login"){
let postres = await beforeLogin(`${process.env.REACT_APP_ROOT_URL}/auth/beforelogin`,document.getElementById("username").value.trim(),document.getElementById("password").value);
if(postres.created == true){
Swal.fire({
html:`<h1>Please Write The Code We Sent To Your Email</h1>
<input type="text" id="code" class="swal2-input" placeholder="CODE" style="width:90%; margin-left:0px;">
<button id="send" class="btn btn-success">
SEND
</button>
<button id="close" class="btn btn-secondary">
CLOSE
</button><br/><br/>
You Have <strong></strong> seconds.<br/><br/>
`,
timer:90000,
icon: "success",
allowOutsideClick:false,
didOpen: ()=>{
const content = Swal.getHtmlContainer()
const $ = content.querySelector.bind(content)
const send = $('#send');
const code = $('#code');
send.addEventListener("click",async()=>{
let postres2 = await registerWithMail(`${process.env.REACT_APP_ROOT_URL}/auth/loginwithmail`,code.value.trim().toLowerCase());
if(postres2.created == true){
props.setJwtSession(postres.accessToken.toString());
console.log(postres.accessToken);
navigate('/homepage');
Swal.close();
}
else if(postres2.created == false){
Swal.close();
swal({
title: postres2.error,
text: "Please Check And Try Again",
icon: "error",
button: "Close This Alert",
});
}
});
Swal.showLoading();
setInterval(() => {
Swal.getHtmlContainer().querySelector('strong')
.textContent = (Swal.getTimerLeft() / 1000)
.toFixed(0)
}, 100)
}})
}
else if(postres.created === false && postres.blocked == false){
swal({
title: postres.error,
text: "Please Check And Try Again",
icon: "error",
button: "Close This Alert",
});
console.log(postres);
}
else{
swal({
title: postres.error,
text: "Please Check And Try Again",
icon: "error",
button: "Close This Alert",
});
}
}
}
useEffect(() =>{
beforeLoad();
},[]);
useEffect( ()=>{
setTimeout(() => {
if(allState.show === true && number === 1){
setAllState({show:false,message:"Have Account ?",title:"Sign-Up"});
number = 2;
console.log(allState.message);
}
else if(allState.show === true && number === 2){
setAllState({show:false,message:"Don't Have Account ?",title:"Login"});
number = 1;
}
}, 300);
},[allState]);
if (isLoading) {
return <div className={formdesign.loading}>
<Oval
width="100"
height="100"
color="black"
ariaLabel='loading'
/>
</div>;
}
return(
<div>
<Bounce left opposite when={!allState.show}>
<div className={allState.title =="Login" ? formdesign.formBack : formdesign.formBackSignUp}>
<h1 className={formdesign.Title}>{allState.title}</h1>
<input type="text" name = "username" placeholder={allState.title == 'Login' ? 'Username Or Email' : 'Username'} id='username'></input>
{allState.title =="Sign-Up" &&
<input type="text" name = "email" placeholder="E-Mail" id='email'></input>
}
<input type="password" name = "password" placeholder="Password" id='password'></input>
<input type="button" value={allState.title} onClick = {submit} ></input>
<p>{allState.message} <span style={{color:"blue",cursor:"pointer"}} onClick = {handleClick}>Click Here</span></p>
</div>
</Bounce>
</div>
);}
const mapStateToProps = (state)=>{
return{
jwtsession:state.jwtsession
}
}
const mapDispatchToProps = (dispatch) =>{
return{
setJwtSession: (jwtsession) =>{ dispatch({'type':'SET_JWTSESSION',jwtsession})}
}
}
export default connect(mapStateToProps,mapDispatchToProps) (Login);
And my Spring Boot configuration class:
package com.project.blog.websocket;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfiguration implements WebSocketMessageBrokerConfigurer {
@Value("${blog.app.front}")
private String url;
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/wss").setAllowedOrigins(url).setAllowedOriginPatterns("*").withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.setApplicationDestinationPrefixes("/app");
registry.enableSimpleBroker("/user-connect");
registry.setUserDestinationPrefix("/user");
}
}
Similarly for the network socket controller I wrote this part:
package com.project.blog.websocket;
import com.project.blog.entities.User;
import com.project.blog.repositories.UserRepository;
import com.project.blog.responses.ErrorSuccessResponse;
import lombok.RequiredArgsConstructor;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Controller;
import java.time.LocalDateTime;
import java.util.LinkedList;
import java.util.List;
@Controller
@RequiredArgsConstructor
public class WebSocketController {
private final SimpMessagingTemplate simpMessagingTemplate;
private final UserRepository userRepository;
@MessageMapping("/message")
private ErrorSuccessResponse receiveMessage(String user){
ErrorSuccessResponse errorSuccessResponse = new ErrorSuccessResponse();
errorSuccessResponse.setError("block oldu");
simpMessagingTemplate.convertAndSendToUser(user,"/private",errorSuccessResponse);
return errorSuccessResponse;
}
@Scheduled(fixedDelay = 1000)
private void checkBlocks(){
LocalDateTime now = LocalDateTime.now();
List<User> users = userRepository.findBlockedUsers(now);
users.stream().forEach(user->{
receiveMessage(user.getUsername());
});
}
}
I try to use socks to connect my react.js frontend and spring boot backend but I can't do it
My process.env.REACT_APP_ROOT_URL is: http://localhost:1998 and @Value("${blog.app.front}") Private string url; the value of this part is: http://localhost:3000
