Hi I’m trying to send and receive videos through a web socket connection
The html code runs properly, connects and receives photos
But the one that’s made of react doesn’t work
It’s a code that’s made of reactants, and it’s when you press the connect button
This is the reaction when you squeeze it with html
It works really well when it’s salty with html
This is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Display from WebSocket</title>
<script src="https://cdn.jsdelivr.net/npm/sockjs-client/dist/sockjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/stompjs/lib/stomp.min.js"></script>
<script>
var sock, stompClient;
function connect() {
sock = new SockJS('http://localhost:8080/websocket');
stompClient = Stomp.over(sock);
stompClient.connect({}, function(frame) {
stompClient.subscribe('/topic/frame', function(message) {
var frameData = JSON.parse(message.body);
document.getElementById("imageDisplay").src = 'data:image/png;base64,' + frameData.imageBase64;
});
});
}
function disconnect() {
if (stompClient) {
stompClient.disconnect();
}
console.log("Disconnected");
}
</script>
</head>
<body>
<h2>Image Display from WebSocket</h2>
<button onclick="connect()">Connect</button>
<button onclick="disconnect()">Disconnect</button>
<br><br>
<img id="imageDisplay" alt="Image from Server" />
</body>
</html>
And this is react code
import { useEffect, useState } from 'react';
import { Accuracy } from '../AnalysisData/Accuracy';
import SockJS from 'sockjs-client';
import { Stomp } from '@stomp/stompjs';
const FileAnalysisContent = () => {
const sock = new SockJS('http://localhost:8080/websocket');
const stompClient = Stomp.over(sock);
const [uploadVideo, setUploadVideo] = useState();
const [getAnalysis, setGetAnalysis] = useState(false);
const [exerciseSort, setExerciseSort] = useState('');
const connect = () => {
stompClient.connect({}, (frame) => {
stompClient.subscribe('/topic/frame', (message) => {
var frameData = JSON.parse(message.body);
document.getElementById('imageDisplay').src =
'data:image/png;base64,' + frameData.imageBase64;
});
});
};
const disconnect = () => {
if (stompClient) {
stompClient.disconnect();
}
console.log('Disconnected');
};
I just brought the part about the web socket
Let me know if anyone knows the problem
Nothing pops up on the console of the spring boot
It’s not a security issue. I’m setting the security level to the lowest, so that every connection doesn’t have to be authenticated
this is websocketconfig code in spring boot
package com.example.capstone.config;
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 WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/websocket")
.setAllowedOriginPatterns("*")
.withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/topic");
registry.setApplicationDestinationPrefixes("/app");
}
}
I’ve been looking for it for a week and it can’t fix it. Anyone who’s had the same problem as me, can you help me