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

(3)页面配置websocket

测试：