Reactjs 实现WebSocket的问题（Spring后端/React前端）

我正在尝试制作一个实时web应用程序（一个虚拟多人棋盘游戏）。我从HTTPs请求开始，但现在正尝试切换到WebSocket。我使用的是React前端和Spring引导后端。我现在意识到我需要创建WebSocket，但我在实现它们时遇到了困难

在react中使用标准websocket对象对于测试服务器（echo.websocket.org）来说效果很好，但大多数在线指南似乎建议使用STOMP端点。如果我在后端使用STOMP端点，我似乎无法使用通用websocket对象。考虑到我想要发送给所有连接到服务器的客户端的数据是一个小数组（例如播放器的坐标），STOMP是正确的协议还是我可以简化它

前端反应组件的一部分

import React from 'react';
import Stomp from 'stompjs';

componentDidMount() {

    const ws = ("ws://localhost:8080/player");
    var client = Stomp.client(ws);
    client.connect({}, function() {
        client.send("/location/update", {}, "coord: [3,2]");
    });
}

后端的相关控制器

@Controller
public class playerController {

public Player b = new Player("a", 1, 1, 1);

@MessageMapping("/player/location/update")
@SendTo("/playerLocation")
public int[] validClick(String value) throws Exception {
    Thread.sleep(1000);

    JSONObject temp = new JSONObject(value);
    JSONArray val = temp.getJSONArray("coord");
    int[] coord = {val.getInt(0), val.getInt(1)};
    b.updateLocation(coord);

    int[] newCoord = b.getLocation();
    System.out.println(newCoord[0] + "," + newCoord[1]);
    return b.getLocation();
}

配置文件：WebsocketConfig.java

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
    config.enableSimpleBroker("/playerLocation");
    config.setApplicationDestinationPrefixes("/api");
}

@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/player").withSockJS();
}

---

一切都可以正常编译，但在浏览器中查看前端的network developer工具时，websocket出现404错误，无法连接。这似乎表明后端是问题所在，但我不确定。非常感谢您的建议。

最后我解决了这个问题，我们的WebSocket的格式实际上是正确的。问题是我们的文件结构不正确（因此webSocketConfig.java在错误的包中），而Pom.xml是错误的。我们对SpringWebSocket有依赖关系，而不是SpringBootWebSocket，同样，在重新排列文件结构时，我们在包安排中引入了错误

---

我对任何遇到类似问题的人的建议是：按照教程了解正确的文件和包结构，然后尝试调整您的设置以匹配。

您在应用程序前面加上“/api”，但我看不到您在其他任何地方使用该前缀。@Seraph我尝试过在ws（localhost:8080/api/player）中插入/api在client.send（/api/location/update）中，仍然是404。你建议去哪里？