技術標籤：websocket

springboot整合websocket

• • 前言
  • springboot專案如何使用websocket
  • • 1.匯入依賴
    • 2.配置websocket
    • 3.後臺使用websocket
    • 4.前端使用websocket

前言

WebSocket是一種在單個TCP連線上進行全雙工通訊的協議。WebSocket通訊協議於2011年被IETF定為標準RFC 6455，並由RFC7936補充規範。WebSocket API也被W3C定為標準。
WebSocket使得客戶端和伺服器之間的資料交換變得更加簡單，允許服務端主動向客戶端推送資料。在WebSocket API中，瀏覽器和伺服器只需要完成一次握手，兩者之間就直接可以建立永續性的連線，並進行雙向資料傳輸。

springboot專案如何使用websocket

使用websocket非常簡單，下面分成四個部分講解

1.匯入依賴

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

2.配置websocket

@Configuration
 
  //配置類交個spring管理
public class WebSocketConfig {
    //websocket需要的bean
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

3.後臺使用websocket

後端的websocket主要有一下方法組成
1.onOpen 建立連線（保持連線）時，用於推送訊息
2.onClose 連線關閉時
3.onMessage 收到到訊息時
4.onError 發生錯誤時

下面的程式碼只用於演示進度條的進度值推送
當然我這裡用到了自己寫的WebSocketDto
用於傳輸進度值

public class WebSocketDto {

    private static Lock lock = new ReentrantLock();

    public volatile static int process=0;

    public static boolean errorStatus=false;

    public static void addprocess(){
        lock.lock();
        try {
            System.out.println("addprocess得到鎖");
            WebSocketDto.process+=1;
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            lock.unlock();//釋放鎖
        }

    }
    public static void zeroprocess(){
        lock.lock();
        try {
            System.out.println("zero得到鎖");
            WebSocketDto.process=0;
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            lock.unlock();
        }
    }
}

這裡正式開始後臺websocket程式碼

@ServerEndpoint("/clientoneWsSocket")  //自定義的服務名
@Service
public class WebSocketController {

        //建立連線推送訊息
        @OnOpen
        public void onOpen(Session session){
            while (true) {

                synchronized (session){
                    //    傳送訊息到頁面
//                    this.sendMessage(session,  WebSocketDto.autidinfo);
                    if(WebSocketDto.process<100){
                        if(WebSocketDto.process==1){
                            try {
                                Thread.sleep(500);
                            } catch (InterruptedException e) {
                                e.printStackTrace();
                            }
                        }
                        WebSocketDto.addprocess();
                    }

                    this.sendMessage(session,WebSocketDto.process+"");
                    //如果推送發生錯誤就會斷開連線
                    if(WebSocketDto.errorStatus){
//                狀態復原
                        WebSocketDto.errorStatus=false;
                        break;
                    }

                    if(WebSocketDto.process==100){
                        //            將狀態復原
                        WebSocketDto.zeroprocess();
                    }

                    try {
                        Thread.sleep(100);

                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }

                }

            }
        }


        @OnClose
        public void onClose() {

        }

        @OnMessage
        public void onMessage(String message,Session session) throws IOException {
            System.out.println(message);
            this.sendMessage(session,"後臺收到了你的訊息:"+message);
        }

        @OnError
        public void onError(Session session, Throwable error) {
            System.out.println(session+"/");
        }

        //傳送訊息
        public void sendMessage(Session session, String msg){
            try {
                session.getBasicRemote().sendText(msg);
            } catch (Exception e) {
//                e.printStackTrace();
                System.out.println("資訊推送已關閉連線"+e.getMessage());
                //改變狀態
                WebSocketDto.errorStatus=true;
            }
        }
}

4.前端使用websocket

使用javascript書寫和後端也相差不大，看程式碼吧

 if ("WebSocket" in window)
            {
                // alert("您的瀏覽器支援 WebSocket!");
                // 開啟一個 web socket
                var ws = new WebSocket("ws://127.0.0.1:8081/clientoneWsSocket");
                ws.onopen = function()
                {
                    // Web Socket 已連線上，使用 send() 方法傳送資料
                    ws.send("我是前端頁面");
                    // alert("資料傳送中...");
                };
                ws.onmessage =async (evt)=>
                {
                    //接收到的資料
                    var received_msg = evt.data;
                    // console.log(received_msg);
                    let af=parseInt(received_msg);
                    //由於我這裡使用的時vue 所以可以直接對進度條賦值，如果你使用的時常規的js，那麼就需要獲取dom進行賦值操作
                    this.processval=af;
                };
                ws.onclose = function()
                {
                    // 關閉 websocket
                    alert("連線已關閉...");
                };
            }else{
                // 瀏覽器不支援 WebSocket
                alert("您的瀏覽器不支援 WebSocket!,無法實時推送新訊息");
            }

釘完畢，看下結果吧