前端：vue3+ts
后端：springboot

---

npm安裝依賴

cnpm install sockjs-client stompjs

前端代碼

<template><div><el-input v-model="message" type="text" placeholder="發送" /><el-button-group><el-button type="primary" @click="sendMessage">發送</el-button><el-button type="primary" @click="">斷開連接</el-button></el-button-group><div v-for="(chatMessage, username) in chatMessages" :key="username"><strong>{{ username }}:</strong> {{ chatMessage }}</div></div>
</template><script lang="ts">
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
import {onMounted, onUnmounted, ref} from "vue";export default {name: 'TestChat',setup() {const message = ref('');const chatMessages = ref({} as Record<string, string>);let stompClient: Stomp.Client;const connectWebSocket = () => {const socket = new SockJS('http://localhost:8600/chat'); // SockJS端點stompClient = Stomp.over(socket);stompClient.connect({// 在這里添加simpUsername頭信息'simpusername': "username1"}, (frame) => {console.log('已連接: ' + frame);// ... 訂閱消息、發送消息等邏輯stompClient.subscribe('/topic/private/' +"username1", (chatMessage) => {const messageData = JSON.parse(chatMessage.body);chatMessages.value[messageData.username] = messageData.message;});});// stompClient.onerror = (error:any) => {//   console.error('112233WebSocket Error:', error);// };//斷開連接try{stompClient.disconnect(()=>{console.error('WebSocket連接已斷開');})}catch(e){console.error('WebSocket連接已斷開');}};const sendMessage = () => {if (stompClient && message.value ) {// const targetUser = prompt('Enter the username of the recipient:');const targetUser = 'touserId' ;const chatMessage = {username: "username",message: message.value,};stompClient.send("/app/private/" + targetUser, {'simpusername': "username1"}, JSON.stringify(chatMessage));message.value = ''; // 清空輸入框}};onMounted(() => {connectWebSocket();});onUnmounted(() => {if (stompClient) {stompClient.disconnect();}});return {message,chatMessages,sendMessage,};},
};
</script>

sockjs-client會報錯：

Uncaught ReferenceError: global is not defined

解決方法：
在 index.html 中添加腳本：
?

<script type="text/javascript" >if (window.global === undefined) {window.global = window;}</script>

---

后端

關鍵的pom依賴：
?

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

我全部的pom依賴:
?

<dependencies><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>3.8.1</version><scope>test</scope></dependency><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-commons</artifactId><version>2.2.1.RELEASE</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><version>2.7.11</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><version>2.7.11</version></dependency><!--        一、導入依賴--><dependency><groupId>org.mybatis.generator</groupId><artifactId>mybatis-generator-core</artifactId><version>1.3.7</version></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.0.1</version></dependency><!-- mysql依賴--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.15</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency><!--nacos客戶端依賴--><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId></dependency><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.4.1</version></dependency><!--openfeign--><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-openfeign</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency></dependencies>

代碼：
配置類：

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.*;/*** 配置 WebSocket 端點*/
@EnableWebSocketMessageBroker
@Configuration
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {/*** <dependency>*             <groupId>org.springframework.boot</groupId>*             <artifactId>spring-boot-starter-websocket</artifactId>*         </dependency>* @param config*/@Overridepublic void configureMessageBroker(MessageBrokerRegistry config) {config.enableSimpleBroker("/topic");config.setApplicationDestinationPrefixes("/app");}@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {registry.addEndpoint("/chat").setAllowedOrigins("*").withSockJS();}
}

controller:

import org.springframework.messaging.handler.annotation.*;
import org.springframework.stereotype.Controller;@Controller
public class ChatController {@MessageMapping("/private/{toUsername}")@SendTo("/topic/private/{toUsername}")public String sendToUser(String message, @Header("simpusername") String username,@DestinationVariable String toUsername) throws Exception {// Save message to the databaseSystem.out.println("username:"+username+" toUsername:"+toUsername+" message:"+message);return  "{from: " + username + ", to : " + toUsername + " , message : " + message + "}";}
}

啟動類：
?

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