首頁 > 軟體

SpringBoot如何新增WebSocket的方法範例

2020-10-30 12:03:07

一、WebSocket介紹

網站上的即時通訊是很常見的，比如網頁的QQ，聊天系統等。按照以往的技術能力通常是採用輪詢、Comet技術解決。
HTTP協定是非持久化的，單向的網路協定，在建立連線後只允許瀏覽器向伺服器發出請求後，伺服器才能返回相應的資料。當需要即時通訊時，通過輪詢在特定的時間間隔（如1秒），由瀏覽器向伺服器傳送Request請求，然後將最新的資料返回給瀏覽器。這樣的方法最明顯的缺點就是需要不斷的傳送請求，而且通常HTTP request的Header是非常長的，為了傳輸一個很小的資料 需要付出巨大的代價，是很不合算的，佔用了很多的寬頻。
缺點：會導致過多不必要的請求，浪費流量和伺服器資源，每一次請求、應答，都浪費了一定流量在相同的頭部資訊上
然而WebSocket的出現可以彌補這一缺點。在WebSocket中，只需要伺服器和瀏覽器通過HTTP協定進行一個握手的動作，然後單獨建立一條TCP的通訊通道進行資料的傳送。

二、WebSocket執行機制

WebSocket 是 HTML5 一種新的協定，也是一個典型的應用層協定。它實現了瀏覽器與伺服器全雙工通訊，能更好的節省伺服器資源和頻寬並達到實時通訊，它建立在 TCP 之上，同 HTTP 一樣通過 TCP 來傳輸資料，但是它和 HTTP 最大不同是：

WebSocket 是一種雙向通訊協定，在建立連線後，WebSocket 伺服器和 Browser/Client Agent 都能主動的向對方傳送或接收資料，就像 Socket 一樣；

WebSocket 需要類似 TCP 的使用者端和伺服器端通過握手連線，連線成功後才能相互通訊。
非 WebSocket 模式傳統 HTTP 使用者端與伺服器的互動如下圖所示：


使用 WebSocket 模式使用者端與伺服器的互動如下圖：

三、WebSocket實現

這裡通過一個簡單的聊天例程，實現spring boot +websocket程式碼的演示。
引入maven

<!-- websocket -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-websocket</artifactId>
      <version>2.3.4.RELEASE</version>
    </dependency>

設定類WebConfig

package org.antry.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * @ClassName WebSocketConfig
 * @Description TODO
 * @Autor TT
 * @Date 2020/10/9 23:00
 * @Version 1.0
 */
@Configuration
public class WebSocketConfig {

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

}

WebSocket類
在這個類裡，有一個集合，用來存放所有連線。
當有新的連線進來時，在onOpen（）方法中，我們每個連線都會存下對應id作為標識。假設這個id已經存過，則會關閉此連線，防止同一個id多處登入。
連線斷開時，在onClose()方法中，將此連線移出集合。
當有新的訊息傳送過來時，會去遍歷連線，找到對應接收人id的連線，然後把訊息推播給接收人。

package org.antry.websocket;
import org.springframework.stereotype.Component;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.List;
import java.util.concurrent.CopyOnWriteArrayList;
import java.util.concurrent.atomic.AtomicInteger;
/**
 * @ClassName MyWebsocket
 * @Description TODO
 * @Autor TT
 * @Date 2020/10/10 11:02
 * @Version 1.0
 */
@ServerEndpoint(value = "/websocket/{user}")
@Component
public class MyWebsocket {
  // 通過類似GET請求方式傳遞引數的方法（伺服器端採用第二種方法"WebSocketHandler"實現）
//  websocket = new WebSocket("ws://127.0.0.1:18080/testWebsocket?id=23&name=Lebron");
  /**
   * 線上人數
   */
  public static AtomicInteger onlineNumber = new AtomicInteger(0);

  /**
   * 所有的物件，每次連線建立，都會將我們自己定義的MyWebsocket存放到List中，
   */
  public static List<MyWebsocket> webSockets = new CopyOnWriteArrayList<MyWebsocket>();

  /**
   * 對談，與某個使用者端的連線對談，需要通過它來給使用者端傳送資料
   */
  private Session session;

  /**
   * 每個對談的使用者
   */
  private String user;
  /**
   * 建立連線
   *
   * @param session
   */
  @OnOpen
  public void onOpen(Session session, @PathParam("user") String user) {
    System.err.println(user);
    if (user == null || "".equals(user)) {
      try {
        session.close();
      } catch (IOException e) {
        e.printStackTrace();
      }
      return;
    }
    onlineNumber.incrementAndGet();
    for (MyWebsocket MyWebsocket : webSockets) {
      if (user.equals(MyWebsocket.user)) {
        try {
          session.close();
        } catch (IOException e) {
          e.printStackTrace();
        }

        return;
      }
    }
    this.session = session;
    this.user = user;
    webSockets.add(this);
  }
  /**
   * 連線關閉
   */
  @OnClose
  public void onClose() {
    onlineNumber.decrementAndGet();
    webSockets.remove(this);
  }
  /**
   * 收到使用者端的訊息
   *
   * @param message 訊息
   * @param session 對談
   */
  @OnMessage
  public void onMessage(String message, Session session, @PathParam("user") String user) {
    System.err.println(message);
    String[] strArr = message.split("~");
    pushMessage(user,strArr[0],strArr[1]);
  }
  /**
   * 傳送訊息
   *
   * @param message 訊息
   */
  public void sendMessage(String message) {
    try {
      session.getBasicRemote().sendText(message);
    } catch (IOException e) {
      e.printStackTrace();
    }
  }

  /**
   * 訊息推播
   *
   * @param message
   * @param uuid  uuid為空則推播全部人員
   */
  public static void pushMessage(String user, String message, String uuid) {

    if (uuid == null || "".equals(uuid)) {
      for (MyWebsocket MyWebsocket : webSockets) {
        MyWebsocket.sendMessage(user + ":" + message);
      }
    } else {
      for (MyWebsocket MyWebsocket : webSockets) {
        if (uuid.equals(MyWebsocket.user)) {
          MyWebsocket.sendMessage(message);
        }
      }
    }
  }
}

兩個簡單的前端頁面，他們的不同是，接收id和傳送id不同。
testOne.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>聊天視窗1</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="public/dist/lib/uploader/zui.uploader.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">

</head>
<body>
  <div>
    <div class="input-group">
      <input type="text" class="form-control" id="msg">
      <span class="input-group-btn">
    <button class="btn btn-default" type="button" onclick="send()">傳送</button>
 </span>
    </div>
  </div>

<script src="public/dist/lib/jquery/jquery.js"></script>
<script src="public/dist/js/zui.min.js"></script>
<script src="public/layer/layer.js"></script>
<script src="public/js/function.js"></script>
<script src="public/js/testOne.js"></script>
</body>
</html>

testOne.js

var websocket = null;
var sendId = 0;
var receiveId = 1;
//---------------------------
/**
 * 初始化websocket
 * @param id
 */
doInit(sendId)
function doInit(sendId){
  if ('WebSocket' in window) {
    websocket = new WebSocket("ws:localhost:10086/websocket/" + sendId);
  } else {
    alert("瀏覽器不支援");
  }
  websocket.onopen = function () {
    addMessage("webscoket已經連線成功");
  };
  websocket.onclose = function () {
    addMessage("webscoket連線失敗");
  };
  websocket.onmessage = function (event) {
    alert("收到訊息："+event.data);
  };
  websocket.onerror = function () {
    addMessage("webscoket連線失敗");
  };
}
/**
 * 傳送一條訊息
 */
function send(){
  websocket.send(value('msg')+"~"+receiveId);
}
/**
 * 測試列印偵錯資訊用
 * @param msg
 */
function addMessage(msg) {
  console.log(msg)
}

testTwo.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>聊天視窗2</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="public/dist/lib/uploader/zui.uploader.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
</head>
<body>
<div>
  <div class="input-group">
    <input type="text" class="form-control" id="msg">
    <span class="input-group-btn">
    <button class="btn btn-default" type="button" onclick="send()">傳送</button>
 </span>
  </div>
</div>

<script src="public/dist/lib/jquery/jquery.js"></script>
<script src="public/dist/js/zui.min.js"></script>
<script src="public/layer/layer.js"></script>
<script src="public/js/function.js"></script>
<script src="public/js/testTwo.js"></script>
</body>
</html>

testTwo.js

var websocket = null;
var sendId = 1;
var receiveId = 0;
//---------------------------
/**
 * 初始化websocket
 * @param id
 */
doInit(sendId)
function doInit(receiveId){
  if ('WebSocket' in window) {
    websocket = new WebSocket("ws:localhost:10086/websocket/" + sendId);
  } else {
    alert("瀏覽器不支援");
  }
  websocket.onopen = function () {
    addMessage("webscoket已經連線成功");
  };
  websocket.onclose = function () {
    addMessage("webscoket連線失敗");
  };
  websocket.onmessage = function (event) {
    alert("收到訊息："+event.data);
  };
  websocket.onerror = function () {
    addMessage("webscoket連線失敗");
  };
}
/**
 * 傳送一條訊息
 */
function send(){
  websocket.send(value('msg')+"~"+receiveId);
}
/**
 * 測試列印偵錯資訊用
 * @param msg
 */
function addMessage(msg) {
  console.log(msg)
}

分別用兩個瀏覽器，開啟這兩個頁面進行存取。結果如下

到此這篇關於SpringBoot如何新增WebSocket的方法範例的文章就介紹到這了,更多相關SpringBoot新增WebSocket內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！


相關文章

IT145.com E-mail:sddin#qq.com