快捷導(dǎo)航

vue+SpringBoot使用WebSocket方式

更新時間：2025年02月21日 16:51:39 作者：遇見很ok

WebSocket是一種全雙工通信協(xié)議,通過HTTP升級機制建立連接,支持實時雙向數(shù)據(jù)傳輸,示例代碼展示了如何在Java Spring Boot和Vue.js中實現(xiàn)WebSocket服務(wù)和客戶端

WebSocket 原理

WebSocket 是一種網(wǎng)絡(luò)通信協(xié)議，旨在通過單一的、持久的連接，在客戶端和服務(wù)端之間進行雙向數(shù)據(jù)交換。

它的工作原理如下：

協(xié)議握手：WebSocket 協(xié)議是基于 HTTP 協(xié)議的，客戶端首先通過 HTTP 請求向服務(wù)器發(fā)送一個 WebSocket 握手請求（HTTP 協(xié)議的 Upgrade 請求），服務(wù)器如果支持 WebSocket，就會返回一個 101 響應(yīng)，表示協(xié)議已切換到 WebSocket。
連接建立：一旦握手完成，客戶端和服務(wù)器就會建立起一個全雙工（雙向）通信連接，客戶端和服務(wù)器可以隨時相互發(fā)送數(shù)據(jù)，而無需重新建立連接。
數(shù)據(jù)傳輸：WebSocket 允許客戶端和服務(wù)器在任意時刻發(fā)送消息，數(shù)據(jù)傳輸是基于幀的（每個數(shù)據(jù)包都是一個幀），并且?guī)臄?shù)據(jù)格式是二進制或文本。
連接關(guān)閉：當通信結(jié)束時，任一方都可以發(fā)起連接關(guān)閉請求，關(guān)閉 WebSocket 連接。

與傳統(tǒng)的 HTTP 請求-響應(yīng)模式不同，WebSocket 提供了低延遲、實時、雙向通信的優(yōu)勢，特別適用于需要即時數(shù)據(jù)傳輸?shù)膽?yīng)用，如即時聊天、在線游戲、股票行情等。

示例代碼

1. Java 服務(wù)端（使用 Spring Boot + WebSocket）

在 Java 服務(wù)端，我們可以使用 Spring Boot 和 Spring WebSocket 來實現(xiàn) WebSocket 服務(wù)。

步驟 1：添加依賴

首先，確保你的 pom.xml 文件中有以下依賴：

<dependencies>
    <!-- Spring Boot WebSocket 支持 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-websocket</artifactId>
    </dependency>
    <!-- Spring Boot Web 相關(guān)支持 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
</dependencies>

步驟 2：創(chuàng)建 WebSocket 配置類

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        // 設(shè)定應(yīng)用程序前綴（消息傳遞的目的地）
        config.enableSimpleBroker("/topic");
        // 設(shè)置消息發(fā)送的目標前綴
        config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // 設(shè)定WebSocket端點
        registry.addEndpoint("/ws").withSockJS();
    }
}

步驟 3：創(chuàng)建消息處理器

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;

@Controller
public class WebSocketController {

    private final SimpMessagingTemplate messagingTemplate;

    public WebSocketController(SimpMessagingTemplate messagingTemplate) {
        this.messagingTemplate = messagingTemplate;
    }

    @MessageMapping("/chat")
    public void sendMessage(String message) {
        // 發(fā)送消息到 /topic/chat
        messagingTemplate.convertAndSend("/topic/chat", message);
    }
}

messagingTemplate.convertAndSend("/topic/chat", message); } }

步驟 4：啟動 Spring Boot 應(yīng)用

創(chuàng)建一個啟動類并運行應(yīng)用：

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class WebSocketApplication {

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

2. Vue 客戶端（使用 Vue + WebSocket）

在 Vue 客戶端中，我們可以使用原生的 WebSocket API 或者使用庫（如 sockjs-client）來簡化處理。

步驟 1：安裝依賴

在 Vue 項目中，我們首先安裝 sockjs-client 和 stompjs 庫：

npm install sockjs-client stompjs --save

步驟 2：創(chuàng)建 WebSocket 服務(wù)

創(chuàng)建一個 Vue 文件，使用 WebSocket 來連接到后端：

import SockJS from 'sockjs-client';
import Stomp from 'stompjs';

export default {
  data() {
    return {
      stompClient: null,
      message: ''
    };
  },
  mounted() {
    this.connect();
  },
  methods: {
    connect() {
      const socket = new SockJS('http://localhost:8080/ws');
      this.stompClient = Stomp.over(socket);

      this.stompClient.connect({}, frame => {
        console.log('Connected: ' + frame);
        // 訂閱消息
        this.stompClient.subscribe('/topic/chat', (messageOutput) => {
          this.message = messageOutput.body;
        });
      });
    },
    sendMessage() {
      this.stompClient.send("/app/chat", {}, "Hello, WebSocket!");
    }
  }
};

步驟 3：展示消息

在模板中展示接收到的消息，并提供一個按鈕來發(fā)送消息：

<template>
  <div>
    <div>
      <h2>Received Message: {{ message }}</h2>
    </div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    sendMessage() {
      this.$emit('sendMessage', 'Hello Server');
    }
  }
}
</script>

步驟 4：運行客戶端

確保你的 Vue 應(yīng)用能夠與后端服務(wù)通信，啟動 Vue 應(yīng)用并檢查瀏覽器控制臺的輸出。

總結(jié)

WebSocket 原理：WebSocket 是一種全雙工協(xié)議，建立連接后，客戶端和服務(wù)器之間可以實時、雙向地交換數(shù)據(jù)。它基于 HTTP 協(xié)議的升級機制，通過一個握手過程，客戶端與服務(wù)器建立 WebSocket 連接，并且后續(xù)通信無需重新建立連接。
Java 服務(wù)端：Spring Boot 提供了對 WebSocket 的內(nèi)建支持，我們通過 @MessageMapping 注解來處理客戶端發(fā)送的消息，使用 SimpMessagingTemplate 來推送消息到訂閱的客戶端。
Vue 客戶端：Vue 客戶端使用 SockJS 和 Stomp.js 來實現(xiàn) WebSocket 連接，并能夠接收服務(wù)器推送的消息。用戶可以通過按鈕發(fā)送消息，服務(wù)器接收到消息后進行廣播。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: