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

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

效果展示：

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

导入websocket的包。

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

<dependency>
  <groupid>org.springframework.boot</groupid>
  <artifactid>spring-boot-starter-websocket</artifactid>
</dependency>

配置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<websocket> 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就可以

<script type="application/javascript">
  var websocket = null;
  var cahtnum = $('.chat-num').text();
  if ('websocket' in window) {
    websocket = new websocket('ws://localhost:8080/chat/websocket');

  } else {
    alert('该浏览器不支持websocket');
  }

  websocket.onopen = function (event) {
    console.log('websocket建立连接');
  }

  websocket.onclose = function (event) {
    console.log('websocket关闭连接');
  }

  websocket.onmessage = function (event) {
    console.log('websocket收到消息' + event.data);
    var result = $.parsejson(event.data);
    if (result.type == 3) {
      var element = document.getelementbyid('message-template').innerhtml;
      $('.message-container').append(element);
      $(".message-content:last").html(result.message);
    }
    else {
      $('.chat-num').text(result.usernum);
    }

  }

  websocket.onerror = function (event) {
    console.log('websocket通信发生错误');

  }

  window.onbeforeunload = function (event) {
    websocket.close();
  }

  $('.send-message').click(function () {
    var message = $('.chat-message').val();
    if (message == "") {
      mdui.alert('请输入要发送的消息');
      return;
    }
    sendmessage(message);
    $('.chat-message').val("");
  })

  function sendmessage(message) {
    websocket.send(message);
  }
</script>

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

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

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