详解WebSocket+Spring示例Demo（已使用SockJS库）

WebSocket是一种在Web浏览器和服务器之间进行全双工通信的协议。Spring框架提供了对WebSocket的支持，使得我们可以轻松地在Spring应用程序中实现WebSocket通信。本文将详细讲解如何使用Spring框架实现WebSocket通信，并提供两个示例说明。

1. 创建Spring Boot项目

首先，我们需要创建一个Spring Boot项目。可以使用Spring Initializr或者手动创建一个Maven项目。在pom.xml文件中添加以下依赖：

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
  <groupId>org.webjars</groupId>
  <artifactId>sockjs-client</artifactId>
  <version>1.0.2</version>
</dependency>

在上面的代码中，我们添加了spring-boot-starter-websocket和sockjs-client依赖。

2. 创建WebSocket配置类

在Spring Boot项目中，我们可以使用@Configuration注解创建一个WebSocket配置类。在配置类中，我们可以定义WebSocket处理器和拦截器。

下面是一个示例，演示了如何创建一个WebSocket配置类：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
  @Override
  public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    registry.addHandler(myHandler(), "/myHandler").setAllowedOrigins("*").withSockJS();
  }

  @Bean
  public WebSocketHandler myHandler() {
    return new MyHandler();
  }
}

在上面的代码中，我们使用@Configuration注解创建了一个WebSocket配置类，并使用@EnableWebSocket注解启用WebSocket支持。在registerWebSocketHandlers方法中，我们注册了一个名为myHandler的WebSocket处理器，并将它映射到/myHandler路由上。我们还使用setAllowedOrigins("*")方法允许所有来源的请求，并使用withSockJS()方法启用SockJS支持。在myHandler方法中，我们创建了一个名为MyHandler的WebSocket处理器。

3. 创建WebSocket处理器

在Spring Boot项目中，我们可以使用@Component注解创建一个WebSocket处理器。在处理器中，我们可以定义WebSocket连接的打开、关闭、错误和消息处理方法。

下面是一个示例，演示了如何创建一个WebSocket处理器：

@Component
public class MyHandler extends TextWebSocketHandler {
  private List<WebSocketSession> sessions = new ArrayList<>();

  @Override
  public void afterConnectionEstablished(WebSocketSession session) throws Exception {
    sessions.add(session);
  }

  @Override
  public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
    sessions.remove(session);
  }

  @Override
  protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
    for (WebSocketSession s : sessions) {
      s.sendMessage(message);
    }
  }
}

在上面的代码中，我们使用@Component注解创建了一个名为MyHandler的WebSocket处理器，并继承了TextWebSocketHandler类。在处理器中，我们定义了一个名为sessions的WebSocketSession列表，用于存储所有连接的WebSocketSession对象。在afterConnectionEstablished方法中，我们将新的WebSocketSession对象添加到sessions列表中。在afterConnectionClosed方法中，我们将WebSocketSession对象从sessions列表中移除。在handleTextMessage方法中，我们遍历sessions列表，并将消息发送给所有连接的WebSocketSession对象。

4. 示例说明

下面是两个示例，演示了如何使用Spring框架实现WebSocket通信：

4.1 示例一：实现简单的聊天室

在这个示例中，我们将实现一个简单的聊天室。用户可以在聊天室中发送消息，并将消息发送给所有连接的WebSocketSession对象。

首先，我们需要创建一个名为chat.html的HTML文件，用于显示聊天室界面。在chat.html文件中，我们可以使用SockJS库连接WebSocket服务器，并使用JavaScript代码发送和接收消息。

<!DOCTYPE html>
<html>
<head>
  <title>Chat Room</title>
  <script src="/webjars/sockjs-client/1.0.2/sockjs.min.js"></script>
  <script>
    var sock = new SockJS('/myHandler');
    sock.onmessage = function(event) {
      var message = event.data;
      var div = document.createElement('div');
      div.innerHTML = message;
      document.getElementById('messages').appendChild(div);
    };
    function sendMessage() {
      var input = document.getElementById('message');
      var message = input.value;
      sock.send(message);
      input.value = '';
    }
  </script>
</head>
<body>
  <div id="messages"></div>
  <input type="text" id="message" />
  <button onclick="sendMessage()">Send</button>
</body>
</html>

在上面的代码中，我们使用SockJS库连接WebSocket服务器，并使用onmessage方法接收消息。我们还定义了一个名为sendMessage的JavaScript函数，用于发送消息。

接下来，我们需要创建一个名为ChatController的Spring MVC控制器，用于处理/chat路由。在ChatController中，我们可以返回chat.html文件，并使用@MessageMapping注解处理WebSocket消息。

@Controller
public class ChatController {
  @GetMapping("/chat")
  public String chat() {
    return "chat";
  }

  @MessageMapping("/myHandler")
  @SendTo("/myHandler")
  public String handle(String message) {
    return message;
  }
}

在上面的代码中，我们使用@GetMapping注解定义/chat路由，并返回chat.html文件。在handle方法中，我们使用@MessageMapping注解处理WebSocket消息，并使用@SendTo注解将消息发送给所有连接的WebSocketSession对象。

4.2 示例二：实现实时数据更新

在这个示例中，我们将实现一个实时数据更新功能。我们将使用WebSocket通信来更新数据，并使用JavaScript代码将数据显示在网页上。

首先，我们需要创建一个名为data.html的HTML文件，用于显示数据。在data.html文件中，我们可以使用SockJS库连接WebSocket服务器，并使用JavaScript代码接收数据。

<!DOCTYPE html>
<html>
<head>
  <title>Data</title>
  <script src="/webjars/sockjs-client/1.0.2/sockjs.min.js"></script>
  <script>
    var sock = new SockJS('/myHandler');
    sock.onmessage = function(event) {
      var data = JSON.parse(event.data);
      document.getElementById('value').innerHTML = data.value;
    };
  </script>
</head>
<body>
  <div id="value"></div>
</body>
</html>

在上面的代码中，我们使用SockJS库连接WebSocket服务器，并使用onmessage方法接收数据。我们还使用JSON.parse方法将数据解析为JavaScript对象，并将数据显示在网页上。

接下来，我们需要创建一个名为DataController的Spring MVC控制器，用于处理/data路由。在DataController中，我们可以返回data.html文件，并使用@MessageMapping注解处理WebSocket消息。

@Controller
public class DataController {
  private int value = 0;

  @GetMapping("/data")
  public String data() {
    return "data";
  }

  @Scheduled(fixedRate = 1000)
  @SendTo("/myHandler")
  public String update() {
    value++;
    return "{\"value\": " + value + "}";
  }
}

在上面的代码中，我们使用@GetMapping注解定义/data路由，并返回data.html文件。在update方法中，我们使用@Scheduled注解定时更新数据，并使用@SendTo注解将数据发送给所有连接的WebSocketSession对象。

5. 注意事项

在使用Spring框架实现WebSocket通信时，需要注意以下几点：

WebSocket处理器必须继承TextWebSocketHandler或BinaryWebSocketHandler类。
WebSocket处理器中的方法必须使用@MessageMapping注解处理WebSocket消息。
WebSocket处理器中的方法可以使用@SendTo注解将消息发送给所有连接的WebSocketSession对象。
WebSocket处理器中的方法可以使用@Payload注解将消息体绑定到方法参数上。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解WebSocket+spring示例demo（已使用sockJs库） - Python技术站

详解WebSocket+spring示例demo（已使用sockJs库）