前言
参考资料：spring官网
案例代码地址：https://spring.io/guides/gs/messaging-stomp-websocket/
官方文档地址：https://docs.spring.io/spring-framework/reference/web/websocket/stomp/message-flow.html
使用websocket进行简单的通信，功能大致为广播推送全体消息，根据不同用户推送特定消息。
我这次使用后端springboot+前端vue实现websocket功能
一、什么时候使用websocket
官方文档说的很清楚了，协作、游戏、金融方面都会用到实时数据，其他对要求不高的可以用轮询代替。
我这次遇到的需要就是多用户协作。
二、大致需求
用户A新建一个模板，并分享给其他用户B、C使用，当用户B、C查询自己有哪些可用模板时，用户A对模板作了修改，此时用户B、C应该能感知到，不然使用时就会出问题。
三、简单代码实现
3.1 后端代码实现
后端maven依赖：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
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;
/**
* @Author: Ron
* @Create: 2023-09-27 17:44
*/
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic","/user");
config.setApplicationDestinationPrefixes("/app");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/webSocket")
.setAllowedOrigins("*");
}
}
消息处理模块
import org.jeecg.common.api.vo.Result;
import org.jeecg.modules.system.entity.SysTicket;
import org.jeecg.modules.system.mapper.SysTicketMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RestController;
/**
* @Author: Ron
* @Create: 2023-09-27 17:48
*/
@CrossOrigin
@RestController
public class WebsocketController {
@Autowired
private SimpMessagingTemplate messagingTemplate;
@MessageMapping("/hello")
public void greeting() {
messagingTemplate.convertAndSendToUser("ron.yu", "/queue/private", "convertAndSendToUser：Hello World!");
messagingTemplate.convertAndSend("/topic/greetings", "convertAndSend：Hello, Ron!");
}
}
配置文件
server:
port: 8888
servlet:
context-path: /cq
3.2 前端代码
vue
<template>
<div>
<h1>WebSocket Example</h1>
<button @click="connectWebSocket">Connect</button>
<button @click="disconnectWebSocket">Disconnect</button>
<input v-model="message" placeholder="Enter a message" />
<button @click="sendMessage">Send Message</button>
<ul>
<li v-for="(greeting, index) in greetings" :key="index">{{ greeting }}</li>
</ul>
</div>
</template>
<script>
import SockJS from "sockjs-client";
import Stomp from "stompjs";
export default {
data() {
return {
stompClient: null,
message: "",
greetings: [],
username:""
};
},
methods: {
connectWebSocket() {
const socket = new WebSocket("ws://localhost:8888/cq/webSocket"); // 替换成您的WebSocket服务器地址
this.stompClient = Stomp.over(socket);
this.stompClient.connect({}, frame => {
console.log("WebSocket连接成功", frame);
this.stompClient.subscribe("/topic/greetings", greeting => {
// this.greetings.push(greeting.body);
console.log("/topic/greetings");
});
this.stompClient.subscribe(`/user/${this.message}/queue/private`, message => {
// 处理私人消息
// console.log("Received private message:", JSON.parse(message.body));
console.log("Received private message:");
});
});
},
disconnectWebSocket() {
if (this.stompClient) {
this.stompClient.disconnect(() => {
console.log("WebSocket断开连接");
});
}
},
sendMessage() {
if (this.message) {
this.stompClient.send(
"/app/hello",
{},
JSON.stringify({ name: this.message })
);
// this.message = "";
}
}
}
};
</script>
3.3 页面效果展示
四、代码理解
websocket后端核心模块：
①：@EnableWebSocketMessageBroker，是一个标志，它告诉 Spring 该类用于配置和启用 WebSocket 服务，然后你需要在该类中定义实际的 WebSocket 端点和处理逻辑。这个注解使得构建 WebSocket 服务更加方便。通过合理配置消息代理，你可以实现消息的分发、广播和点对点通信等功能。
②：configureMessageBroker，用于配置消息代理，它是 WebSocketMessageBrokerConfigurer 接口中的一个方法。消息代理是 WebSocket 服务中的核心组件之一，它负责将消息从发送方传递到接收方，充当了消息的中转站。
③：config.enableSimpleBroker(“/topic”,“/user”)，启用消息代理，意味着可以使用 “/topic” 和 “/user” 作为消息的目的地，消息将由代理传送到订阅这些目的地的客户端。
④：config.setApplicationDestinationPrefixes(“/app”)，设置应用程序目的地前缀，设置了应用程序目的地的前缀为 “/app”。这意味着客户端可以将消息发送到以 “/app” 开头的目的地，然后消息代理将这些消息路由到相应的消息处理器进行处理。
⑤：registerStompEndpoints，用来定义和配置 WebSocket 端点的重要方法，它允许你指定端点的名称、允许的跨域源，以及其他相关配置。
⑥：registry.addEndpoint(“/webSocket”)，注册了一个名为 “/webSocket” 的 WebSocket 端点。这意味着客户端可以通过 WebSocket 连接到 “/webSocket” 这个端点来进行实时通信。
⑦：.setAllowedOrigins("")*，跨域设置，设置了允许来自任何源的跨域 WebSocket 连接。
⑧：@MessageMapping(“/hello”)，是 Spring Framework 中用于处理 WebSocket 消息映射的注解。它的作用是将客户端发送的消息映射到指定的处理方法，以便在接收到特定消息时执行相应的逻辑。
⑨：private SimpMessagingTemplate messagingTemplate;，是 Spring Framework 中的一个类，它用于发送消息到 WebSocket 和基于消息的 STOMP 端点，以实现实时通信。
⑩：***点对点通信-convertAndSendToUser ***，convertAndSendToUser 方法允许你向指定的用户发送消息，这是一种点对点通信的方式。你可以指定用户名和目标路径，以便将消息发送到特定用户的特定目标。如图，向名为 “ron.yu” 的用户发送了一条消息，目标路径为 “/queue/private”，这是一种点对点通信。
***广播通信-convertAndSend ***，convertAndSend 方法允许你向指定的主题广播消息，这是一种一对多通信的方式。多个订阅了相同主题的客户端都将收到该消息。使用 convertAndSend 方法向主题 “/topic/greetings” 广播了一条消息，这是一种广播通信。
五、什么是websocket的端点？
WebSocket 端点（WebSocket Endpoint）是 WebSocket 通信的入口点或终端。它是客户端和服务器之间建立 WebSocket 连接的目标位置，充当了通信的起点和终点。WebSocket 端点定义了 WebSocket 通信的具体位置和协议细节。
WebSocket 端点通常具有一个唯一的名称或路径，客户端可以使用这个名称或路径来建立与端点的连接。例如，一个 WebSocket 端点的路径可以是 “/chat”，客户端可以通过 WebSocket 连接到 “ws://example.com/chat” 来与该端点通信。文章来源：https://www.toymoban.com/news/detail-730510.html
总结
这些代码只是简单实现了websocket的不同用户消息推送，并没有做权限检验复杂的功能。
刚写websocket，还是去官网找文档效率更高。文章来源地址https://www.toymoban.com/news/detail-730510.html
到了这里，关于websocket使用案例（前后端springboot+vue）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
