今天就跟大家聊聊有關怎么在SpringBoot中使用WebSocket實現前后端消息互傳，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

公司主營業務：成都網站設計、成都網站制作、移動網站開發等業務。幫助企業客戶真正實現互聯網宣傳，提高企業的競爭能力。創新互聯公司是一支青春激揚、勤奮敬業、活力青春激揚、勤奮敬業、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創新互聯公司推出鄂城免費做網站回饋大家。

什么是WebSocket?

WebSocket 協議是基于 TCP 的一種新的網絡協議。它實現了瀏覽器與服務器全雙工 (full-duplex) 通信—允許服務器主動發送信息給客戶端。

 

為什么需要WebSocket?

大家都知道以前客戶端想知道服務端的處理進度，要不停地使用 Ajax 進行輪詢，讓瀏覽器隔個幾秒就向服務器發一次請求，這對服務器壓力較大。另外一種輪詢就是采用 long poll 的方式，這就跟打電話差不多，沒收到消息就一直不掛電話，也就是說，客戶端發起連接后，如果沒消息，就一直不返回 response 給客戶端，連接階段一直是阻塞的。

而 WebSocket 解決了 HTTP 的這幾個難題。當服務器完成協議升級后（ HTTP -> WebSocket ），服務端可以主動推送信息給客戶端，解決了輪詢造成的同步延遲問題。由于 WebSocket 只需要一次 HTTP 握手，服務端就能一直與客戶端保持通信，直到關閉連接，這樣就解決了服務器需要反復解析 HTTP 協議，減少了資源的開銷。

現在通過 SpringBoot 集成 WebSocket 來實現前后端通信。

集成 WebSocket 實現前后端通信

項目代碼結構圖

 

依賴導入

SpringBoot2.0 對 WebSocket 的支持簡直太棒了，直接就有包可以引入 。

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

配置 WebSocketConfig

啟用WebSocket的支持也是很簡單，將ServerEndpointExporter對象注入到容器中。

package com.tuhu.websocketsample.configuration;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
public class WebSocketConfig {
  @Bean
  public ServerEndpointExporter serverEndpointExporter() {
    return new ServerEndpointExporter();
  }
}

WebSocket 服務端 WebSocketServer

因為 WebSocket 是類似客戶端服務端的形式(采用ws協議)，那么這里的 WebSocketServer 其實就相當于一個 ws協議的 Controller。直接 @ServerEndpoint("/websocket") 、@Component 啟用即可，然后在里面實現@OnOpen , @onClose ,@onMessage等方法

package com.tuhu.websocketsample.controller;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

@Component
@ServerEndpoint("/websocket/{sid}")
@Slf4j
public class WebSocketServer {

  /**
   * 靜態變量，用來記錄當前在線連接數。應該把它設計成線程安全的。
   */
  private static int onlineCount = 0;
  /**
   * concurrent包的線程安全Set，用來存放每個客戶端對應的MyWebSocket對象。
   */
  private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<>();
  /**
   * 與某個客戶端的連接會話，需要通過它來給客戶端發送數據
   */
  private Session session;
  /**
   * 接收sid
   */
  private String sid="";
  /**
   * 連接建立成功調用的方法
   **/
  @OnOpen
  public void onOpen(Session session,@PathParam("sid") String sid) {
    this.session = session;
    //加入set中
    webSocketSet.add(this);
    //在線數加1
    addOnlineCount();
    log.info("有新窗口開始監聽:"+sid+",當前在線人數為" + getOnlineCount());
    this.sid=sid;
    try {
      sendMessage("連接成功");
    } catch (IOException e) {
      log.error("websocket IO異常");
    }
  }
  /**
   * 連接關閉調用的方法
   */
  @OnClose
  public void onClose() {
    //從set中刪除
    webSocketSet.remove(this);
    //在線數減1
    subOnlineCount();
    log.info("有一連接關閉！當前在線人數為" + getOnlineCount());
  }
  /**
   * 收到客戶端消息后調用的方法
   * @param message 客戶端發送過來的消息
   **/
  @OnMessage
  public void onMessage(String message, Session session) {
    log.info("收到來自窗口"+sid+"的信息:"+message);
    //群發消息
    for (WebSocketServer item : webSocketSet) {
      try {
        item.sendMessage(message);
      } catch (IOException e) {
        e.printStackTrace();
      }
    }
  }
  /**
   * @param session
   * @param error
   */
  @OnError
  public void onError(Session session, Throwable error) {
    log.error("發生錯誤");
    error.printStackTrace();
  }
  /**
   * 實現服務器主動推送
   */
  public void sendMessage(String message) throws IOException {
    this.session.getBasicRemote().sendText(message);
  }
  /**
   * 群發自定義消息
   * */
  public static void sendInfo(String message,@PathParam("sid") String sid) throws IOException {
    log.info("推送消息到窗口"+sid+"，推送內容:"+message);
    for (WebSocketServer item : webSocketSet) {
      try {
        //這里可以設定只推送給這個sid的，為null則全部推送
        if(sid==null) {
          item.sendMessage(message);
        }else if(item.sid.equals(sid)){
          item.sendMessage(message);
        }
      } catch (IOException e) {
        continue;
      }
    }
  }
  public static synchronized int getOnlineCount() {
    return onlineCount;
  }
  public static synchronized void addOnlineCount() {
    WebSocketServer.onlineCount++;
  }
  public static synchronized void subOnlineCount() {
    WebSocketServer.onlineCount--;
  }
}

消息推送

至于推送新信息，可以再自己的 Controller 寫個方法調用 WebSocketServer.sendInfo() 即可

package com.tuhu.websocketsample.controller;

import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;
import java.io.IOException;

@RestController
@RequestMapping("/checkcenter")
public class CheckCenterController {
  /**
   * 頁面請求
   * @param cid
   * @return
   */
  @GetMapping("/socket/{cid}")
  public ModelAndView socket(@PathVariable String cid) {
    ModelAndView mav=new ModelAndView("/socket");
    mav.addObject("cid", cid);
    return mav;
  }
  /**
   * 推送數據接口
   * @param cid
   * @param message
   * @return
   */
  @ResponseBody
  @RequestMapping("/socket/push/{cid}")
  public String pushToWeb(@PathVariable String cid,String message) {
    try {
      WebSocketServer.sendInfo(message,cid);
    } catch (IOException e) {
      e.printStackTrace();
      return "error:"+cid+"#"+e.getMessage();
    }
    return "success:"+cid;
  }

}

頁面發起socket請求

然后在頁面用js代碼調用 socket，當然，太古老的瀏覽器是不行的，一般新的瀏覽器或者谷歌瀏覽器是沒問題的。還有一點，記得協議是ws的哦。直接在瀏覽器控制臺開啟連接。

var socket; 
  if(typeof(WebSocket) == "undefined") { 
    console.log("您的瀏覽器不支持WebSocket"); 
  }else{ 
    console.log("您的瀏覽器支持WebSocket"); 
    	//實現化WebSocket對象，指定要連接的服務器地址與端口 建立連接
      socket = new WebSocket("ws://localhost:8080/websocket/20"); 
      //打開事件
      socket.onopen = function() { 
        console.log("Socket 已打開"); 
        //socket.send("這是來自客戶端的消息" + location.href + new Date());
      }; 
      //獲得消息事件
      socket.onmessage = function(msg) { 
        console.log(msg.data); 
        //發現消息進入  開始處理前端觸發邏輯
      }; 
      //關閉事件
      socket.onclose = function() { 
        console.log("Socket已關閉"); 
      }; 
      //發生了錯誤事件
      socket.onerror = function() { 
        alert("Socket發生了錯誤"); 
        //此時可以嘗試刷新頁面
      } 
      //離開頁面時，關閉socket
      //jquery1.8中已經被廢棄，3.0中已經移除
      // $(window).unload(function(){
      //   socket.close();
      //});
  }

運行效果

現在可以在瀏覽器開啟連接，通過客戶端調用接口服務端就可以向瀏覽器發送消息。

現在打開兩個頁面開啟兩個連接：

socket = new WebSocket("ws://localhost:8080/websocket/20") ； 

socket = new WebSocket("ws://localhost:8080/websocket/22") ;

向前端推送數據：

• http://localhost:8080/checkcenter/socket/push/20?message=Hello

• http://localhost:8080/checkcenter/socket/push/22?message=HelloWorld

可以看到服務端已經將消息推送給了客戶端

而客戶端也收到了消息

 

先打開頁面，指定cid，啟用socket接收，然后再另一個頁面調用剛才Controller封裝的推送信息的方法到這個cid的socket，即可向前端推送消息。

后續

serverEndpointExporter 錯誤

org.springframework.beans.factory.BeanCreationException: Error creating bean with name ‘serverEndpointExporter' defined in class path resource [com/xxx/WebSocketConfig.class]: Invocation of init method failed; nested exception is java.lang.IllegalStateException: javax.websocket.server.ServerContainer not available

如果 tomcat 部署一直報這個錯，請移除 WebSocketConfig 中 @Bean ServerEndpointExporter 的注入 。

ServerEndpointExporter 是由 Spring 官方提供的標準實現，用于掃描 ServerEndpointConfig 配置類和@ServerEndpoint 注解實例。使用規則也很簡單：

1、如果使用默認的嵌入式容器 比如Tomcat 則必須手工在上下文提供ServerEndpointExporter。

2、如果使用外部容器部署war包，則不需要提供提供ServerEndpointExporter，因為此時SpringBoot默認將掃描 服務端的行為交給外部容器處理，所以線上部署的時候要把WebSocketConfig中這段注入bean的代碼注掉。

springboot是什么

springboot一種全新的編程規范，其設計目的是用來簡化新Spring應用的初始搭建以及開發過程，SpringBoot也是一個服務于框架的框架，服務范圍是簡化配置文件。

看完上述內容，你們對怎么在SpringBoot中使用WebSocket實現前后端消息互傳有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注創新互聯行業資訊頻道，感謝大家的支持。

本文名稱：怎么在SpringBoot中使用WebSocket實現前后端消息互傳
瀏覽路徑：http://www.2m8n56k.cn/article30/gpoeso.html

成都網站建設公司_創新互聯，為您提供軟件開發、搜索引擎優化、外貿建站、ChatGPT、網站排名、面包屑導航

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯