springboot集成websocket
简介
STOMP的全称是Simple (or Streaming) Text Orientated Messaging Protocol，一种简单的流式文本传输协议。对于不支持websocket的浏览器我们需要通过STOMP来兼容，兼容的需要俩个组件，一个是前端需要的SockJs，一个是后端需要的WebSocketMessageBroker。SockJs一种让前端可以支持socket通信的技术解决方案，WebSocketMessageBroker是基于消息组件实现的一种通信协议。
实现
一、在后端springboot服务中添加依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
<version>2.2.6.RELEASE</version>
</dependency>
二、添加websocketConfig
import lombok.extern.slf4j.Slf4j;
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;
/**
* @author liqiang
*/
@Slf4j
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
// 增加一个后端服务端点
registry.addEndpoint("/socket").setAllowedOrigins("*").withSockJS();
// 增加一个前端服务端点
registry.addEndpoint("/wsuser").setAllowedOrigins("*").withSockJS();
// 配置客户端尝试连接地址
// registry.addEndpoint("/ws").setAllowedOrigins("*").withSockJS();
}
/**
* 定义服务器端点请求和订阅前缀
* @param registry
*/
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
// 客户端订阅路径前缀
registry.enableSimpleBroker("/sub", "/user");
// 服务端点请求前缀
registry.setApplicationDestinationPrefixes("/request");
// 设置广播节点
/*registry.enableSimpleBroker("/topic", "/user");
// 客户端向服务端发送消息需有/app 前缀
registry.setApplicationDestinationPrefixes("/app");*/
// 指定用户发送（一对一）的前缀 /user/
registry.setUserDestinationPrefix("/user/");
}
}
解释：
1、
registry.addEndpoint("/socket").setAllowedOrigins("*").withSockJS();
addEndpoint添加一个端点，用于前端创建socket连接，在示例中我们创建了俩个端点，这里传差的使用互补影响，不如我发送的时候创建链接使用的是socket端点，而接收信息的时候使用的wsuser端点，这样也是可以互通信息的。
setAllowedOrigins(“*”)这个是设置跨域的。
2、
registry.enableSimpleBroker("/sub", "/user");
设置客户端订阅的前缀
registry.setApplicationDestinationPrefixes("/request");
设置前端请求后端发送信息的前缀
registry.setUserDestinationPrefix("/user/");
设置一对一转发信息时的用户前缀
三、实现广播方式
1、前端代码
1.1 发送信息前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>websocket STOMP</title>
</head>
<body>
websocket兼容STOMP测试11<br>
<div>
<div>
<button id = "connect" onclick="connect()">连接</button>
<button id = "disconnect" disabled="disabled" onclick="disconnect()">断开连接</button>
</div>
<div id = "conversationDiv">
<p>
<label>发送消息内容</label>
</p>
<p>
<textarea id="message" rows = "5"></textarea>
</p>
<p>
<button id = "sendMsg" onclick="sendMessage()">发送</button>
</p>
<p id = "response">
</p>
</div>
<a href="#" target="/websocket-receive">跳转到消息接收页</a>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
<script type="text/javascript">
var stompClient = null;
// 设置连接
function setConnected(connected) {
$("#connect").attr({"disabled": connected});
$("#disconnect").attr({"disabled": !connected});
if (connected) {
$("#conversationDiv").show();
} else {
$("#conversationDiv").hide();
}
$("#response").html("")
}
function connect() {
// 定义请求服务器的端点
var socket = new SockJS('/socket');
// stomp客户端
stompClient = Stomp.over(socket);
// 连接服务器端点
stompClient.connect({}, function (frame) {
// 建立连接后的回调
setConnected(true);
})
}
// 断开socket连接
function disconnect() {
if (stompClient != null) {
stompClient.disconnect();
}
setConnected(false);
console.log("Disconnected");
}
// 向/request/send服务端发送消息
function sendMessage() {
var message = $("#message").val();
// 发送消息到"/request/send"，其中/request是服务器定义的前缀
// 而/send则是@MessageMapping所配置的路径
stompClient.send("/request/send", {}, message);
}
connect();
</script>
</body>
</html>
1.2接收信息前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>websocket-stomp-receive</title>
</head>
<body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
<script type="text/javascript">
var noticeSocket = function () {
// 连接服务器端点
var s = new SockJS('/socket');
//客户端
var stompClient = Stomp.over(s);
stompClient.connect({}, function () {
console.log("notice socket connected ！");
// 订阅消息地址
stompClient.subscribe('/sub/chat', function (data) {
$('#receive').html(data.body);
});
});
};
noticeSocket();
</script>
<h1><span id="receive">等待接收消息</span></h1>
</body>
</html>
解释：
在前端代码中主要的发送信息和接收信息的部分在js中，如下截取出来：
var stompClient = null;
// 设置连接
function connect() {
// 定义请求服务器的端点
var socket = new SockJS('/socket');
// stomp客户端
stompClient = Stomp.over(socket);
// 连接服务器端点
stompClient.connect({}, function (frame) {
// 建立连接后的回调，这个是设置连接状态的
setConnected(true);
})
}
// 断开socket连接
function disconnect() {
if (stompClient != null) {
stompClient.disconnect();
}
setConnected(false);
console.log("Disconnected");
}
// 向/request/send服务端发送消息
function sendMessage() {
var message = $("#message").val();
// 发送消息到"/request/send"，其中/request是服务器定义的前缀
// 而/send则是@MessageMapping所配置的路径
stompClient.send("/request/send", {}, message);
}
connect();
var noticeSocket = function () {
// 连接服务器端点
var s = new SockJS('/socket');
//客户端
var stompClient = Stomp.over(s);
stompClient.connect({}, function () {
console.log("notice socket connected ！");
// 订阅消息地址，这里的/sub是在配置里设置的sub前缀，/sub/chat是后端服务代码中@SendTo注解消息路由到的订阅路径中
stompClient.subscribe('/sub/chat', function (data) {
$('#receive').html(data.body);
});
});
};
noticeSocket();
后端服务代码
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.annotation.Resource;
import java.security.Principal;
/**
* @author
*/
@Controller
@RequestMapping("/device/ws")
@Api(tags = "WebsocketController")
public class WebsocketController {
private final Logger logger = LoggerFactory.getLogger(WebsocketController.class);
@MessageMapping("/send")
@SendTo("/sub/chat")
public String sendMessage(String value) {
logger.info("发送消息内容：{}", value);
return value;
}
/**
* 测试发送广播消息的前端
* @return
*/
@GetMapping("/test")
public String test() {
return "request";
}
/**
* 测试接受广播消息的前端
* @return
*/
@GetMapping("/user")
public String user() {
return "user";
}
}
@MessageMapping注解的/send就是前端发送时路径的一部分，再加上服务前缀request，就是前端发送信息的完整路径/request/send.
@SendTo注解的路径是将要消息路由到的路径，正好是前端订阅的路径。
发送过来的消息可以在这里进行整理或处理后再转发出去
实现一对一发送
前端代码
发送信息的前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>websocket STOMP</title>
</head>
<body>
websocket兼容STOMP测试11<br>
<div>
<div>
<button id = "connect" onclick="connect()">连接</button>
<button id = "disconnect" disabled="disabled" onclick="disconnect()">断开连接</button>
</div>
<div id = "conversationDiv">
<p>
<label>发送给</label>
</p>
<p>
<input id="user">
</p>
<p>
<label>发送消息内容</label>
</p>
<p>
<textarea id="message" rows = "5"></textarea>
</p>
<p>
<button id = "sendMsg" onclick="sendMessage()">发送</button>
</p>
<p id = "response">
</p>
</div>
<a href="#" target="/websocket-receive">跳转到消息接收页</a>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
<script type="text/javascript">
var stompClient = null;
// 设置连接
function setConnected(connected) {
$("#connect").attr({"disabled": connected});
$("#disconnect").attr({"disabled": !connected});
if (connected) {
$("#conversationDiv").show();
} else {
$("#conversationDiv").hide();
}
$("#response").html("")
}
function connect() {
// 定义请求服务器的端点
var socket = new SockJS('/wsuser');
// stomp客户端
stompClient = Stomp.over(socket);
// 连接服务器端点
stompClient.connect({}, function (frame) {
// 建立连接后的回调
setConnected(true);
})
}
// 断开socket连接
function disconnect() {
if (stompClient != null) {
stompClient.disconnect();
}
setConnected(false);
console.log("Disconnected");
}
// 向/request/send服务端发送消息
function sendMessage() {
var message = $("#message").val();
var user = $("#user").val();
// 发送消息到"/request/send"，其中/request是服务器定义的前缀
// 而/send则是@MessageMapping所配置的路径
var messageSend = user + ": " + message
stompClient.send("/request/sendToUser", {}, messageSend);
}
connect();
</script>
</body>
</html>
stompClient.send 把信息发送到后端，
/requst 是服务端统一的前缀路径
/sendUser 是@MessageMaping的路径
接收信息的前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>websocket-stomp-receive</title>
</head>
<body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
<script type="text/javascript">
var noticeSocket = function () {
// 连接服务器端点
var s = new SockJS('/wsuser');
//客户端
var stompClient = Stomp.over(s);
stompClient.connect({}, function () {
console.log("notice socket connected ！");
// 订阅消息地址，
stompClient.subscribe('/sub/admin/queue/customer', function (data) {
console.log("接受到的消息："+data)
$('#receive').html(data.body);
});
});
};
noticeSocket();
</script>
<h1><span id="receive">等待接收消息</span></h1>
</body>
</html>
解释：
// 订阅消息地址，
stompClient.subscribe('/sub/admin/queue/customer', function (data) {
console.log("接受到的消息："+data)
$('#receive').html(data.body);
});
/sub/admin/queue/customer
/sub 是接收信息的订阅的前缀
/admin 是指定的user
/queue/customer 是转发信息的destination，目的地
后端服务代码
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.annotation.Resource;
import java.security.Principal;
/**
* @author
*/
@Controller
@RequestMapping("/device/ws")
@Api(tags = "WebsocketController")
public class WebsocketController {
private final Logger logger = LoggerFactory.getLogger(WebsocketController.class);
@Resource
private SimpMessagingTemplate simpMessagingTemplate;
@MessageMapping("/sendToUser")
public void sendToUser(Principal principal, String body,String token) {
// String srcUser = principal.getName();
System.out.println("传入的token是："+token);
String[] args = body.split(": ");
String desUser = args[0];
String message = String.format("【%s】给你发来消息：%s", "mali", args[1]);
// 发送到用户和监听地址
simpMessagingTemplate.convertAndSendToUser(desUser, "/queue/customer", message);
}
/**
* 测试发送指定用户的前端
* @return
*/
@GetMapping("/sendUser")
public String sendUser() {
return "sendUser";
}
/**
* 接受指定用户的前端
* @return
*/
@GetMapping("/userId")
public String userId() {
return "userId";
}
}
@MessageMapping("/sendToUser")
public void sendToUser(Principal principal, String body,String token) {
// String srcUser = principal.getName();
System.out.println("传入的token是："+token);
String[] args = body.split(": ");
String desUser = args[0];
String message = String.format("【%s】给你发来消息：%s", "mali", args[1]);
// 发送到用户和监听地址
simpMessagingTemplate.convertAndSendToUser(desUser, "/queue/customer", message);
}
这个方法正是前端发送消息的路径/sendToUser，路由消息的时候使用simpMessageTemplate.convertAndToUser,destUser是前端传过来的，
/queue/customer也是用户订阅的目的地址，发送的消息是message