在SpringBoot中利用Websocket實現(xiàn)一個網(wǎng)頁聊天功能

這篇文章將為大家詳細講解有關(guān)在SpringBoot中利用Websocket實現(xiàn)一個網(wǎng)頁聊天功能，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

創(chuàng)新互聯(lián)專注于汝城網(wǎng)站建設服務及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。熱誠為您提供汝城營銷型網(wǎng)站建設，汝城網(wǎng)站制作、汝城網(wǎng)頁設計、汝城網(wǎng)站官網(wǎng)定制、小程序定制開發(fā)服務，打造汝城網(wǎng)絡公司原創(chuàng)品牌,更為您提供汝城網(wǎng)站排名全網(wǎng)營銷落地服務。

導入websocket的包。

通過使用SpringBoot導入包的時候，我們可以發(fā)現(xiàn)，很多包都是以 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消息】有新的連接, 總數(shù):{}", 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消息】連接斷開, 總數(shù):{}", 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消息】收到客戶端發(fā)來的消息:{}", 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關(guān)閉連接');
  }

  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通信發(fā)生錯誤');

  }

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

  $('.send-message').click(function () {
    var message = $('.chat-message').val();
    if (message == "") {
      mdui.alert('請輸入要發(fā)送的消息');
      return;
    }
    sendmessage(message);
    $('.chat-message').val("");
  })

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

關(guān)于在SpringBoot中利用Websocket實現(xiàn)一個網(wǎng)頁聊天功能就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

當前題目：在SpringBoot中利用Websocket實現(xiàn)一個網(wǎng)頁聊天功能
本文路徑：http://www.rwnh.cn/article48/gspphp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、營銷型網(wǎng)站建設、網(wǎng)站設計公司、網(wǎng)站設計、搜索引擎優(yōu)化、移動網(wǎng)站建設

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

在SpringBoot中利用Websocket實現(xiàn)一個網(wǎng)頁聊天功能