前端通过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 服务。以下是最基本的配置示例：
添加依赖（Maven）：
org.springframework.boot
spring-boot-starter-websocket
启用 WebSocket 配置类：
@Configuration@EnableWebSocketMessageBrokerpublic 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：
@Controllerpublic 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 库。
安装 stompjs（推荐使用 npm）：
npm install @stomp/stompjs sockjs-client
或直接使用 CDN 引入：
JavaScript 连接并使用 STOMP：
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 += "
" + message.content; });}, function(error) { console.error('STOMP connection error:', error);});
3. 发送消息到 Spring 后端
连接成功后，可通过 stompClient.send() 向后端发送消息。
示例：发送消息触发 /app/hello
function sendMessage() { const msg = { name: "张三" }; stompClient.send("/app/hello", {}, JSON.stringify(msg));}
HTML 示例按钮：
点击按钮后，前端发送消息 → Spring 处理 → 广播到 /topic/greetings → 所有订阅者收到响应。
4. 处理断开连接与错误
建议在页面卸载时关闭连接，避免资源浪费。
window.onbeforeunload = function() { if (stompClient && stompClient.connected) { stompClient.disconnect(); }};
也可以监听网络中断、重连等状态，增强健壮性。
基本上就这些。只要后端配置好 STOMP 端点，前端用 stomp.js 连接、订阅、发消息，就能实现实时双向通信。不复杂但容易忽略细节，比如跨域、路径前缀、消息格式等，务必核对一致。
以上就是JS如何调用SpringWebSocket服务_JS调用SpringWebSocket服务的完整教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1538136.html
微信扫一扫 
支付宝扫一扫 
