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

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

什么是WebSocket?

WebSocket 協(xié)議是基于 TCP 的一種新的網(wǎng)絡(luò)協(xié)議。它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工 (full-duplex) 通信—允許服務(wù)器主動發(fā)送信息給客戶端。

 

為什么需要WebSocket?

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

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

現(xiàn)在通過 SpringBoot 集成 WebSocket 來實(shí)現(xiàn)前后端通信。

集成 WebSocket 實(shí)現(xiàn)前后端通信

項(xiàng)目代碼結(jié)構(gòu)圖

 

依賴導(dǎo)入

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 服務(wù)端 WebSocketServer

因?yàn)?WebSocket 是類似客戶端服務(wù)端的形式(采用ws協(xié)議)，那么這里的 WebSocketServer 其實(shí)就相當(dāng)于一個(gè) ws協(xié)議的 Controller。直接 @ServerEndpoint("/websocket") 、@Component 啟用即可，然后在里面實(shí)現(xiàn)@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 {

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

}

頁面發(fā)起socket請求

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

var socket; 
  if(typeof(WebSocket) == "undefined") { 
    console.log("您的瀏覽器不支持WebSocket"); 
  }else{ 
    console.log("您的瀏覽器支持WebSocket"); 
    	//實(shí)現(xiàn)化WebSocket對象，指定要連接的服務(wù)器地址與端口 建立連接
      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); 
        //發(fā)現(xiàn)消息進(jìn)入  開始處理前端觸發(fā)邏輯
      }; 
      //關(guān)閉事件
      socket.onclose = function() { 
        console.log("Socket已關(guān)閉"); 
      }; 
      //發(fā)生了錯(cuò)誤事件
      socket.onerror = function() { 
        alert("Socket發(fā)生了錯(cuò)誤"); 
        //此時(shí)可以嘗試刷新頁面
      } 
      //離開頁面時(shí)，關(guān)閉socket
      //jquery1.8中已經(jīng)被廢棄，3.0中已經(jīng)移除
      // $(window).unload(function(){
      //   socket.close();
      //});
  }

運(yùn)行效果

現(xiàn)在可以在瀏覽器開啟連接，通過客戶端調(diào)用接口服務(wù)端就可以向?yàn)g覽器發(fā)送消息。

現(xiàn)在打開兩個(gè)頁面開啟兩個(gè)連接：

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

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

向前端推送數(shù)據(jù)：

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

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

可以看到服務(wù)端已經(jīng)將消息推送給了客戶端

而客戶端也收到了消息

 

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

后續(xù)

serverEndpointExporter 錯(cuò)誤

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 部署一直報(bào)這個(gè)錯(cuò)，請移除 WebSocketConfig 中 @Bean ServerEndpointExporter 的注入 。

ServerEndpointExporter 是由 Spring 官方提供的標(biāo)準(zhǔn)實(shí)現(xiàn)，用于掃描 ServerEndpointConfig 配置類和@ServerEndpoint 注解實(shí)例。使用規(guī)則也很簡單：

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

2、如果使用外部容器部署war包，則不需要提供提供ServerEndpointExporter，因?yàn)榇藭r(shí)SpringBoot默認(rèn)將掃描 服務(wù)端的行為交給外部容器處理，所以線上部署的時(shí)候要把WebSocketConfig中這段注入bean的代碼注掉。

springboot是什么

springboot一種全新的編程規(guī)范，其設(shè)計(jì)目的是用來簡化新Spring應(yīng)用的初始搭建以及開發(fā)過程，SpringBoot也是一個(gè)服務(wù)于框架的框架，服務(wù)范圍是簡化配置文件。

看完上述內(nèi)容，你們對怎么在SpringBoot中使用WebSocket實(shí)現(xiàn)前后端消息互傳有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

本文名稱：怎么在SpringBoot中使用WebSocket實(shí)現(xiàn)前后端消息互傳
瀏覽路徑：http://www.rwnh.cn/article30/gpoeso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、搜索引擎優(yōu)化、外貿(mào)建站、ChatGPT、網(wǎng)站排名、面包屑導(dǎo)航

廣告

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