什么是stomp
STOMP(Simple(or Streaming)Text Orientated Messaging Protocol)是一个简单的文本协议,它定义了客户端和消息代理之间进行通信的格式。它是一种可互操作的协议,因为许多不同的消息代理和客户端都实现了它。 STOMP提供了一种可靠的,异步的消息传递模型,它适用于在异构系统之间进行通信,例如在使用不同编程语言编写的系统之间进行通信。 STOMP协议由于其简单性和可互操作性而变得越来越流行。
代码示例大纲
后端发布socket消息订阅频道
前端连接后端socket
一个前端发送消息,多个前端同时收到消息
后端代码
启用websocket "/endpointWisely",生成订阅频道“/topic”
package com.websocket;
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;
/**
* describe
*
* @author huangjuan
* @date 2023/2/20 16:21
*/
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfiguration implements WebSocketMessageBrokerConfigurer {
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/endpointWisely").withSockJS();
}
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/topic");
}
}
springmvc view /ws映射到ws.html
package com.websocket;
import org.springframework.context.annotation.Configuration;
import org.springframework.util.ResourceUtils;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
/**
* describe
*
* @author huangjuan
* @date 2023/2/21 9:31
*/
@Configuration
public class WebMvcConfig extends WebMvcConfigurationSupport {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/ws").setViewName("ws.html");
registry.addViewController("/index").setViewName("index.html");
}
@Override
protected void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/css/**").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX + "/static/css/");
registry.addResourceHandler("/js/**").addResourceLocations(ResourceUtils.CLASSPATH_URL_PREFIX + "/static/js/");
super.addResourceHandlers(registry);
}
}
前端请求方法“/welcome”
package com.websocket;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
/**
* describe
*
* @author huangjuan
* @date 2023/2/21 9:19
*/
@Controller
public class WsController {
@MessageMapping("/welcome")
@SendTo("/topic/getResponse")
public WiselyResponse say(WiselyMessage wiselyMessage) throws InterruptedException {
Thread.sleep(3000);
return new WiselyResponse("Welcome, " + wiselyMessage.getName() + "!");
}
}
相关bean
package com.websocket;
/**
* describe
*
* @author huangjuan
* @date 2023/2/21 9:22
*/
public class WiselyMessage {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
package com.websocket;
/**
* describe
*
* @author huangjuan
* @date 2023/2/21 9:19
*/
public class WiselyResponse {
private String responseMessage;
public WiselyResponse(String responseMessage) {
this.responseMessage = responseMessage;
}
public String getResponseMessage() {
return responseMessage;
}
public void setResponseMessage(String responseMessage) {
this.responseMessage = responseMessage;
}
}
前端页面
连接、发送消息到频道
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Spring boot + Websocket 广播测试</title>
</head>
<body onload="disconnect()">
<noscript>
<h2 style="color: #ff0000">貌似你的浏览器不支持websocket</h2>
</noscript>
<div>
<div>
<button id="connect" onclick="connect()">连接</button>
<button id="disconnect" onclick="disconnect()" disabled="disabled">断开连接</button>
</div>
<div id="conversationDiv">
<label>输入你的名字</label><input type="text" id="name" />
<button id="sendName" onclick="sendName()">发送</button>
<p id="response"></p>
</div>
</div>
</body>
<script src="/js/sockjs.min.js"></script>
<script src="/js/stomp.min.js"></script>
<script src="/js/jquery.min.3.2.1.js"></script>
<script type="text/javascript">
var stompClient = null;
function setConnected(connected) {
document.getElementById("connect").disabled= connected;
document.getElementById("disconnect").disabled = !connected;
document.getElementById("conversationDiv").style.visibility = connected?'visible':'hidden';
}
function connect() {
var socket = new SockJS("/endpointWisely");
stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
setConnected(true);
console.log("connected!" + frame)
stompClient.subscribe("/topic/getResponse", function (response) {
console.log(response)
showResponse(JSON.parse(response.body).responseMessage)
});
});
}
function disconnect() {
if (stompClient != null) {
stompClient.disconnect();
}
setConnected(false);
console.log("disconnected!")
}
function showResponse(message) {
var response = document.getElementById("response");
response.innerHTML=message;
}
function sendName() {
var name = document.getElementById("name").value;
alert(name)
stompClient.send("/welcome", {}, JSON.stringify({'name': name}));
}
</script>
</html>
引用的js