websocket前后端資料實時更新(前端+后端)

        做的專案中需要將后端提供的資料展示在前端頁面，一開始我是用JS的setInterval()方法，設定一個時間，每過時間發起一次ajax請求，雖然也能炊訓著實作，但總感覺資料不是實時重繪的，而且還占用資源，所以學習WebSocke，并總結了一下，以下是本人總結的前后端WebSocke相關代碼：

一、后端：

1.pom.xml添加WebSocke依賴

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

2.WebSocke配置類

@Configuration
public class WebSocketConfig {

    /**
     * 這個bean的注冊,用于掃描帶有@ServerEndpoint的注解成為websocket  ,如果你使用外置的tomcat就            
        不需要該組態檔
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}

3.WebSocke服務類

@ServerEndpoint(value = "https://www.cnblogs.com/webSocket")//主要是將目前的類定義成一個websocket服務器端, 注解的值將被用于監聽用戶連接的終端訪問URL地址,客戶端可以通過這個URL來連接到WebSocket服務器端
@Component
@EnableScheduling// cron定時任務
@Data
public class WebSocket {

    private static final Logger logger = LoggerFactory.getLogger(WebSocket.class);

    /**
     * 靜態變數，用來記錄當前在線連接數，應該把它設計成執行緒安全的，
     */
    private static int onlineCount = 0;

    /**
     * concurrent包的執行緒安全Set，用來存放每個客戶端對應的MyWebSocket物件，
     */
    private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();

    /**
     * 與某個客戶端的連接會話，需要通過它來給客戶端發送資料
     */
    private Session session;

    public static CopyOnWriteArraySet<WebSocket> getWebSocketSet() {
        return webSocketSet;
    }

    public static void setWebSocketSet(CopyOnWriteArraySet<WebSocket> webSocketSet) {
        WebSocket.webSocketSet = webSocketSet;
    }

    /**
     * 從資料庫查詢相關資料資訊,可以根據實際業務場景進行修改
     */
    @Resource
    private IndexService indexService;
    private static IndexService indexServiceMapper;

    @PostConstruct
    public void init() {
        WebSocket.indexServiceMapper = this.indexService;
    }

    /**
     * 連接建立成功呼叫的方法
     *
     * @param session 會話
     */
    @OnOpen
    public void onOpen(Session session) throws Exception {
        this.session = session;
        webSocketSet.add(this);
        //查詢當前在線人數
        int nowOnline = indexServiceMapper.nowOnline();
        this.sendMessage(JSON.toJSONString(nowOnline));
    }

    /**
     * 收到客戶端訊息后呼叫的方法
     *
     * @param message 客戶端發送過來的訊息
     */
    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        logger.info("引數資訊：{}", message);
        //群發訊息
        for (WebSocket item : webSocketSet) {
            try {
                item.sendMessage(JSON.toJSONString(message));
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * 連接關閉呼叫的方法
     */
    @OnClose
    public void onClose() {
        webSocketSet.remove(this);
        if (session != null) {
            try {
                session.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * 發生錯誤時呼叫
     *
     * @param session 會話
     * @param error   錯誤資訊
     */
    @OnError
    public void one rror(Session session, Throwable error) {
        logger.error("連接例外！");
        error.printStackTrace();
    }

    /**
     * 發送資訊
     *
     * @param message 訊息
     */
    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }

    /**
     * 自定義訊息推送、可群發、單發
     *
     * @param message 訊息
     */
    public static void sendInfo(String message) throws IOException {
        logger.info("資訊:{}", message);
        for (WebSocket item : webSocketSet) {
            item.sendMessage(message);
        }
    }
}

?

 4.定時任務（為了給前端實時推送資料，我這里寫了個定時任務，定時任務我用的是cron運算式,不懂的同學可以上這個網址學習：cron運算式）

?

@Slf4j
@Component
public class IndexScheduled {

    @Autowired
    private IndexMapper indexMapper;

    /**
     * 每3秒執行一次
     */
    //@Scheduled(cron = "0/3 * * * * ? ") //我這里暫時不需要運行這條定時任務，所以將注解注釋了，朋友們運行時記得放開注釋啊
    public void nowOnline() {
        System.err.println("*********   首頁定時任務執行   **************");

        CopyOnWriteArraySet<WebSocket> webSocketSet = WebSocket.getWebSocketSet();
        int nowOnline = indexMapper.nowOnline();
        webSocketSet.forEach(c -> {
            try {
                c.sendMessage(JSON.toJSONString(nowOnline));
            } catch (IOException e) {
                e.printStackTrace();
            }
        });

        System.err.println("/n 首頁定時任務完成.......");
    }

}

二、前端：

前端的代碼非常的簡單，直接上代碼，

<body >

<div >
   <span >測驗在線人數：<span id="online"></span>&nbsp人</span>
</div>


<script th:inline="javascript">
    
    let websocket = null;
    let host = document.location.host;
    //判斷當前瀏覽器是否支持WebSocket
    if ('WebSocket' in window) {
        //連接WebSocket節點
        websocket = new WebSocket("ws://" + host + "/webSocket");
    } else {
        alert('瀏覽器不支持webSocket');
    }
    
    //連接發生錯誤的回呼方法
    websocket.onerror = function () {
        setMessageInnerHTML("error");
    };
    
    //連接成功建立的回呼方法
    websocket.onopen = function (event) {
        setMessageInnerHTML("open");
    };
    
    //接收到訊息的回呼方法
    websocket.onmessage = function (event) {
        let data = https://www.cnblogs.com/wyj-java/archive/2022/04/13/event.data;
        console.log("后端傳遞的資料:" + data);
        //將后端傳遞的資料渲染至頁面
        $("#online").html(data);
    };
    
    //連接關閉的回呼方法
    websocket.onclose = function () {
        setMessageInnerHTML("close");
    };
    
    //監聽視窗關閉事件，當視窗關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉視窗，server端會拋例外，
    window.onbeforeunload = function () {
        websocket.close();
    };
    
    //將訊息顯示在網頁上
    function setMessageInnerHTML(innerHTML) {
    
    };
    
    //關閉連接
    function closeWebSocket() {
        websocket.close();
    };
    
    //發送訊息
    function send() {
        let message = document.getElementById('text').value;
        websocket.send(message);
    };
    
</script>

</body>

標籤：其他

上一篇：【我的面試-某家上市公司】一次Web前端開發面試的回憶錄

下一篇：uni-app組件-應用簡單快速上線