Springboot 整合 WebSocket ，利用STOMP协议，前后端整合实战（一）

贱人直接删

序言

websocket ，关于我来讲曾经是老伴侣了。

好久好久从前，我写过两篇websocket 相关的文章。

一篇极简风，最最最根底的方法整开websocket ：

《SpringBoot 整开WebSocket 简朴真战案例》

地点： https://blog.csdn.net/qq_35387940/article/details/93483678

一篇极限风，最最最完美的方法整开websocket （stomp+rabbitmq处理背载）：

《Springboot 整开Websocket，Stomp和谈，操纵rabbitmq做动静代办署理，动静缓存》
地点： https://blog.csdn.net/qq_35387940/article/details/108276136

可是根据近来看民们给我反响状况去看，一个极简没有契合需供，由于看民们固然念简朴，可是也念用stomp。

但是那个极限的呢，又太庞大，看民们没有愿意来整开rabbitmq。

那末，那篇文章的意义便出去了。

注释

本篇内乱容：

1.后端整开websocket （STOMP和谈）
2.群收、指订单收
3.前端简朴页里示例（吸取、收收动静）

当务之急，开端敲代码。

先看下此次真战案例项目构造：

1. pom.xml 中心依靠的导进：

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

复造代码

2.application.yml (我便纯真设置一下端心)

server:
port: 9908

复造代码

3.WebSocketConfig.java

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 JCccc
* @Description EnableWebSocketMessageBroker-注解开启STOMP和谈去传输基于代办署理的动静，此时掌握器撑持利用@MessageMapping
* @Date 2021/6/30 8:53
*/
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
//topic用去播送，user用去完成面对面
config.enableSimpleBroker("/topic", "/user");
}
/**
* 开放节面
* @param registry
*/
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
//注册两个STOMP的endpoint，别离用于播送战面对面
//播送
registry.addEndpoint("/publicServer").withSockJS();
//面对面
registry.addEndpoint("/privateServer").withSockJS();
}
}

复造代码

4.推收动静的真体类 Message.java

/**
* @Author JCccc
* @Description
* @Date 2021/8/20 9:26
*/
public class Message {
/**
* 动静编码
*/
private String code;
/**
* 去自（包管独一）
*/
private String form;
/**
* 来自（包管独一）
*/
private String to;
/**
* 内乱容
*/
private String content;
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getForm() {
return form;
}
public void setForm(String form) {
this.form = form;
}
public String getTo() {
return to;
}
public void setTo(String to) {
this.to = to;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
}

复造代码

5.前端简朴调试页里
① publicExample.html 监听播送动静的测试页里

<html>
<head>
<meta charset="UTF-8">
<title>等体系推动静</title>
<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.0.min.js"
integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I=" crossorigin="anonymous"></script>
<script type="text/javascript">
var stompClient = null;
function setConnected(connected) {
document.getElementById("connect").disabled = connected;
document.getElementById("disconnect").disabled = !connected;
$("#response").html();
}
function connect() {
var socket = new SockJS("http://localhost:9908/publicServer");
stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
setConnected(true);
console.log('Connected: ' + frame);
stompClient.subscribe('/topic/all', function (response) {
var responseData = document.getElementById('responseData');
var p = document.createElement('p');
p.style.wordWrap = 'break-word';
p.appendChild(document.createTextNode(response.body));
responseData.appendChild(p);
});
},{});
}
function disconnect() {
if (stompClient != null) {
stompClient.disconnect();
}
setConnected(false);
console.log("Disconnected");
}
function sendMsg() {
var content = document.getElementById('content').value;
stompClient.send("/all",JSON.stringify({'content': content}));
}
</script>
</head>
<body onload="disconnect()">
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being
enabled. Please enable
Javascript and reload this page!</h2></noscript>
<div>
<div>
<labal>毗连播送频讲</labal>
<button id="connect" onclick="connect();">Connect</button>
<labal>打消毗连</labal>
<button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
</div>
<div id="conversationDiv">
<labal>播送动静</labal>
<input type="text" id="content"/>
<button id="sendMsg" onclick="sendMsg();">Send</button>
</div>
<div>
<labal>领受到的动静:</labal>
<p id="responseData"></p>
</div>
</div>
</body>
</html>

复造代码

简析：

连成一气，我们模仿体系后端给前端推收播送动静，经由过程接心模仿：

TestController.java

/**
* @Author JCccc
* @Description
* @Date 2021/8/20 8:53
*/
@Controller
public class TestController {
@Autowired
public SimpMessagingTemplate template;
/**
* 播送
*
* @param msg
*/
@ResponseBody
@RequestMapping("/pushToAll")
public void subscribe( @RequestBody Message msg) {
template.convertAndSend("/topic/all", msg.getContent());
}
}

复造代码

简析：

我们推收动静，间接用 SimpMessagingTemplate ，
用的是convertAndSend 播送方法推收到关于的主标题问题的天 destination 。
（能够看到实在另有convertAndSendToUser ，没有焦急，前面会道，那是收收给某个毗邻用户的）

间接把项目跑起去，翻开页里开端测试：

我们先面击connect ，毗邻胜利：

能够看到实践上stomp.min.js 终极也是转化成为 ws/wss这类方法胜利毗邻：

挪用测试接心，推收播送动静：

正在console实在也能看到：

播送功用便到那，接下去是面对面。

前端页里：

privateExample.html

<html>
<head>
<meta charset="UTF-8">
<title>聊起去</title>
<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.0.min.js"
integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I=" crossorigin="anonymous"></script>
<script type="text/javascript">
var stompClient = null;
function setConnected(connected) {
document.getElementById("connect").disabled = connected;
document.getElementById("disconnect").disabled = !connected;
$("#response").html();
}
function connect() {
var socket = new SockJS("http://localhost:9908/privateServer");
stompClient = Stomp.over(socket);
stompClient.heartbeat.outgoing = 20000;
// client will send heartbeats every 20000ms
stompClient.heartbeat.incoming = 0;
stompClient.connect({}, function (frame) {
setConnected(true);
console.log('Connected: ' + frame);
stompClient.subscribe('/user/' + document.getElementById('user').value + '/message', function (response) {
var responseData = document.getElementById('responseData');
var p = document.createElement('p');
p.style.wordWrap = 'break-word';
p.appendChild(document.createTextNode(response.body));
responseData.appendChild(p);
});
});
}
function disconnect() {
if (stompClient != null) {
stompClient.disconnect();
}
setConnected(false);
console.log("Disconnected");
}
function sendMsg() {
var headers = {
login: 'mylogin',
passcode: 'mypasscode',
// additional header
'accessToken': 'HWPO325J9814GBHJF933'
};
var content = document.getElementById('content').value;
var to = document.getElementById('to').value;
stompClient.send("/alone", {'accessToken': 'HWPO325J9814GBHJF933'}, JSON.stringify({
'content': content,
'to': to
}));
}
</script>
</head>
<body onload="disconnect()">
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being
enabled. Please enable
Javascript and reload this page!</h2></noscript>
<div>
<div>
<labal>毗连用户</labal>
<input type="text" id="user"/>
<button id="connect" onclick="connect();">Connect</button>
</div>
<div>
<labal>打消毗连</labal>
<button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
</div>
<div id="conversationDiv">
<labal>收收动静</labal>
<div>
<labal>内乱容</labal>
<input type="text" id="content"/>
</div>
<div>
<labal>收给谁</labal>
<input type="text" id="to"/>
</div>
<button id="sendMsg" onclick="sendMsg();">Send</button>
</div>
<div>
<labal>领受到的动静:</labal>
<p id="responseData"></p>
</div>
</div>
</body>
</html>

复造代码

简析：

连成一气，我们模仿体系后端给前端推收面对面动静（指定某个用户），经由过程接心模仿：

/**
* 面对面
*/
@ResponseBody
@RequestMapping("/pushToOne")
public void queue(@RequestBody Message msg) {
System.out.println("进进办法");
/*利用convertAndSendToUser办法，第一个参数为用户id，此时js中的定阅地点为
"/user/" + 用户Id + "/message",此中"/user"是牢固的*/
template.convertAndSendToUser(msg.getTo(), "/message", msg.getContent());
}

复造代码

用的是convertAndSendToUser 推收到指定的用户，关于的主标题问题的天 destination（/message）

或许看到那里，您会觉得很奇异，为何我们推的主题是 /message，可是前端定阅的倒是

"/user/" + 用户Id + "/message"

我们间接看源码：

ok，该当不消多道，代码帮我们本人拼接起去了，跟前端定阅划定规矩连结分歧。

间接跑项目，测试一下：

模仿我们毗邻的用户标识 19901 ，毗邻胜利

操纵postman挪用我们的测试接心，模仿体系指定推收动静到 19901 那小我私家：

然后也给20011收收一下动静：

然后看到对应的用户也能支到对应的动静：

对面推收，播送推收，也曾经终了了。

这类状况便是相称于操纵http接心方法，来撮合后端效劳做动静推收。

实在spring借供给了一些好玩的注解，

@MessageMapping 那个注解是对称于 @EnableWebSocketMessageBroker

也便是道，假如我们操纵@EnableWebSocketMessageBroker ，那末我们正在接心上里实在就可以间接操纵 @MessageMapping。

怎样用？

然后前端代码内里的操纵：

如许我们就能够经由过程前端间接挪用相关接心了：

小我私家觉得实在出有须要操纵那个注解，间接经由过程前端挪用后端效劳代码，我们效劳端去按照Message内里的收收圆、吸取圆、动静规范（面对面、播送）就能够间接完成相关也营业场景了。

ok，该篇便到此。

下一篇，给各人带去怎样打点websocket背载成绩。

免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！

Springboot 整合 WebSocket ，利用STOMP协议 ，前后端整合实战 （一）

Springboot 整合 WebSocket ，利用STOMP协议，前后端整合实战（一）