springboot websocket Springboot基于websocket实现简单在线聊天功能

时间:2021-04-22 yytxdy 人气:0

添加maven依赖

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.2.5.RELEASE</version>
  </parent>
  <modelVersion>4.0.0</modelVersion>
  <artifactId>springboot-websocket</artifactId>
  <name>springboot-websocket</name>

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

</project>

添加websocket配置

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

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

实现具体的handler

public class MyTextWebSocketHandler extends TextWebSocketHandler {
  private Set<WebSocketSession> sessions = new HashSet<>();

  @Override
  protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
    if (session.isOpen()) {
      sessions.add(session);
    }
    sendToAll(message);
  }
  private void sendToAll(TextMessage message) throws IOException {
    for (WebSocketSession session : sessions) {
      session.sendMessage(message);
    }
  }
  @Override
  public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
    sessions.remove(session);
  }
}

即可通过ws://localhost:8080/myHandler访问websocket

添加测试页面：

<html>
<script type="text/javascript">
  if ("WebSocket" in window) {
    var ws = new WebSocket("ws://localhost:8080/myHandler");
    ws.onopen = function () {

    };

    ws.onmessage = function (evt) {
      document.getElementById('messageDiv').innerHTML += evt.data + "</br>";
    };

    ws.onclose = function () {
      console.log("close connect");
    };
  } else {
    alert("您的浏览器不支持 WebSocket!");
  }

  function send() {
    ws.send(document.getElementById("input").value + ": " + document.getElementById("message").value);
  }
</script>

</head>
<body>
当前用户: <input id="input"/><br/>
<a href="#" rel="external nofollow" onclick="send();">发送消息</a>: <input id="message"/>
<div id="messageDiv"></div>
</body>
</html>

即可实现简单的通信功能

加载全部内容