Vue项目中原生WebSocket连接失败但Socket.IO正常的问题求助

在Vue项目中尝试使用原生WebSocket建立连接时，持续出现以下错误：

WebSocket connection to 'wss://localhost:3000/' failed:

使用的前端代码：

onMounted(() => {
  const socket = new WebSocket('wss://localhost:3000/');
});

已尝试过ws://协议及不同浏览器，但问题依旧。但使用Socket.IO实现相同功能时完全正常，前端代码如下：

onMounted(() => {
  const socketio = io('localhost:3000');
});

服务器端最初使用Socket.IO，之后也尝试过ws库：

const WebSocket = require("ws");
const wsServer = new WebSocket.Server({ port: 4000 });

wsServer.on("connection", (client) => {
  console.log("connected!!!");

  client.send("hello!");
});

尝试连接4000端口时，前端代码：

onMounted(() => {
  const socket = new WebSocket(`wss://localhost:4000/`);
});

但仍然无法连接。由于限制必须使用原生WebSocket，因此需要了解：

1. 此场景下WebSocket与Socket.IO连接的区别是什么？
2. 如何让原生WebSocket代码正常工作？

附：添加Vue标签，怀疑可能需要修改项目配置。

一、WebSocket与Socket.IO的核心区别 #

• 协议本质不同：Socket.IO是基于WebSocket、轮询等多种传输方式的封装库，会自动根据环境降级适配；而原生WebSocket严格遵循RFC 6455标准，仅支持纯WebSocket协议，没有自动降级逻辑。
• 连接逻辑差异：Socket.IO连接先通过HTTP请求完成握手协商，再切换到对应传输方式；原生WebSocket直接发起WebSocket握手请求，要求服务器必须能响应标准的WebSocket握手。
• 服务端兼容性：Socket.IO服务器只能处理Socket.IO的连接请求，无法响应原生WebSocket的握手；ws库搭建的是纯原生WebSocket服务，只能处理符合标准的WebSocket连接请求，两者不互通。

二、修复原生WebSocket连接的步骤 #

1. 匹配协议与服务器配置 #

• 如果你的ws服务器未配置SSL证书，前端必须用ws://协议（wss://是加密协议，需要服务器配置SSL才能用）：

  onMounted(() => {
    const socket = new WebSocket('ws://localhost:4000/');
    // 加错误监听排查问题
    socket.onerror = (error) => {
      console.error('WebSocket错误详情:', error);
    };
    socket.onopen = () => {
      console.log('连接成功！');
    };
  });
  

• 若要使用wss://，需给ws服务器配置SSL证书，示例代码：

  const https = require('https');
  const fs = require('fs');
  const WebSocket = require('ws');
  
  const server = https.createServer({
    cert: fs.readFileSync('你的证书路径/cert.pem'),
    key: fs.readFileSync('你的密钥路径/key.pem')
  });
  const wss = new WebSocket.Server({ server });
  
  wss.on('connection', (ws) => {
    console.log('connected!!!');
    ws.send('hello!');
  });
  
  server.listen(4000);
  

2. 解决跨域问题 #

如果Vue开发服务器（比如8080端口）和WebSocket服务器（4000端口）端口不同，会触发跨域限制，需配置代理：

• Vue CLI配置：在vue.config.js中添加：

  module.exports = {
    devServer: {
      proxy: {
        '/ws': {
          target: 'ws://localhost:4000',
          ws: true,
          changeOrigin: true
        }
      }
    }
  };
  

  前端连接时用代理路径：

  const socket = new WebSocket('ws://localhost:8080/ws/');
  

• Vite配置：在vite.config.js中添加：

  export default {
    server: {
      proxy: {
        '/ws': {
          target: 'ws://localhost:4000',
          ws: true
        }
      }
    }
  };
  

3. 验证服务器可用性 #

启动ws服务器后，先确认终端无报错；可以用wscat工具测试连接：

npm install -g wscat
wscat -c ws://localhost:4000

如果能成功连接并收到hello!消息，说明服务器正常，问题出在前端配置或连接代码。

4. 规避浏览器安全限制 #

• 若Vue项目在HTTPS环境（比如生产环境）运行，浏览器会禁止连接非加密的ws://地址，必须用wss://。
• 本地开发时如果Vue项目用https://localhost:8080启动，WebSocket也必须用wss://，否则会被浏览器拦截。

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