vue3+websocket+springboot、websocket消息通讯

websocket 通信

后端

后端-配置类:

java 复制代码
package com.yupi.project.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new MyWebSocketHandler(), "/ws").setAllowedOrigins("*");
    }
}

后端-消息处理类:

java 复制代码
package com.yupi.project.config;

import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

public class MyWebSocketHandler extends TextWebSocketHandler {
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        // 连接建立后的逻辑
        System.out.println(session.getId());
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        // 处理收到的消息
        System.out.println("Received message from client [" + session.getId() + "]: " + message.getPayload());

        // 回送消息给客户端
        String echoMessage = "Echo: " + message.getPayload()+",session id is"+session.getId();
        TextMessage returnMessage = new TextMessage(echoMessage);
        session.sendMessage(returnMessage);

        System.out.println("Sent message to client [" + session.getId() + "]: " + returnMessage.getPayload());
    }
}

前端

前端测试页面代码:

进入页面后,会自动建立一个websocket连接

html 复制代码
<template>
  <div>
    123
    <!-- Your component template -->
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
import { webSocketService } from '@/services/webSocketService';

export default {
  name: 'YourComponentName',
  data() {
    return {
      message: '',
      authToken: 'your-auth-token-here' // 请替换为实际的token获取逻辑
    };
  },
  mounted() {
    webSocketService.connect(this.authToken);
  },
  beforeUnmount() {
    webSocketService.disconnect();
  },
  methods: {
    sendMessage() {
      webSocketService.sendMessage(JSON.stringify({ message: '12345678' }));
    }
  }
};
</script>

前端js代码

js 复制代码
// src/services/webSocketService.js
export const webSocketService = {
    socket: null,
    connect(authToken) {
        // 注意:这里的URL应根据实际情况调整
        //this.socket = new WebSocket(`ws://${location.hostname}:${location.port}/api/ws`);
        this.socket = new WebSocket('ws://localhost:5173/api/ws');// 代理地址
        // 发送认证信息
        this.socket.onopen = () => {
            this.socket.send(JSON.stringify({
                type: 'auth',
                token: authToken // 这里假设使用token进行认证
            }));
        };

        this.socket.onmessage = (event) => {
            console.log('服务度返回的消息 ', event.data);
        };

        this.socket.onerror = (error) => {
            console.error('WebSocket error: ', error);
        };
    },
    sendMessage(message) {
        console.log("this.socket")
        console.log(this.socket)
        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
            this.socket.send(message);
            console.log('已发送消息')
        }
    },
    disconnect() {
        if (this.socket) {
            this.socket.close();
        }
    }
};

前端代理:

javascript 复制代码
  // 配置服务器的代理设置
  server: {
    // 代理配置,用于重定向请求到其他服务器
    proxy: {
      '/api': {
        target: 'ws://localhost:7529',//后端tomcat端口
        ws: true, // 开启WebSocket代理
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, 'api')
      }
    }
  }

结果:

拓展:

1、消息发送后还没有关闭,前后端如何关闭?

2、如何广播消息?

3、利用session id 来对不同的客户端连接发送消息?只需要带着session id就可以给那个专门的客户端发送消息了。

相关推荐
疯癫的老码农42 分钟前
【Linux环境下安装】SpringBoot应用环境安装(五)-milvus安装
linux·spring boot·milvus
huangyiyi666661 小时前
轮询那些事儿
javascript·前端框架·vue·js
小吴-斌1 小时前
本地请求接口报SSL错误解决办法(Could not verify * SSL certificate)
网络·网络协议·ssl
七仔的博客2 小时前
博客的加载速度和大小的优化、优化再优化
vue·博客·优化·gzip·live2d
Kay_Liang2 小时前
大语言模型如何精准调用函数—— Function Calling 系统笔记
java·大数据·spring boot·笔记·ai·langchain·tools
草莓熊Lotso2 小时前
基于容器适配器模式的 Stack 与 Queue 实现:复用底层容器的优雅设计
c++·网络协议·rpc·适配器模式
摇滚侠2 小时前
Spring Boot 3零基础教程,WEB 开发 内容协商机制 笔记34
java·spring boot·笔记·缓存
Json____3 小时前
学习springBoot框架-开发一个酒店管理系统,来熟悉springboot框架语法~
spring boot·后端·学习
RollingPin5 小时前
iOS八股文之 网络
网络·网络协议·ios·https·udp·tcp·ios面试
毕业设计制作和分享6 小时前
springboot150基于springboot的贸易行业crm系统
java·vue.js·spring boot·后端·毕业设计·mybatis