2. 程式人生 > >SpringBoot 使用WebSocket建立聊天室

SpringBoot 使用WebSocket建立聊天室

阿新 • • 發佈：2019-09-03

一、什麼是 WebSocket

1. 簡介

WebSocket 協議是基於 TCP 的一種網路協議，它實現了瀏覽器與伺服器全雙工（Full-duplex）通訊——允許伺服器主動傳送資訊給客戶端。

以前，很多網站為了實現推送技術，所用的技術都是輪詢。輪詢是在特定的的時間間隔（如每 1 秒），由瀏覽器對伺服器發出 HTTP 請求，然後由伺服器返回最新的資料給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點，即瀏覽器需要不斷地向伺服器發出請求，然而 HTTP 請求可能包含較長的頭部，其中真正有效的資料可能只是很小的一部分，顯然這樣會浪費很多的頻寬等資源。

在這種情況下，HTML 5 定義了 WebSocket 協議

，能更好得節省伺服器資源和頻寬，並且能夠更實時地進行通訊。WebSocket 協議在 2008 年誕生，2011 年成為國際標準，現在主流的瀏覽器都已經支援。

它的最大特點就是，伺服器可以主動向客戶端推送資訊，客戶端也可以主動向伺服器傳送資訊，是真正的雙向平等對話，屬於伺服器推送技術的一種。在 WebSocket API 中，瀏覽器和伺服器只需要完成一次握手，兩者之間就直接可以建立永續性的連線，並進行雙向資料傳輸。

2. 優點

  • 較少的控制開銷

在連線建立後，伺服器和客戶端之間交換資料時，用於協議控制的資料包頭部相對較小。在不包含擴充套件的情況下，對於伺服器到客戶端的內容，此頭部大小隻有 2 至 10 位元組（和資料包長度有關）；對於客戶端到伺服器的內容，此頭部還需要加上額外的 4 位元組的掩碼。相對於 HTTP 請求每次都要攜帶完整的頭部，此項開銷顯著減少了。

  • 更強的實時性

由於協議是全雙工的，所以伺服器可以隨時主動給客戶端下發資料。相對於 HTTP 請求需要等待客戶端發起請求服務端才能響應，延遲明顯更少；即使是和 Comet 等類似的長輪詢比較，其也能在短時間內更多次地傳遞資料。

  • 保持連線狀態

與 HTTP 不同的是，Websocket 需要先建立連線，這就使得其成為一種有狀態的協議，之後通訊時可以省略部分狀態資訊，而 HTTP 請求可能需要在每個請求都攜帶狀態資訊（如身份認證等）。

  • 更好的二進位制支援

Websocket 定義了二進位制幀，相對 HTTP，可以更輕鬆地處理二進位制內容。 可以支援擴充套件。Websocket 定義了擴充套件，使用者可以擴充套件協議、實現部分自定義的子協議。如部分瀏覽器支援壓縮等。

  • 更好的壓縮效果

相對於 HTTP 壓縮，Websocket 在適當的擴充套件支援下，可以沿用之前內容的上下文，在傳遞類似的資料時，可以顯著地提高壓縮率。

WebSocket 在握手之後便直接基於 TCP 進行訊息通訊，但 WebSocket 只是 TCP 上面非常輕的一層，它僅僅將 TCP 的位元組流轉換成訊息流（文字或二進位制），至於怎麼解析這些訊息的內容完全依賴於應用本身。

因此為了協助 Client 與 Server 進行訊息格式的協商，WebSocket 在握手的時候保留了一個子協議欄位。

二、Stomp 和 WebSocket

STOMP 即 Simple（or Streaming）Text Orientated Messaging Protocol，簡單（流）文字定向訊息協議，它提供了一個可互操作的連線格式，允許 STOMP 客戶端與任意 STOMP 訊息代理（Broker）進行互動。STOMP 協議由於設計簡單，易於開發客戶端，因此在多種語言和多種平臺上得到了廣泛的應用。

STOMP 協議並不是為 Websocket 設計的，它是屬於訊息佇列的一種協議，它和 Amqp、Jms 平級。只不過由於它的簡單性恰巧可以用於定義 Websocket 的訊息體格式。可以這麼理解，Websocket 結合 Stomp 子協議段，來讓客戶端和伺服器在通訊上定義的訊息內容達成一致。

STOMP 協議分為客戶端和服務端，具體如下。

1. STOMP 服務端

STOMP 服務端被設計為客戶端可以向其傳送訊息的一組目標地址。STOMP 協議並沒有規定目標地址的格式，它由使用協議的應用自己來定義。例如，/topic/a、/queue/a、queue-a 對於 STOMP 協議來說都是正確的。應用可以自己規定不同的格式以此來表明不同格式代表的含義。比如應用自己可以定義以 /topic 打頭的為釋出訂閱模式，訊息會被所有消費者客戶端收到，以 /user 開頭的為點對點模式，只會被一個消費者客戶端收到。

2. STOMP 客戶端

  • 對於 STOMP 協議來說，客戶端會扮演下列兩種角色的任意一種：
    • 作為生產者，通過 SEND 幀傳送訊息到指定的地址；
    • 作為消費者，通過傳送 SUBSCRIBE 幀到已知地址來進行訊息訂閱，而當生產者傳送訊息到這個訂閱地址後，訂閱該地址的其他消費者會受到通過 MESSAGE 幀收到該訊息。
  • 實際上，WebSocket 結合 STOMP 相當於構建了一個訊息分發佇列，客戶端可以在上述兩個角色間轉換，訂閱機制保證了一個客戶端訊息可以通過伺服器廣播到多個其他客戶端，作為生產者，又可以通過伺服器來發送點對點訊息。

3. STOMP 幀結構

COMMAND

header1:value1

header2:value2

Body^@

其中，^@ 表示行結束符。

  • 一個 STOMP 幀由三部分組成：命令、Header（頭資訊）、Body（訊息體）。

    • 命令使用 UTF-8 編碼格式，命令有 SEND、SUBSCRIBE、MESSAGE、CONNECT、CONNECTED 等。
    • Header 也使用 UTF-8 編碼格式，它類似 HTTP 的 Header，有 content-length、content-type 等。
    • Body 可以是二進位制也可以是文字，注意 Body 與 Header 間通過一個空行（EOL）來分隔。

  • 來看一個實際的幀例子：

SEND
destination:/broker/roomId/1
content-length:57

{“type":"OUT","content":"ossxxxxx-wq-yyyyyyyy"}
  • 第 1 行：表明此幀為 SEND 幀，是 COMMAND 欄位。
  • 第 2 行：Header 欄位，訊息要傳送的目的地址，是相對地址。
  • 第 3 行：Header 欄位，訊息體字元長度。
  • 第 4 行：空行，間隔 Header 與 Body。
  • 第 5 行：訊息體，為自定義的 JSON 結構。

更多 STOMP 協議細節，可以參考 STOMP官網

三、WebSocket 事件

  • Websocket 使用 ws 或 wss 的統一資源標誌符，類似於 HTTPS，其中 wss 表示在 TLS 之上的 Websocket。例如：
ws://example.com/wsapi
wss://secure.example.com/
  • Websocket 使用和 HTTP 相同的 TCP 埠，可以繞過大多數防火牆的限制。預設情況下，
  • Websocket 協議使用 80 埠；執行在 TLS 之上時，預設使用 443 埠。
事件事件處理程式描述
openSokcket onopen連線建立時觸發
messageSokcket onmessage客戶端接收服務端資料時觸發
errorSokcket onerror通訊發生錯誤時觸發
closeSokcket onclose連結關閉時觸發

下面是一個頁面使用 Websocket 的示例：

var ws = new WebSocket("ws://localhost:8080");

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
};
  • Spring Boot 提供了 Websocket 元件 spring-boot-starter-websocket，用來支援在 Spring Boot 環境下對 Websocket 的使用。

四、Websocket 聊天室

  • Websocket 雙相通訊的特性非常適合開發線上聊天室，這裡以線上多人聊天室為示例，演示 Spring Boot Websocket 的使用。
  • 首先我們梳理一下聊天室都有什麼功能：
    • 支援使用者加入聊天室，對應到 Websocket 技術就是建立連線 onopen
    • 支援使用者退出聊天室，對應到 Websocket 技術就是關閉連線 onclose
    • 支援使用者在聊天室傳送訊息，對應到 Websocket 技術就是呼叫 onmessage 傳送訊息
    • 支援異常時提示，對應到 Websocket 技術 onerror

1. 頁面開發

  • 利用前端框架 Bootstrap 渲染頁面，使用 HTML 搭建頁面結構，完整頁面內容如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chat room websocket</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery-3.2.1.min.js" ></script>
</head>
<body class="container" style="width: 60%">
<div class="form-group" ></br>
    <h5>聊天室</h5>
    <textarea id="message_content"  class="form-control"  readonly="readonly" cols="50" rows="10"></textarea>
</div>
<div class="form-group" >
    <label for="in_user_name">使用者姓名 &nbsp;</label>
    <input id="in_user_name" value="" class="form-control" /></br>
    <button id="user_join" class="btn btn-success" >加入聊天室</button>
    <button id="user_exit" class="btn btn-warning" >離開聊天室</button>
</div>
<div class="form-group" >
    <label for="in_room_msg" >群發訊息 &nbsp;</label>
    <input id="in_room_msg" value="" class="form-control" /></br>
    <button id="user_send_all" class="btn btn-info" >傳送訊息</button>
</div>
</body>
</html>
  • 最上面使用 textarea 畫一個對話方塊，用來顯示聊天室的內容；中間部分新增使用者加入聊天室和離開聊天室的按鈕，按鈕上面是輸入使用者名稱的入口；頁面最下面添加發送訊息的入口，頁面顯示效果如下：

  • 接下來在頁面新增 WebSocket 通訊程式碼：
<script type="text/javascript">
    $(document).ready(function(){
        var urlPrefix ='ws://localhost:8080/chat-room/';
        var ws = null;
        $('#user_join').click(function(){
            var username = $('#in_user_name').val();
            var url = urlPrefix + username;
            ws = new WebSocket(url);
            ws.onopen = function () {
                console.log("建立 websocket 連線...");
            };
            ws.onmessage = function(event){
                //服務端傳送的訊息
                $('#message_content').append(event.data+'\n');
            };
            ws.onclose = function(){
                $('#message_content').append('使用者['+username+'] 已經離開聊天室!');
                console.log("關閉 websocket 連線...");
            }
        });
        //客戶端傳送訊息到伺服器
        $('#user_send_all').click(function(){
            var msg = $('#in_room_msg').val();
            if(ws){
                ws.send(msg);
            }
        });
        // 退出聊天室
        $('#user_exit').click(function(){
            if(ws){
                ws.close();
            }
        });
    })
</script>
  • 這段程式碼的功能主要是監聽三個按鈕的點選事件，當用戶登入、離開、傳送訊息是呼叫對應的 WebSocket 事件，將資訊傳送給服務端。同時開啟頁面時建立了 WebSocket 物件，頁面會監控 WebSocket 事件，如果後端服務和前端通訊室將對應的資訊展示在頁面。

2. 服務端開發

- 引入依賴

<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>

主要新增 Web 和 Websocket 元件。

- 啟動類

啟動類需要新增 @EnableWebSocket 開啟 WebSocket 功能。

@EnableWebSocket
@SpringBootApplication
public class WebSocketApplication {

    public static void main(String[] args) {
        SpringApplication.run(WebSocketApplication.class, args);
    }

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

- 請求接收

  • 在建立服務端訊息接收功能之前，我們先建立一個 WebSocketUtils 工具類，用來儲存聊天室線上的使用者資訊，以及傳送訊息的功能。首先定義一個全域性變數 ONLINE_USER_SESSIONS 用來儲存線上使用者，使用 ConcurrentHashMap 提升高併發時效率。
public static final Map<String, Session> ONLINE_USER_SESSIONS = new ConcurrentHashMap<>();
  • 封裝訊息傳送方法，在傳送之前首先判單使用者是否存在再進行傳送：
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);
    }
}

聊天室的訊息是所有線上使用者可見，因此每次訊息的觸發實際上是遍歷所有線上使用者，給每個線上使用者傳送訊息。

public static void sendMessageAll(String message) {
    ONLINE_USER_SESSIONS.forEach((sessionId, session) -> sendMessage(session, message));
}

  • 其中，ONLINE_USER_SESSIONS.forEach((sessionId, session) -> sendMessage(session, message)) 是 JDK 1.8 forEach 的簡潔寫法。

  • 這樣我們在建立 ChatRoomServerEndpoint 類的時候就可以直接將工具類的方法和全域性變數匯入：

import static com.neo.utils.WebSocketUtils.ONLINE_USER_SESSIONS;
import static com.neo.utils.WebSocketUtils.sendMessageAll;
  • 接收類上需要新增 @ServerEndpoint("url") 代表監聽此地址的 WebSocket 資訊。
@RestController
@ServerEndpoint("/chat-room/{username}")
public class ChatRoomServerEndpoint {
}
  • 使用者登入聊天室時，將使用者資訊新增到 ONLINE_USER_SESSIONS 中，同時通知聊天室中的人。其中，@OnOpen 註解和前端的 onopen 事件一致，表示使用者建立連線時觸發。
@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 監聽傳送訊息的事件。
@OnMessage
public void onMessage(@PathParam("username") String username, String message) {
    logger.info("傳送訊息："+message);
    sendMessageAll("使用者[" + username + "] : " + message);
}
  • 當用戶離開聊天室後，需要將使用者資訊從 ONLINE_USER_SESSIONS 移除，並且通知到線上的其他使用者,其中，@OnClose 監聽使用者斷開連線事件。
@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);
    }
}
  • 當 WebSocket 連接出現異常時，出觸發 @OnError 事件，可以在此方法內記錄下錯誤的異常資訊，並關閉使用者連線。
@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());
}
  • 到此我們服務端內容就開發完畢了。

- 測試

  • 啟動 spring-boot-websocket 專案，在瀏覽器中輸入地址 http://localhost:8080/ 開啟兩個頁面進行測試。
  • 在第一個頁面中以使用者“小王”登入聊天室，第二個頁面以“小張”登入聊天室。
小王：你是誰？
小張：你猜
小王：我猜好了！
小張：你猜的什麼
小王：你猜？
小張：…

小張離開聊天室…
  • 大家在兩個頁面模式小王和小張對話，可以看到兩個頁面的展示效果，頁面都可實時無重新整理展示最新聊天內容，頁面最終展示效果如下：

五、總結

本節介紹了 WebSocket，以及 WebSocket 的相關特性和優點，Spring Boot 提供了 WebSocket 對應的元件包，因此很容易讓我們整合在專案中。利用 WebSocket 可以雙向通訊的特點做了一個簡易版的聊天室，來驗證 WebSocket 相關特性，通過示例實踐發現 WebSocket 雙向通訊機制非常高效簡潔，特別適合在服務端和客戶端通訊較多的場景下使用，相比以前的輪詢方式更加優雅

相關推薦

SpringBoot 使用WebSocket建立聊天室

一、什麼是 WebSocket 1. 簡介 WebSocket 協議是基於 TCP 的一種網路協議，它實現了瀏覽器與伺服器全雙工

WebSocket建立聊天室

基於python中flask框架實現 所以依賴的環境： python3  flask  gevent-webs 一，帶暱稱的群聊 #!/usr/bin/env python # -*- coding:utf8 -*- import json from flask i

使用 Spring Boot WebSocket 建立聊天室

1    第2-10課：使用Spring Boot WebSocket建立聊天室 1.1.1       什麼是 WebSocket 以前，很多網站為了實現推送技術，所用的技術都是輪詢。輪詢是在特定的的時間間隔（如每

微服務-springboot+websocket線上聊天室(多人聊天)

一.引入依賴 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websock

用SpringBoot整合Netty開發一個基於WebSocket的聊天室

前言 基於SpringBoot，藉助Netty控制長連結，使用WebSocket協議做一個實時的聊天室。 專案效果 專案統一登入路徑： http://localhost:8080/chat/netty 使用者名稱隨機生成，離線呼叫非同步方法，資料寫操作，登入顯示歷史聊天

SpringBoot整合WebSocket 打造聊天室

SpringBoot 整合 WebSocket 什麼是WebSocket? WebSocket是HTML5開始提供的一種瀏覽器與伺服器間進行全雙工通訊的網路技術。依靠這種技術可以實現客戶端和伺服器端的長連線，雙向實時通訊。 WebSocket協議被設計來取代用HTTP作為傳

搭建Websocket簡易聊天室

eui imp str %s 管理 關閉連接 string self stat 本文，我們通過Egret和Node.js實現一個在線聊天室的demo。主要包括：聊天，改用戶名，查看其他用戶在線狀態的功能。大致流程為，用戶訪問網頁，即進入聊天狀態，成為新遊客，通過底部的輸入框

PHP websocket之聊天室實現

six tee blocking abc 監聽 nodes 內容 bug 獲取 PHP部分 &lt;?php error_reporting(E_ALL); set_time_limit(0);// 設置超時時間為無限,防止超時 date_default_timez

NetCore MVC WebSocket 簡易聊天室

前端程式碼：  function SocketHelper(params) { var options = $.extend({}, { uri: "ws://" + window.location.host + "//socket/Connect",

使用unity通過tcp建立聊天室

1.伺服器端建立 使用while迴圈不斷地接收客戶端的請求，將連線儲存到clientList中 class Program { static List<Client> clientList = new List<Client>();

NetCore MVC WebSocket 簡易聊天室

前端程式碼：  function SocketHelper(params) { var options = $.extend({}, { uri: "ws://" + window.location.host + "//socket/Connect",

SpringBoot 搭建簡單聊天室

SpringBoot 搭建簡單聊天室（queue 點對點） 1、引用 SpringBoot 搭建 WebSocket 連結 　　https://www.cnblogs.com/yi1036943655/p/10089100.html 2、整合Spring Security package com

Go實戰 golang中使用WebSocket實時聊天室 gorilla/websocket nkovacs/go s

                     生命不止，繼續 go go go!!!其實，早就應該跟大家分享golang中關於websocket的使用，但是一直不知道從何入手，也不能夠很清晰的描述出來。今天就淺嘗輒止，通過第三方庫實現websocket。WebSocketWebSocket協議是基於TCP的一種新

ServerSocket建立聊天室伺服器（二）

（平時操作，留下痕跡，以後效，君若受益，吾之大幸） *編寫完伺服器，可開啟終端進行測試 開啟cmd 命令 鍵入 telnet localhost  +(埠號) 例如： 回車 便與伺服器埠建立連線 一、MyServerSocket.class package

基於django channel 實現websocket的聊天室

cati import 浪費 pip 鏈接 配置 ner templates oca websocket ? 網易聊天室? ? web微信? ? 直播? 假如你工作以後,你的老板讓你來開發一個內部的微信程序,你需要怎麽辦?我們先來分析一下裏面的技術難點 消息的

SpringBoot整合WebSocket，打造一個聊天室

本文，我們來講下SpringBoot整合WebSocket，打造一個聊天室。   WebSocket 是什麼？   WebSocket 是一種網路通訊協議，RFC6455 定義了它的通訊標準。 瞭解計算機網路協議的人應該都知道，HTTP 協議是一種無狀態

【原創】基於Springboot、WebSocket的一對一聊天室

基於Springboot、WebSocket、STOMP協議、SockJS協議的一對一聊天室 作者：SGCoder，轉載需註明。 因為最近學校一個專案，需要實現與商家溝通的這麼一個需求，所以經過一段時間的網上收集資料，瞭解到了要主動讓伺服器推送訊息，更好的辦法

微服務-springboot+websocket在線聊天室

span mar 容器 pre 關閉 eem pen star request 一.引入依賴 <dependency> <groupId>org.springframework.boot</groupId>

SpringBoot整合WebSocket【基於STOMP協議】進行點對點[一對一]和廣播[一對多]實時推送，內附簡易聊天室demo

最近專案來了新需求，需要做一個實時推送的功能，伺服器主動推送訊息給客戶端，在網上經過一輪搜查之後，確定使用WebSocket來進行開發。以前經常聽說WebSocket的神奇之處，如今終於可以嘗試使用它了。1.淺談WebSocketWebSocket是在HTML5基礎上單個TC

websocket搭建的聊天室

說明 原理 example port adc type htm 消息 var 在前後端數據交互的時候我們經常使用的是ajax，用的是傳統的http協議，而http協議有個致命的缺點，就是請求一結束，連接就斷開了， 我們為了保持這個鏈接的，通常會使用cookie，而自從h5出