前端测试springboot websocket订阅示例代码

以下是一个前端测试Spring Boot WebSocket订阅示例代码：

var socket = new WebSocket('ws://localhost:8080/chat');

socket.onopen = function(event) {
  console.log('WebSocket is connected.');
};

socket.onmessage = function(event) {
  console.log('Received message: ' + event.data);
};

socket.onclose = function(event) {
  console.log('WebSocket is closed.');
};

// 订阅聊天室
socket.send(JSON.stringify({
  'type': 'subscribe',
  'room': 'chatroom'
}));

// 发送消息
socket.send(JSON.stringify({
  'type': 'message',
  'room': 'chatroom',
  'content': 'Hello, world!'
}));

这段代码创建了一个WebSocket连接，并订阅了名为“chatroom”的聊天室。它还发送了一条消息到该聊天室。你可以根据自己的需求修改代码。

相关问题

springboot 动态websocket

Spring Boot 支持使用 Spring WebSocket 模块来实现 WebSocket 功能。在 Spring WebSocket 中，我们可以通过实现 WebSocketHandler 接口来处理 WebSocket 请求，也可以使用 @Controller 注解和 @MessageMapping 注解来处理 WebSocket 请求。

动态 WebSocket 可以通过在后端使用 WebSocketSession 对象动态向前端推送数据。我们可以在后端创建一个 WebSocketSession 对象，然后将其存储在一个 Map 中，当需要向前端推送数据时，可以根据前端的连接 ID 从 Map 中获取相应的 WebSocketSession 对象，然后使用该对象向前端推送数据。

下面是一个使用 Spring WebSocket 实现动态 WebSocket 的示例代码：

@Controller
public class WebSocketController {
    private static final Map<String, WebSocketSession> sessions = new ConcurrentHashMap<>();

    @Autowired
    private SimpMessagingTemplate messagingTemplate;

    @MessageMapping("/connect")
    public void connect(Principal principal, WebSocketSession session) throws Exception {
        sessions.put(principal.getName(), session);
    }

    @MessageMapping("/push")
    public void push(Principal principal, String message) throws Exception {
        WebSocketSession session = sessions.get(principal.getName());
        if (session != null && session.isOpen()) {
            messagingTemplate.convertAndSendToUser(principal.getName(), "/topic/push", message);
        }
    }

    @MessageMapping("/disconnect")
    public void disconnect(Principal principal) throws Exception {
        sessions.remove(principal.getName());
    }
}

在上述代码中，我们使用了 @Controller 注解来标注 WebSocketController 类，并使用 @MessageMapping 注解来标注处理 WebSocket 请求的方法。在 connect 方法中，我们将 WebSocketSession 对象存储在 sessions Map 中，并在 push 方法中使用 messagingTemplate 对象向前端推送数据。disconnect 方法用于在断开连接时从 sessions Map 中移除 WebSocketSession 对象。

在前端实现时，我们可以使用 Stomp.js 库来实现 WebSocket 连接和消息推送。下面是一个使用 Stomp.js 实现动态 WebSocket 的示例代码：

var stompClient = null;

function connect() {
    var socket = new SockJS('/websocket');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function(frame) {
        stompClient.subscribe('/user/topic/push', function(message) {
            var data = JSON.parse(message.body);
            // 处理推送的数据
        });
        stompClient.send('/app/connect');
    });
}

function push(data) {
    stompClient.send('/app/push', {}, data);
}

function disconnect() {
    stompClient.send('/app/disconnect');
    stompClient.disconnect();
}

在上述代码中，我们使用 connect 方法来建立 WebSocket 连接，使用 push 方法来向后端推送数据，使用 disconnect 方法来断开 WebSocket 连接。在 connect 方法中，我们使用 Stomp.over 方法创建一个 Stomp 客户端，并使用 subscribe 方法来订阅推送消息。在 push 方法中，我们使用 send 方法来向后端推送数据。在 disconnect 方法中，我们使用 send 方法来通知后端断开 WebSocket 连接，并使用 disconnect 方法来关闭 Stomp 客户端。

springboot整合websocket服务

### Spring Boot 整合 WebSocket 示例教程

#### 3.1 添加依赖项
为了在 Spring Boot 中使用 WebSocket，需要引入相应的启动器。这可以通过修改 `build.gradle` 文件来完成：

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-web'
    implementation 'org.springframework.boot:spring-boot-starter-websocket'
}

上述代码片段展示了如何向项目中添加必要的库支持[^2]。

#### 3.2 创建配置类
接着定义一个 Java 类用于设置 WebSocket 的行为特性。此类应继承自 `WebSocketConfigurer` 接口并实现其方法以注册端点路径以及指定消息代理目的地前缀：

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry configurer) {
        configurer.enableSimpleBroker("/topic");
        configurer.setApplicationDestinationPrefixes("/app");
    }
}

此部分实现了 STOMP 协议的支持，并启用了简单的内存内消息代理功能。

#### 3.3 构建控制器处理请求
创建一个新的 REST 控制器用来接收来自客户端的消息并将它们广播给所有连接上的订阅者：

@Controller
public class GreetingController {

    private final SimpMessagingTemplate messagingTemplate;

    @Autowired
    public GreetingController(SimpMessagingTemplate messagingTemplate) {
        this.messagingTemplate = messagingTemplate;
    }

    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public String handle(String message) throws Exception {
        Thread.sleep(1000); // simulated delay
        return "Hello, " + HtmlUtils.htmlEscape(message);
    }
}

这里通过 `@MessageMapping` 注解指定了要监听的消息地址 `/hello` ，当收到新消息时会调用该方法进行响应处理[^1]。

#### 3.4 前端页面交互逻辑
最后，在 HTML 页面上编写 JavaScript 来建立 SockJS 连接并向服务器发送数据包：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>WebSocket Example</title>
<script src="/webjars/jquery/3.4.1/jquery.min.js"></script>
<script src="/webjars/sockjs-client/1.5.1/sockjs.min.js"></script>
<script src="/webjars/stomp-websocket/2.3.3-1/stomp.min.js"></script>

<body>
<div id="greeting">Greeting:</div>
<button onclick="sendMessage()">Send Message</button>

<script type="text/javascript">
var stompClient = null;

function connect() {
    var socket = new SockJS('/ws');
    stompClient = Stomp.over(socket);

    stompClient.connect({}, function (frame) {
        console.log('Connected: ' + frame);
        stompClient.subscribe('/topic/greetings', function (messageOutput) {
            document.getElementById("greeting").innerHTML += "<br>" + messageOutput.body;
        });
    });
}

function sendMessage() {
    stompClient.send("/app/hello", {}, JSON.stringify({'name': prompt("What's your name?")}));
}

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

这段脚本负责初始化与后台的服务链接，并允许用户输入姓名后触发事件传递至服务端再由后者返回问候语显示于界面上。