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);
    }
}
相关推荐
白帽黑客沐瑶19 小时前
【网络安全就业】信息安全专业的就业前景(非常详细)零基础入门到精通,收藏这篇就够了
网络·安全·web安全·计算机·程序员·编程·网络安全就业
树码小子20 小时前
Java网络编程:(socket API编程:TCP协议的 socket API -- 回显程序的服务器端程序的编写)
java·网络·tcp/ip
绿箭柠檬茶21 小时前
Ubuntu 服务器配置转发网络访问
服务器·网络·ubuntu
FPGA_Linuxer1 天前
FPGA 40 DAC线缆和光模块带光纤实现40G UDP差异
网络协议·fpga开发·udp
real 11 天前
传输层协议UDP
网络·网络协议·udp
路由侠内网穿透1 天前
本地部署 GPS 跟踪系统 Traccar 并实现外部访问
运维·服务器·网络·windows·tcp/ip
喵手1 天前
玩转Java网络编程:基于Socket的服务器和客户端开发!
java·服务器·网络
徐子元竟然被占了!!1 天前
实验-基本ACL
网络
ftpeak1 天前
从零开始使用 axum-server 构建 HTTP/HTTPS 服务
网络·http·https·rust·web·web app
LabVIEW开发1 天前
LabVIEW气体污染无线监测
网络·labview·labview知识·labview功能·labview程序