JS如何调用SpringWebSocket服务_JS调用SpringWebSocket服务的完整教程

前端通过STOMP over WebSocket与Spring后端通信，需引入sockjs-client和stompjs库；首先配置Spring WebSocket支持STOMP，定义端点如/ws、消息代理前缀/topic及应用前缀/app；前端使用SockJS连接/ws，通过Stomp.over建立STOMP客户端，连接成功后订阅/topic/greetings主题；调用stompClient.send("/app/hello", {}, JSON.stringify(data))发送消息至后端@Controller类的@MessageMapping方法；后端处理后通过@SendTo广播到/topic/greetings，所有订阅者接收并更新页面；页面卸载时应调用disconnect避免资源泄漏。关键点包括跨域配置、路径一致性、消息格式匹配。

前端通过JavaScript调用Spring WebSocket服务，主要依赖浏览器原生的 WebSocket API 与后端建立双向通信。Spring 提供了基于 STOMP（Simple Text Oriented Messaging Protocol）的 WebSocket 支持，因此前端通常使用 STOMP over WebSocket 的方式来连接和交互。

1. 确保后端已配置 Spring WebSocket + STOMP

在开始 JS 调用前，确认你的 Spring Boot 项目已正确配置 WebSocket 服务。以下是最基本的配置示例：

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

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

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.setApplicationDestinationPrefixes("/app");
        registry.enableSimpleBroker("/topic", "/queue");
    }
}

@Controller
public class WsController {

    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public GreetingMessage greeting(HelloMessage message) throws Exception {
        Thread.sleep(1000);
        return new GreetingMessage("Hello, " + message.getName() + "!");
    }
}

上面配置说明：

• /ws 是 WebSocket 连接端点
• /app/hello 是客户端发送消息的目标路径
• /topic/greetings 是广播消息的订阅主题

2. 前端引入 STOMP.js 并连接 WebSocket

由于原生 WebSocket 不支持 STOMP 协议，需引入 stomp.js 或 @stomp/stompjs 库。

npm install @stomp/stompjs sockjs-client

<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@stomp/stompjs@7.0.0/bundles/stomp.umd.min.js"></script>

const socket = new SockJS('/ws');
const stompClient = Stomp.over(socket);

stompClient.connect({}, function(frame) {
    console.log('Connected: ' + frame);

    // 订阅 /topic/greetings 主题
    stompClient.subscribe('/topic/greetings', function(greeting) {
        const message = JSON.parse(greeting.body);
        console.log('Received: ' + message.content);
        // 更新页面 DOM
        document.getElementById("output").innerHTML += "<br>" + message.content;
    });

}, function(error) {
    console.error('STOMP connection error:', error);
});

3. 发送消息到 Spring 后端

连接成功后，可通过 stompClient.send() 向后端发送消息。

function sendMessage() {
    const msg = { name: "张三" };
    stompClient.send("/app/hello", {}, JSON.stringify(msg));
}

HTML 示例按钮：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

<button onclick="sendMessage()">发送消息</button>
<div id="output"></div>

点击按钮后，前端发送消息 → Spring 处理 → 广播到 /topic/greetings → 所有订阅者收到响应。

4. 处理断开连接与错误

建议在页面卸载时关闭连接，避免资源浪费。

window.onbeforeunload = function() {
    if (stompClient && stompClient.connected) {
        stompClient.disconnect();
    }
};

也可以监听网络中断、重连等状态，增强健壮性。

基本上就这些。只要后端配置好 STOMP 端点，前端用 stomp.js 连接、订阅、发消息，就能实现实时双向通信。不复杂但容易忽略细节，比如跨域、路径前缀、消息格式等，务必核对一致。

以上就是JS如何调用SpringWebSocket服务_JS调用SpringWebSocket服务的完整教程的详细内容，更多请关注php中文网其它相关文章！