我想在Vue项目中与Websocket建立WebSocket连接。但我每次都得到这个错误

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

我为此使用的代码：

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

还尝试了ws：//和不同的浏览器（因为SO上的一些人说这是一个已知的Chrome问题）。
但是当我使用socket.io来达到同样的目的时，一切都很正常

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

在服务器端，我使用socket.io。我也试过了：

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/`);

还是连接不上...
我有一个限制，不能使用socket.io，而是使用内置的WebSocket。所以我想知道在这种情况下WebSocket和socket.io连接之间的区别是什么？如何使WebSocket代码工作？
P.S.添加Vue标签是因为也许我应该编辑我的项目的配置？