快捷導(dǎo)航

SpringBoot 整合WebSocket 前端 uniapp 訪問(wèn)的詳細(xì)方法

更新時(shí)間：2023年09月02日 15:47:40 作者：tengyuxin

這篇文章主要介紹了SpringBoot 整合WebSocket 前端 uniapp 訪問(wèn)的詳細(xì)方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一、SpringBoot 整合 WebSocket

此處的邏輯一共三步

第一步，添加依賴(lài)項(xiàng)

第二步，添加配置

第三，寫(xiě)基礎(chǔ)服務(wù)類(lèi)

1. 添加websocket依賴(lài)

  <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
            <!--需要版本的自己加-->
  </dependency>

2. 添加配置

@Configuration
public class WebSocketConfig {
    /**
     * ServerEndpointExporter 作用
     *
     * 這個(gè)Bean會(huì)自動(dòng)注冊(cè)使用@ServerEndpoint注解聲明的websocket endpoint
     *
     * @return
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

3. 基礎(chǔ)服務(wù)工具類(lèi)

 
@ServerEndpoint(value = "/ws/{userId}")
@Component
@Slf4j
public class WebSocketServer {
    private String userId;
    /**
     * @param session 是webSocket的會(huì)話(huà)對(duì)象，不是瀏覽器那個(gè)session
     * @param userId  用戶(hù)Id
     * @description 當(dāng)連接建立成功調(diào)用
     **/
    @OnOpen
    public void onOpen(Session session, @PathParam("userId") String userId) {
        this.userId = userId;
        System.out.println("建立連接");
    }
    /**
     * @param session 會(huì)話(huà)對(duì)象
     * @description 當(dāng)連接關(guān)閉調(diào)用
     **/
    @OnClose
    public void onClose(Session session) throws IOException {
        System.out.println("關(guān)閉連接");
    }
    /**
     * @param message 客戶(hù)端發(fā)送的消息
     * @param session 會(huì)話(huà)對(duì)象
     * @description 當(dāng)客戶(hù)端發(fā)送消息時(shí)調(diào)用
     **/
    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        try{
            System.out.println(message);
           //給客戶(hù)端發(fā)送消息
            session.getBasicRemote().sendText("服務(wù)端定義的消息");
        }catch(Exception e){
            e.printStackTrace();
        }
    }
}

二、uniapp 構(gòu)建webSocket與服務(wù)器通信

前端邏輯

第一步：跟服務(wù)器建立連接

第二步：監(jiān)聽(tīng)WebSocket連接打開(kāi)事件，并在這個(gè)監(jiān)聽(tīng)事件中，主動(dòng)給服務(wù)端發(fā)送數(shù)據(jù)

第三步：監(jiān)聽(tīng)WebSocket接受到服務(wù)器的消息事件（你給服務(wù)器發(fā)送消息時(shí)，它也會(huì)及時(shí)給前端返回?cái)?shù)據(jù)）

1. 具體代碼

 
function webSocketFun(Integer userId){
    //1. 通過(guò)用戶(hù)唯一id 與 服務(wù)端webSocket建立連接
    uni.connectSocket({
	    url: `http://192.168.2.18:8080/ws/${userId}`
    });
    //2. 監(jiān)聽(tīng)WebSocket連接打開(kāi)事件，并給服務(wù)端發(fā)送消息
    var socketOpen = false;
	var socketMsgQueue = ["滕","禹","鑫"];
    uni.onSocketOpen(function (res) {
		console.log('WebSocket連接已打開(kāi)');
		socketOpen = true;
		for (var i = 0; i < socketMsgQueue.length; i++) {
			sendSocketMessage(socketMsgQueue[i]);
		}
		socketMsgQueue = [];
	});
	function sendSocketMessage(msg) {
	  if (socketOpen) {
	    uni.sendSocketMessage({
	      data: msg
	    });
	  } else {
	    socketMsgQueue.push(msg);
	  }
	}
    //3. 監(jiān)聽(tīng)WebSocket接受到服務(wù)器的消息事件
    uni.onSocketMessage(function (res) {
	  console.log('收到服務(wù)器返回的內(nèi)容為 ======' + res.data);
	});
}

到此這篇關(guān)于SpringBoot 整合WebSocket 前端 uniapp 訪問(wèn)的文章就介紹到這了,更多相關(guān)SpringBoot 整合WebSocket 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: