偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

SpringBoot輕松整合WebSocket實現(xiàn)Web在線聊天室

作者：章為忠
開發(fā) 架構
我們就把Spring Boot整合WebSocket，實現(xiàn)BBS聊天室的功能介紹完了。WebSocket能夠以非常簡單的方式，實現(xiàn)客戶端與服務器端的雙向通訊。在實際項目開發(fā)過程中使用越來越廣泛，希望大家能熟悉掌握。

前面為大家講述了 Spring Boot的整合Redis、RabbitMQ、Elasticsearch等各種框架組件；隨著移動互聯(lián)網的發(fā)展，服務端消息數(shù)據(jù)推送已經是一個非常重要、非常普遍的基礎功能。今天就和大家聊聊在SpringBoot輕松整合WebSocket，實現(xiàn)Web在線聊天室，希望能對大家有所幫助。

一、WebSocket簡介

1.1 什么是WebSocket？

WebSocket協(xié)議是基于TCP的一種網絡協(xié)議，它實現(xiàn)了瀏覽器與服務器全雙工（Full-duplex）通信。它允許服務端主動向客戶端推送數(shù)據(jù)，這使得客戶端和服務器之間的數(shù)據(jù)交換變得更加簡單高效。在WebSocket API中，瀏覽器和服務器只需要完成一次握手，兩者之間就可以創(chuàng)建持久性的連接，并進行雙向數(shù)據(jù)傳輸。

圖片

WebSocket 在握手之后便直接基于 TCP 進行消息通信，只是 TCP的基礎上的一層非常輕的封裝，它只是將TCP的字節(jié)流轉換成消息流（文本或二進制），至于怎么解析這些消息的內容完全依賴于應用本身。

1.2 為什么需要 WebSocket？

我們知道HTTP 協(xié)議有一個缺陷：通信只能由客戶端發(fā)起，服務器端無法向某個客戶端推送數(shù)據(jù)。然而，在某些場景下，數(shù)據(jù)推送是非常必要的功能，為了實現(xiàn)推送技術，所用的技術都是輪詢，即：客戶端在特定的的時間間隔（如每 1 秒），由瀏覽器對服務器發(fā)出 HTTP 請求，然后由服務器返回最新的數(shù)據(jù)給客戶端的瀏覽器。

例如，在外賣場景下，當騎手位置更新時，服務器端向客戶端推送騎手位置數(shù)據(jù)。如果使用HTTP協(xié)議，那么就只能輪詢。輪詢模式具有很明顯的缺點，即瀏覽器需要不斷地向服務器發(fā)出請求，然而 HTTP 請求可能包含較長的頭部，其中真正有效的數(shù)據(jù)可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源，同樣，數(shù)據(jù)時效性較低，存在一定的數(shù)據(jù)延遲。

在這種情況下，WebSocket 出現(xiàn)了，使用 WebSocket 協(xié)議可以實現(xiàn)由服務端主動向客戶端推送消息，同時也可以實現(xiàn)客戶端向服務器端發(fā)送消息。這樣能更好得節(jié)省服務器資源和帶寬；并且能夠更實時地進行通訊。隨著HTML 5 的流行， WebSocket已經成為國際標準，目前主流的瀏覽器都已經支持。

1.3 WebSocket的優(yōu)點

  • 較少的控制開銷。在連接建立后，服務端和客戶端之間交換數(shù)據(jù)時，用于協(xié)議控制的數(shù)據(jù)包頭部相對較小。在不包含擴展的情況下，對于服務器到客戶端的內容，此頭部大小只有 2 至 10 字節(jié)（和數(shù)據(jù)包長度有關）；對于客戶端到服務器的內容，此頭部還需要加上額外的 4 字節(jié)的掩碼。這相對于 HTTP 協(xié)議每次都要攜帶完整的頭部信息，此項開銷顯著減少了。
  • 更強的實時性。由于WebSocket協(xié)議是全雙工的，所以服務器可以隨時主動向客戶端推送數(shù)據(jù)。相對于 HTTP 請求必須等待客戶端發(fā)起請求服務端才能響應，延遲明顯更少；即使是和Comet 等類似的長輪詢比較，WebSocket也能在短時間內更高效的傳遞數(shù)據(jù)。
  • 保持連接狀態(tài)。與 HTTP 不同的是， Websocket 需要先創(chuàng)建連接，這就使得其成為一種有狀態(tài)的協(xié)議，之后通信時可以省略部分狀態(tài)信息，而 HTTP 請求需要在每個請求都攜帶狀態(tài)信息（如Token等）。
  • 更好的二進制支持。 Websocket 定義了二進制幀，相對 HTTP，可以更輕松地處理二進制數(shù)據(jù)。Websocket 定義了擴展，用戶可以擴展協(xié)議、實現(xiàn)部分自定義的子協(xié)議。如部分瀏覽器支持Gzip壓縮等。
  • 更好的壓縮效果。相對于 HTTP 壓縮， Websocket 在適當?shù)臄U展支持下，可以沿用之前內容的上下文，在傳遞類似的數(shù)據(jù)時，可以顯著地提高壓縮率。

1.4 WebSocket的應用場景

隨著移動互聯(lián)網的發(fā)展，WebSocket的使用越來越廣泛?；旧现灰菚r效性要求高的業(yè)務場景都可以使用WebSocket，例如：

  • 協(xié)同編輯
  • 基于位置的應用
  • 體育實況更新
  • 股票基金報價實時更新
  • 多玩家游戲
  • 音視頻聊天
  • 視頻會議
  • 在線教育
  • 社交訂閱

除此之外，還有系統(tǒng)消息通知、用戶上下線提醒、客戶端數(shù)據(jù)同步，實時數(shù)據(jù)更新，多屏幕同步，用戶在線狀態(tài)，消息掃描二維碼登錄/二維碼支付，彈幕、各類信息提醒，在線選座，實時監(jiān)控大屏等等；

二、WebSocket的事件

我們知道HTTP協(xié)議使用http和https的統(tǒng)一資源標志符。WebSocket與HTTP類似，使用的是 ws 或 wss（類似于 HTTPS），其中 wss 表示在 TLS 之上的Websocket。例如：

ws://example.com/wsapiwss://secure.example.com/

WebSocket 使用和 HTTP 相同的 TCP 端口，可以繞過大多數(shù)防火墻的限制。默認情況下， WebSocket 協(xié)議使用80 端口；運行在 TLS 之上時，默認使用 443 端口。

WebSocket 只是在 Socket 協(xié)議的基礎上，非常輕的一層封裝。在WebSocket API中定義了open、close、error、message等幾個基本事件，這就使得WebSocket使用起來非常簡單。 下面是在WebSocket API定義的事件：

事件

事件處理程序

描述

open

Sokcket onopen

連接建立時觸發(fā)

message

Sokcket onmessage

客戶端接收服務端數(shù)據(jù)時觸發(fā)

error

Sokcket onerror

通訊發(fā)生錯誤時觸發(fā)

close

Sokcket onclose

連接關閉時觸發(fā)


三、Spring Boot整合WebSocket實現(xiàn)聊天室

Spring Boot 提供了 Websocket 組件 spring-boot-starter-websocket，用來支持在 Spring Boot環(huán)境下對Websocket 的使用。

下面我們就以多人在線聊天室為例，演示 Spring Boot 是如何整合Websocket 實現(xiàn)服務端消息推送的。

3.1 創(chuàng)建前端頁面

首先，創(chuàng)建spring boot項目：spring-boot-starter-websocket。接下來，我們構建前臺交互頁面，創(chuàng)建index.html頁面并在 js 中實現(xiàn)WebSocket通訊，完整頁面代碼如下所示：



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>Chat Room</title>    <script type="text/javascript">        var urlPrefix ='ws://localhost:8080/chat/';        var ws = null;        // 加入function join() {            var username = document.getElementById('uid').value;            var url = urlPrefix + username;            ws = new WebSocket(url);function(event){                var ta = document.getElementById('responseText');                ta.value += event.data+"\r\n";            };function(event){                var ta = document.getElementById('responseText');                ta.value += "建立 websocket 連接... \r\n";            };function(event){                var ta = document.getElementById('responseText');                ta.value += "用戶["+username+"] 已經離開聊天室! \r\n";                ta.value += "關閉 websocket 連接. \r\n";            };        }
        // 退出function exit(){            if(ws) {                ws.close();            }        }
        // 發(fā)送消息function send(){            var message = document.getElementById('message').value;            if(!window.WebSocket){return;}            if(ws.readyState == WebSocket.OPEN){                ws.send(message);            }else{                alert("WebSocket 連接沒有建立成功！");            }        }</script></head><body><form onSubmit="return false;">    <h3>BBS聊天室</h3>    <textarea id="responseText" style="width: 1024px;height: 300px;"></textarea>    <br/>    <br />    <label>昵稱 : </label><input type="text" id="uid" />      <input type="button" value="加入聊天室" onClick="join()" />  
    <input type="button" value="離開聊天室" onClick="exit()" />    <br />    <br />    <label>消息 : </label><input type="text" id="message" />   <input type="button" value="發(fā)送消息" onClick="send()" /></form></body></html>

上面的示例中，js中定義了WebSocket通訊相關的代碼，如：ws.onopen、ws.onmessage、ws.onclose等事件。

3.2 創(chuàng)建后端服務

接下來，我們開始創(chuàng)建后臺WebSocket服務，實現(xiàn)WebSocket后臺通訊服務。

step 1 ：引入相關依賴

首先，修改項目的pom.xml文件，主要添加 Web 和 Websocket 組件。具體代碼如下所示：

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

step2：消息接收

首先創(chuàng)建ChatServerEndpoint類，并使用@ServerEndpoint注解創(chuàng)建WebSocket EndPoint實現(xiàn)客戶端連接、消息的接收、等事件。具體示例代碼如下所示：

@RestController@ServerEndpoint("/chat/{username}")public class ChatServerEndpoint {    private static final Logger logger = LoggerFactory.getLogger(ChatRoomServerEndpoint.class);
    @OnOpen    public void openSession(@PathParam("username") String username, Session session) {        ONLINE_USER_SESSIONS.put(username, session);        String message = "歡迎用戶[" + username + "] 來到聊天室！";        logger.info("用戶登錄："+message);        sendMessageAll(message);    }
    @OnMessage    public void onMessage(@PathParam("username") String username, String message) {        logger.info("發(fā)送消息："+message);        sendMessageAll("用戶[" + username + "] : " + message);    }
    @OnClose    public void onClose(@PathParam("username") String username, Session session) {        //當前的Session 移除        ONLINE_USER_SESSIONS.remove(username);        //并且通知其他人當前用戶已經離開聊天室了        sendMessageAll("用戶[" + username + "] 已經離開聊天室了！");        try {            session.close();        } catch (IOException e) {            logger.error("onClose error",e);        }    }
    @OnError    public void onError(Session session, Throwable throwable) {        try {            session.close();        } catch (IOException e) {            logger.error("onError excepiton",e);        }        logger.info("Throwable msg "+throwable.getMessage());    }}

上面的示例中，我們使用 @ServerEndpoint("/chat/{username}") 注解監(jiān)聽此地址的 WebSocket 信息，客戶端也是通過此地址向服務端接收和發(fā)送消息。同時使用@OnOpen?注解實現(xiàn)客戶端連接事件，@OnMessage?注解實現(xiàn)消息發(fā)送事件，@OnClose?注解實現(xiàn)客戶端連接關閉事件，@OnError注解實現(xiàn)消息錯誤事件。

step3：消息發(fā)送

我們先創(chuàng)建一個 WebSocketUtils 工具類，用來存儲聊天室在線的用戶信息，以及向客戶端發(fā)送消息的功能。具體代碼如下所示：

public final class WebSocketUtils {    private static final Logger logger = LoggerFactory.getLogger(WebSocketUtils.class);
    // 存儲 websocket session    public static final Map<String, Session> ONLINE_USER_SESSIONS = new ConcurrentHashMap<>();
    /**     * @param session 用戶 session     * @param message 發(fā)送內容     */public static void sendMessage(Session session, String message){        if (session == null) {            return;        }        final RemoteEndpoint.Basic basic = session.getBasicRemote();        if (basic == null) {            return;        }        try {            basic.sendText(message);        } catch (IOException e) {            logger.error("sendMessage IOException ",e);        }    }
    /**     * 推送消息到其他客戶端     * @param message     */public static void sendMessageAll(String message){        ONLINE_USER_SESSIONS.forEach((sessionId, session) -> sendMessage(session, message));    }}


step4：開啟 WebSocket 功能

修改項目啟動類，需要添加 @EnableWebSocket 開啟 WebSocket 功能。具體示例代碼如下所示：

@EnableWebSocket@SpringBootApplicationpublic class WebSocketApplication {
public static void main(String[] args){        SpringApplication.run(WebSocketApplication.class, args);    }
    @Beanpublic ServerEndpointExporter serverEndpointExporter(){        return new ServerEndpointExporter();    }}

以上，我們WebSocket服務端內容就實現(xiàn)完畢了。接下來我們驗證整個聊天室功能是否正常？

3.3 驗證測試

前面，我們已經把整個WebSocket聊天室的前后臺功能介紹完了。接下來我們驗證整個聊天室功能是否正常？

首先，啟動項目，在瀏覽器中分別輸入地址：http://localhost:8080/ 打開三個聊天室頁面。如下圖所示：

圖片


然后，分別在三個聊天室頁面中，輸入三個昵稱并加入聊天室，與服務端成功建立WebSocket連接，即可在聊天室發(fā)送消息。

圖片

點擊頁面上的離開聊天室，此頁面與服務端建立的WebSocket連接就會斷開。其他連接不受影響。

圖片

最后

以上，我們就把Spring Boot整合WebSocket，實現(xiàn)BBS聊天室的功能介紹完了。WebSocket能夠以非常簡單的方式，實現(xiàn)客戶端與服務器端的雙向通訊。在實際項目開發(fā)過程中使用越來越廣泛，希望大家能熟悉掌握。


責任編輯：武曉燕 來源： 架構師精進
SpringBootBBS方式
相關推薦

2023-01-05 09:17:58

2023-02-10 08:16:48

WebSocket簡易聊天室

2022-07-26 14:53:10

WebSocket網絡通信協(xié)議

2025-05-09 08:35:00

聊天室FastAPIWebSocket

2024-09-11 08:35:54

2011-06-09 15:44:29

Spring

2025-05-09 08:34:57

RSocketSpringBoot聊天系統(tǒng)

2011-12-15 11:11:51

JavaNIO

2015-07-06 10:42:18

PHP聊天室應用

2022-11-14 08:01:48

2021-10-14 18:46:29

Websocket瀏覽器API

2023-08-09 08:01:00

WebSockett服務器web

2021-11-16 09:38:10

鴻蒙HarmonyOS應用

2022-12-01 08:25:23

eTsTCP聊天室

2011-11-30 16:37:58

sync

2021-03-26 08:16:32

SpringbootWebsocket前端

2015-08-06 17:17:33

swoole聊天室

2024-10-07 10:45:12

2022-04-18 10:36:48

社交軟件聊天平臺rocket.cha

2024-09-12 14:50:08

點贊
收藏

51CTO技術棧公眾號