如何通过Express服务器代理MQTT WebSocket连接以共享端口？

完全可以通过Express服务器代理MQTT WebSocket连接，实现3000端口同时提供静态内容和WebSocket服务。你需要用到http-proxy-middleware包来处理WebSocket代理，具体步骤如下：

1. 安装依赖 #

首先在项目目录下安装代理工具：

npm install http-proxy-middleware

2. 修改Express服务器代码 #

在原代码中引入并配置代理中间件，注意要把代理配置放在ipfilter之后、静态资源和路由之前（确保IP过滤对代理请求生效）。修改后的完整代码如下：

// index.js
const path = require('path')
const express = require('express')
const exphbs = require('express-handlebars')
const { createProxyMiddleware } = require('http-proxy-middleware') // 引入代理工具
const port=3000
const ipfilter = require('express-ipfilter').IpFilter
const ips = ['::1','::ffff:127.0.0.1','::ffff:103.146.251.86']

const app = express()

app.use(ipfilter(ips, { mode: 'allow' }))

// 配置MQTT WebSocket代理
const mqttProxy = createProxyMiddleware('/mqtt', {
  target: 'ws://localhost:9001', // 指向Mosquitto的WebSocket服务地址
  ws: true, // 启用WebSocket代理
  changeOrigin: true
})
app.use(mqttProxy) // 应用代理中间件

app.engine('.hbs', exphbs({
  defaultLayout: 'main',
  extname: '.hbs',
  layoutsDir: path.join(__dirname, 'views/layouts')
}))
app.set('view engine', '.hbs')
app.set('views', path.join(__dirname, 'views'))

app.get('/', (request, response) => {
    response.render('home', {
        cursor: request.query.cursor,
        screensaver: request.query.screensaver
    })
})

app.use(express.static('public'))

app.listen(port, (err) => {
  if (err) {
    return console.log('something bad happened', err)
  }

  console.log(`server is listening on ${port}`)
})

3. 调整浏览器端连接代码 #

原来浏览器连接MQTT的地址是ws://localhost:9001/mqtt，现在改成指向Express的3000端口：

// 浏览器端MQTT连接示例
const client = mqtt.connect('ws://localhost:3000/mqtt')

注意事项 #

• 确认你的Mosquitto配置已经开启WebSocket服务，并且监听9001端口，路径为/mqtt（这是Mosquitto WebSocket的默认路径，如果你的配置不同，需要同步修改代理中的路径和浏览器连接地址）。
• 代理中间件的顺序很重要，必须放在ipfilter之后，这样所有请求（包括WebSocket）都会经过IP过滤。
• 如果遇到连接问题，可以检查Mosquitto的日志，确认WebSocket服务正常运行，同时查看Express控制台是否有错误输出。

内容的提问来源于stack exchange，提问作者wrt54gl