WebSocket with Express - Invalid WebSocket frame: invalid UTF-8 sequence - node.js

Question

I'm building a web application using HTTPS, Express, Socket.io, and WebSocket. Currently Express is using port 3000. In order to use the same port of WebSocket as 3000 port, I wrote the code as follows.
app.js
const path = require('path');
const express = require('express');
const app = express();
const mainRouter = require('./routes/main/main');
// Middleware
...
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(path.join(__dirname, 'res')));
app.use('/', mainRouter);
// 404 error handler
app.use((req, res) => {
logger.error(`404 Page not found`);
res.status(404).send('404 Page not found');
});
module.exports = app;
bin/www
const fs = require('fs');
const path = require('path');
const app = require('../app');
const https = require('https');
const options = {
key: fs.readFileSync(path.resolve(__dirname, '../config/ssl/localhost-key.pem')), // Private key
cert: fs.readFileSync(path.resolve(__dirname, '../config/ssl/localhost.pem')), // Certificate
};
const server = https.createServer(options, app);
const io = require('socket.io')(server);
const WebSocket = require('../public/js/websocket');
const normalizePort = (value) => {
const port = parseInt(value, 10);
if(isNaN(port)) {
return value;
}
if(port >= 0) {
return port;
}
return false;
};
const port = normalizePort(process.env.PORT || 3000);
// Setting port
app.set('port', port);
const onError = (err) => {
if(err.syscall !== 'listen') {
throw err;
}
const bind = typeof(port) === 'string' ? `Pipe ${port}` : `Port ${port}`;
switch(err.code) {
case 'EACCES':
console.error(`${bind} requires elevated privileges`);
process.exit(1);
break;
case 'EADDRINUSE':
console.error(`${bind} is already in use`);
process.exit(1);
break;
default:
throw error;
}
};
const onListening = () => {
const address = server.address();
const bind = typeof(address) === 'string' ? `Pipe ${address}` : `Port ${port}`;
};
...
WebSocket(server);
server.listen(port, '0.0.0.0');
server.on('error', onError);
server.on('listening', onListening);
public/js/websocket.js
const ws = require('ws');
module.exports = function WebSocket(server) {
const wss = new ws.Server({ server : server });
wss.on('connection', (ws, req) => {
ws.on('message', (data) => {
ws.send(data);
console.log(data);
});
});
wss.on('listening', () => {
console.log('listening..');
});
};
routes/main/main.js
const router = require('express').Router();
const { v4 : uuidv4 } = require('uuid');
router.get('/', (req, res) => {
res.redirect(`/${uuidv4()}`);
});
router.get('/:room', (req, res) => {
res.render('main/main', { room: req.params.room });
});
module.exports = router;
After configuring the server as above, if you connect to https://localhost:3000 after npm start, the following error occurs.
Error: Invalid WebSocket frame: invalid UTF-8 sequence ... code: 'WS_ERR_INVALID_UTF8', [Symbol(status-code)]: 1007
I don't understand why this error occurs. Also, how can I fix the code to fix the error?