时间戳

首页 > 解决方案 > 为 websocket 引入中间件代理时反应热重载中断

javascript - 为 websocket 引入中间件代理时反应热重载中断

问题描述

美好的一天，我有一个使用socket.io-client和http-proxy-middleware. socket.io当为websocket引入代理时，由 提供的热重载功能react-scripts start不再起作用。

我可以看到一个 WS 网络调用/sockjs-node被代理到提供 websocket 的后端服务，而不是到 react 应用程序的开发构建服务器。我试图更改 websocket 路径但无济于事。有没有办法让这两个工具很好用？

setupProxy.js 文件

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        '^/api',
        createProxyMiddleware({
            target: 'http://localhost:8012',
            changeOrigin: true,
            pathRewrite:  {'^/api': ''}
        })
    );
    app.use(
        '^/socket.io',
        createProxyMiddleware({
            target: 'ws://localhost:8012',
            changeOrigin: true,
            ws: true,
        })
    );
};

socket.io 实例

import io from 'socket.io-client';

const socket = io();

包.json 文件

{
  "name": "client-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.2.2",
    "@types/node": "^12.12.36",
    "@types/react": "^16.9.34",
    "@types/react-dom": "^16.9.6",
    "@types/styled-components": "^4.4.2",
    "antd": "^4.3.4",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-lazylog": "^4.5.3",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "socket.io-client": "^2.3.1",
    "styled-components": "^5.1.0",
    "typescript": "^3.7.5"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^24.9.1",
    "http-proxy-middleware": "^1.0.5",
    "jest-fetch-mock": "^3.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

先感谢您。

标签： javascriptnode.jsreactjswebsocketsocket.io

解决方案

http-proxy-middleware支持路径过滤和使用忽略（https://github.com/chimurai/http-proxy-middleware/issues/31）。

您可以通过['!/sockjs-node']传入createProxyMiddleware. 现在将跳过实时重新加载路径。

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        '/api',
        createProxyMiddleware(['!/sockjs-node'], {
            target: 'http://localhost:5000/',
            changeOrigin: true,
            ws: true,
        })
    );
};

推荐阅读