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

2019-11-26 11:35:05

字体：大中小

来源：转载

供稿：网友

最近做了一个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

@Componentpublic class WebSocketConfig {  @Bean  public ServerEndpointExporter serverEndpointExporter() {    return new ServerEndpointExporter();  }}

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

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

@Component@ServerEndpoint("/webSocket")@Slf4jpublic 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的源代码传送门

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

上一篇：mybatis中注解映射SQL示例代码

下一篇：浅谈同步监视器之同步代码块、同步方法