如何在同一端口搭建带WebSocket服务的Vue.js应用

你需要明确：main.js是客户端代码（运行在浏览器中），无法在其中创建WebSocket服务（服务端逻辑需运行在Node.js环境）。下面提供两种适配Vue项目的实现方案：

方案一：修改Vue CLI开发服务器配置（推荐开发环境使用） #

如果你的项目是用Vue CLI创建的，可通过vue.config.js扩展开发服务器，将WebSocket服务挂载到同一端口：

1. 安装WebSocket依赖：

npm install ws --save-dev

2. 在项目根目录创建vue.config.js，添加以下配置：

const WebSocket = require('ws');

module.exports = {
  devServer: {
    port: 80, // 指定端口为80（注意：80端口需要系统权限，开发阶段也可先用8080，后续反向代理再调整）
    before(app, server) {
      // 将WebSocket服务挂载到开发服务器的HTTP实例上
      const wss = new WebSocket.Server({ server });

      wss.on('connection', (ws) => {
        console.log('WebSocket客户端已连接');
        
        ws.on('message', (message) => {
          console.log(`收到客户端消息：${message}`);
          ws.send(JSON.stringify({ answer: 42 }));
        });

        ws.on('close', () => {
          console.log('WebSocket客户端已断开');
        });
      });
    }
  }
};

3. 启动项目：

npm run serve

此时Vue应用的路由（通过Vue Router配置）和WebSocket服务将共享同一80端口，客户端直接通过ws://localhost即可连接WebSocket。

方案二：自定义Express服务器（适合生产/灵活场景） #

如果需要完全掌控服务器逻辑，可自己搭建Express服务器，同时托管Vue应用和WebSocket服务：

步骤1：安装依赖 #

npm install express ws --save
# 开发环境额外安装热更新依赖
npm install webpack webpack-dev-middleware webpack-hot-middleware --save-dev

步骤2：创建自定义服务器文件server.js #

const express = require('express');
const http = require('http');
const WebSocket = require('ws');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const webpackConfig = require('./node_modules/@vue/cli-service/webpack.config.js'); // 引入Vue CLI的Webpack配置

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
const compiler = webpack(webpackConfig);

// 配置Webpack热更新中间件，实现开发环境的热重载
app.use(webpackDevMiddleware(compiler, {
  publicPath: webpackConfig.output.publicPath
}));
app.use(webpackHotMiddleware(compiler));

// WebSocket服务逻辑
wss.on('connection', (ws) => {
  console.log('WebSocket客户端已连接');
  
  ws.on('message', (message) => {
    console.log(`收到客户端消息：${message}`);
    ws.send(JSON.stringify({ answer: 42 }));
  });

  ws.on('close', () => {
    console.log('WebSocket客户端已断开');
  });
});

// 生产环境可替换为托管dist静态文件
// app.use(express.static('dist'));

const PORT = 80;
server.listen(PORT, () => {
  console.log(`服务器运行在 http://localhost:${PORT}`);
});

步骤3：修改启动脚本 #

在package.json中替换原有的serve命令：

{
  "scripts": {
    "serve": "node server.js",
    "build": "vue-cli-service build",
    // ...其他脚本
  }
}

步骤4：客户端连接WebSocket #

在Vue组件中（如App.vue）添加WebSocket连接逻辑：

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const ws = new WebSocket('ws://localhost');
  
  ws.onopen = () => {
    console.log('WebSocket连接成功');
    ws.send('Hello Server');
  };

  ws.onmessage = (event) => {
    console.log('收到服务器响应：', JSON.parse(event.data));
  };

  ws.onclose = () => {
    console.log('WebSocket连接关闭');
  };
});
</script>

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