前端测试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支持socketio长链接 前后端代码

Spring Boot配置WebSocket支持Socket.io长连接的过程包括以下几个步骤：

1. 添加依赖：首先，你需要在`pom.xml`文件中添加WebSocket和Socket.io相关的依赖。例如，如果你使用的是WebFlux，可以添加如下依赖：

   <dependencies>
       <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-webflux</artifactId>
       </dependency>
       <dependency>
           <groupId>org.webjars</groupId>
           <artifactId>socket.io-client</artifactId>
           <version>4.5.0</version>
       </dependency>
   </dependencies>

2. 配置WebSocket：在Spring Boot应用启动类上添加`@EnableWebSocketMessageBroker`注解，并创建一个WebSocket的消息发布者(`@MessageMapping`)和订阅者(`@SubscribeMapping`)：

   @SpringBootApplication
   @EnableWebSocketMessageBroker
   public class Application {

       @Bean
       public WebSocketMessageBrokerConfigurer configurer() {
           return new WebSocketMessageBrokerConfigurerAdapter() {
               @Override
               public void configureMessageBroker(MessageBrokerRegistry config) {
                   config.enableSimpleBroker("/topic");
                   config.setApplicationDestinationPrefixes("/app");
               }

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

       // ...其他业务代码...
   }

3. 前端（HTML和JavaScript）部分：使用Socket.IO库连接到WebSocket服务器。这里是一个简单的示例：

   <script src="https://cdn.socket.io/socket.io-4.5.0.js"></script>
   <script>
       var socket = io('ws://localhost:8080/ws', {transports: ['websocket']});
       socket.connect(); // 初始化连接

       // 发送消息
       function sendMessage(message) {
           socket.emit('message', message);
       }

       // 接收消息
       socket.on('message', function(data) {
           console.log('Received:', data);
       });
   </script>