Vue前端项目接收webSocket信息

（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’,
port: 5300,
open: true,
https: false,
proxy: {
‘/diagnosis’: {
target: ‘http://192.168.0.18:5100’,
changeOrigin: true,
logLevel: “debug”,
ws: true,
pathRewrite: {
//路径重写
‘^/diagnosis’: ”
}
},}};

(3)页面配置websocket

<script>
import SockJS from ‘sockjs-client’;
import Stomp from ‘stompjs’;

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;
console.log(“999999”,this.diagStatus)
} else {
console.log(“诊断失败：”, payload.data.msg);
this.diagStatus = 3;
}

});
});
},}
</script>