vue3ts websocket通信

前端：vue3+ts

后端：springboot

npm安装依赖

bash 复制代码

cnpm install sockjs-client stompjs

前端代码

html 复制代码

<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会报错：

bash 复制代码

Uncaught ReferenceError: global is not defined

解决方法：

在 index.html 中添加脚本：

html 复制代码

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

后端

关键的pom依赖：

XML 复制代码

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

我全部的pom依赖:

XML 复制代码

<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>

代码：

配置类：

java 复制代码

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
     */

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/chat")
                .setAllowedOrigins("*")
                .withSockJS();
    }
}

controller:

java 复制代码

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 database
        System.out.println("username:"+username+" toUsername:"+toUsername+" message:"+message);
        return  "{from: " + username + ", to : " + toUsername + " , message : " + message + "}";
    }
}

启动类：

java 复制代码

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