SpringBoot+Websocket实现一个简单的网页聊天功能代码

最近做了一个SpringBoot的项目，被SpringBoot那简介的配置所迷住。刚好项目中，用到了websocket。于是，我就想着，做一个SpringBoot+websocket简单的网页聊天Demo。

效果展示：

当然，项目很简单，没什么代码，一眼就能明白

导入websocket的包。

通过使用SpringBoot导入包的时候，我们可以发现，很多包都是以 spring-boot-starter 开头的，对于我这种强迫症 ，简直是福音

  org.springframework.boot
  spring-boot-starter-websocket

配置websocket

服务端

首先新建一个WebSocketConfig的类，添加 @Component 注解 注入一个bean

@Component
public class WebSocketConfig {

  @Bean
  public ServerEndpointExporter serverEndpointExporter() {

    return new ServerEndpointExporter();
  }
}

新建一个service，本来觉得是新建一个控制器，但是我觉得这也不是控制器，但是也不太是service。最后还是选择新建一个servece。这里你如果有更好的想法可以按照你的来。

这个service里面有4个方法，这些方法很简单，通过名称就可以看出是什么意思。

@Component
@ServerEndpoint("/webSocket")
@Slf4j
public class WebSocket {

  private Session session;

  private static CopyOnWriteArraySet webSockets = new CopyOnWriteArraySet<>();

  private MessageVO messageVO = new MessageVO();

  @onOpen
  public void onOpen(Session session) {
    this.session = session;
    webSockets.add(this);


    messageVO.setType(1);
    messageVO.setUserNum(webSockets.size());
    messageVO.setMessage("有新的连接");

    ObjectMapper mapper = new ObjectMapper();

    String Json = "";
    try {
      Json = mapper.writevalueAsString(messageVO);
    } catch (Exception ex) {
      log.error(ex.getMessage());
    }

    this.sendMessage(Json);
    log.info("【websocket消息】有新的连接, 总数:{}", webSockets.size());
  }


  @onClose
  public void onClose() {
    webSockets.remove(this);

    messageVO.setType(2);
    messageVO.setUserNum(webSockets.size());
    messageVO.setMessage("有用户离开");

    ObjectMapper mapper = new ObjectMapper();

    String Json = "";
    try {
      Json = mapper.writevalueAsString(messageVO);
    } catch (Exception ex) {
      log.error(ex.getMessage());
    }

    this.sendMessage(Json);


    log.info("【websocket消息】连接断开, 总数:{}", webSockets.size());
  }

  @onMessage
  public void onMessage(String message) {

    messageVO.setType(3);
    messageVO.setUserNum(webSockets.size());
    messageVO.setMessage(message);

    ObjectMapper mapper = new ObjectMapper();

    String Json = "";
    try {
      Json = mapper.writevalueAsString(messageVO);
    } catch (Exception ex) {
      log.error(ex.getMessage());
    }

    this.sendMessage(Json);

    log.info("【websocket消息】收到客户端发来的消息:{}", message);
  }

  public void sendMessage(String message) {
    for (WebSocket webSocket : webSockets) {
      log.info("【websocket消息】广播消息, message={}", message);
      try {
 webSocket.session.getBasicRemote().sendText(message);
      } catch (Exception e) {
 e.printStackTrace();
      }
    }
  }
}

客户端

客户端也就是我们的html，我用的是原生html5的websocket ,不需要其他的js。直接在html中写js就可以

这个就是全都的功能，非常简单，没什么特别的功能和代码。

最后附上Github的源代码传送门

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。