快捷導(dǎo)航

SpringBoot實(shí)現(xiàn)WebSocket全雙工通信的項(xiàng)目實(shí)踐

更新時(shí)間：2023年05月29日 15:11:19 作者：失去斗志的菜鳥

本文主要介紹了SpringBoot實(shí)現(xiàn)WebSocket全雙工通信的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、后端pom.xml引入依賴

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

二、啟動(dòng)類注入Bean

@SpringBootApplication
public class TtSdemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(TtSdemoApplication.class, args);
    }
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

三、編寫WebSocket類

package com.zj.ttsdemo.controller;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
/**
 * Created by
 *
 * @Author: JoyceZhang
 * @Date: 2023/05/25/15:28
 * @Description:
 */
@Slf4j
@ServerEndpoint(value="/websocket")
@Component
public class Websocket {
    private static Session[] sessionContainer = new Session[2];
    /**
     * A,B與服務(wù)器建立連接
     */
    @OnOpen
    public void onOpen(Session session) {
        if (sessionContainer[0] == null && sessionContainer[1] == null) {
            sessionContainer[0] = session;
            log.info("a連接成功");
        } else if (sessionContainer[0] != null && sessionContainer[1] == null) {
            sessionContainer[1] = session;
            log.info("b連接成功");
        } else {
            log.info("連接失敗");
        }
    }
    /**
     * 鏈接關(guān)閉
     */
    @OnClose
    public void onClose(Session session) {
        for(int i=0;i<sessionContainer.length;i++){
            if(sessionContainer[i] == session){
                sessionContainer[i] = null;
                log.info((i==0?"a":"b")+"斷開(kāi)連接");
            }
        }
    }
    /**
     * 得到另一個(gè)session對(duì)象
     */
    private Session getOtherSession(Session session) {
       for(int i = 0; i<sessionContainer.length;i++){
           if(session == sessionContainer[i]){
               log.info("獲取到另一個(gè)session");
               return sessionContainer[(i==0?1:0)];
           }
       }
         return null;
    }
    /**
     * 向另一個(gè)session發(fā)送消息
     */
    @OnMessage
    public void sendMessage(String message,Session session) throws IOException{
        Session otherSession = this.getOtherSession(session);
        log.info("發(fā)送消息"+message+"到"+(otherSession==sessionContainer[0]?"a":"b"));
        otherSession.getBasicRemote().sendText(message);
    }
    /**
     * 異常處理
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("發(fā)生錯(cuò)誤");
        error.printStackTrace();
    }
}

四、編寫測(cè)試頁(yè)面

在resource/static目錄下編寫chat.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input id = "text" type ="text">
<button onclick = "send()">Send</button>
<button onclick = "closeWebSocket()">Close</button>
<div id = "message"></div>
</body>
<script type="text/javascript">
    var websocket = null;
    //判斷當(dāng)前瀏覽器是否支持WebSocket
    if('WebSocket' in window){
        websocket = new WebSocket("ws://localhost:8083/websocket");
    }
    else{
        alert('Not support websocket')
    }
    //連接發(fā)生錯(cuò)誤的回調(diào)方法
    websocket.onerror = function(){
        setMessageInnerHTML("服務(wù)器通信故障");
    };
    //連接成功建立的回調(diào)方法
    websocket.onopen = function(event){
        setMessageInnerHTML("與服務(wù)器通信成功");
    }
    //接收到消息的回調(diào)方法
    websocket.onmessage = function(event){
        setMessageInnerHTML(event.data);
    }
    //連接關(guān)閉的回調(diào)方法
    websocket.onclose = function(){
        setMessageInnerHTML("WebSocket連接關(guān)閉");
    }
    //監(jiān)聽(tīng)窗口關(guān)閉事件，當(dāng)窗口關(guān)閉時(shí)，主動(dòng)去關(guān)閉websocket連接，防止連接還沒(méi)斷開(kāi)就關(guān)閉窗口，server端會(huì)拋異常。
    window.onbeforeunload = function(){
        websocket.close();
    }
    //將消息顯示在網(wǎng)頁(yè)上
    function setMessageInnerHTML(innerHTML){
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }
    //關(guān)閉連接
    function closeWebSocket(){
        websocket.close();
    }
    //發(fā)送消息
    function send(){
        var message = document.getElementById('text').value;
        websocket.send(message);
    }
</script>
</html>

五、通信測(cè)試

【IT老齊238】十分鐘上手WebSocket全雙工通信協(xié)議_嗶哩嗶哩_bilibili

到此這篇關(guān)于SpringBoot實(shí)現(xiàn)WebSocket全雙工通信的項(xiàng)目實(shí)踐的文章就介紹到這了,更多相關(guān)SpringBoot WebSocket全雙工通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: