springboot 使用websocket技术主动给前端发送消息的实现

以下是详细的攻略。

1. WebSocket简介

WebSocket是一种在单个TCP连接上进行全双工通信的协议。它使得客户端和服务器之间可以双向通信，可以实现实时通信、弹幕等功能。

2. springboot使用WebSocket发送消息的实现

2.1 添加依赖

在pom.xml文件中添加WebSocket的依赖：

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

2.2 编写配置类

编写WebSocket的配置类，使得SpringBoot可以支持WebSocket：

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        // 配置WebSocket消息的前缀，统一用“/app”前缀表示
        registry.setApplicationDestinationPrefixes("/app");

        // 配置订阅消息的前缀，统一用“/topic”前缀表示
        registry.enableSimpleBroker("/topic");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // 配置WebSocket的端点，这里使用“/chat”作为端点，客户端连接时使用该端点
        registry.addEndpoint("/chat").withSockJS();
    }
}

2.3 编写Controller类

在Controller中处理消息的发送，以及接收：

@Controller
public class WebSocketController {

    // 使用@MessageMapping来接收客户端发送的消息，同时使用@SendTo来将消息转发给客户端
    @MessageMapping("/sendMsg")
    @SendTo("/topic/msg")
    public String sendMsg(String msg) {
        return msg;
    }

    // 用于和前端建立连接的方法
    @GetMapping("/websocket")
    public String websocket() {
        return "websocket";
    }
}

其中，@MessageMapping用于接收客户端发送的消息，@SendTo则是将消息转发给客户端。这里的“/topic/msg”表示订阅了“/topic/msg”消息的客户端都能够接收到该消息。

2.4 编写前端页面

前端使用websocket连接服务器，发送消息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试WebSocket</title>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.3.0/sockjs.min.js"></script>
</head>
<body>
<input type="text" id="sendMsgValue">
<button onclick="sendMsg()">发送</button>
<div id="msgDiv"></div>

<script>
    var stompClient = null;

    // 建立连接
    function connect() {
        var socket = new SockJS('/chat');
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
            console.log('Connected: ' + frame);
            stompClient.subscribe('/topic/msg', function (response) {
                showMessage(response.body);
            });
        });
    }

    // 断开连接
    function disconnect() {
        if (stompClient !== null) {
            stompClient.disconnect();
        }
        console.log('Disconnected');
    }

    // 发送消息
    function sendMsg() {
        var msg = document.getElementById("sendMsgValue").value;
        stompClient.send("/app/sendMsg", {}, msg);
    }

    // 显示消息
    function showMessage(message) {
        document.getElementById("msgDiv").innerHTML += message + "<br>";
    }

    connect();
</script>
</body>
</html>

其中，通过stomp.js和sockjs实现了WebSocket的连接和消息发送，前端使用“/chat”作为端点建立连接后，订阅了“/topic/msg”消息，用于接收来自服务器推送的信息。

发送消息时，调用stompClient的send方法，传入发送的消息。

至此，完成了向前端发送消息的操作。

3. 示例说明

3.1 示例1

以下代码演示了如何向订阅了“/topic/msg”消息的客户端主动发送消息：

@RestController
@RequestMapping("/websocket")
public class WebSocketController {

    @Autowired
    private SimpMessagingTemplate simpMessagingTemplate;

    @PostMapping("/send")
    public String send(@RequestParam String message) {
        simpMessagingTemplate.convertAndSend("/topic/msg", message);
        return "success";
    }
}

在Controller中使用SimpMessagingTemplate来向订阅了“/topic/msg”消息的客户端发送消息。

3.2 示例2

以下代码演示了如何向指定用户的客户端主动发送消息：

@RestController
@RequestMapping("/websocket")
public class WebSocketController {

    @Autowired
    private SimpMessagingTemplate simpMessagingTemplate;

    @PostMapping("/sendToUser")
    public String sendToUser(@RequestParam String username,
                             @RequestParam String message) {
        simpMessagingTemplate.convertAndSendToUser(username, "/msg", message);
        return "success";
    }
}

在Controller中使用SimpMessagingTemplate的convertAndSendToUser方法，指定要发送消息的用户和频道。注意，此时需要在前端订阅该频道，例如使用“/user/username/msg”来订阅。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：springboot 使用websocket技术主动给前端发送消息的实现 - Python技术站