当前位置：首页 > news >正文

Vue前端项目接收webSocket信息

news 2025/7/6 10:44:34

（1）package.js安装websocket包

{"name": "aihelperv1.0.1","version": "0.1.0","private": true,"scripts": {},"dependencies": {"sockjs-client": "^1.5.2","stompjs": "^2.3.3"}

（2）vue.config.js配置webSocket访问接口

module.exports = {devServer: {host: '0.0.0.0',       // 允许外部访问，例如局域网内的其他设备通过 IP 访问port: 5300,            // 指定端口open: true,            // 自动打开浏览器https: false,          // 不使用 httpsproxy: {// 本地==================='/diagnosis': {target: 'http://192.168.0.18:5100', // 后端接口地址changeOrigin: true,logLevel: "debug", //是否改变源地址ws: true, //是否支持websocket协议pathRewrite: {//路径重写'^/diagnosis': ''}},}};

(3)页面配置websocket


<script>
import SockJS from 'sockjs-client';
import Stomp from 'stompjs'; // 也需要安装 stomp.js 库export default {
created() {this.getDiagWebSocket();},
// 定义该组件的响应式状态变量data(){return {diagStatus: 0,                  //诊断进行的状态,默认未进行 }},
methods: {
getDiagWebSocket(){const socket = new SockJS('/diagnosis/diagnosis-websocket');const stompClient = Stomp.over(socket);stompClient.connect({}, (frame)  => {console.log('WebSocket connected:', frame);stompClient.subscribe('/topic/diagConsump', (message) => {// 处理消息const payload = JSON.parse(message.body);if (payload.data.code === 200) {console.log("111111223", payload.data.code);this.diagStatus = 2;  // 根据返回的 code 值来更新状态console.log("999999",this.diagStatus)} else {console.log("诊断失败：", payload.data.msg);this.diagStatus = 3;  // 诊断失败，更新状态}});});},}
</script>

测试：