node.js - 带有 Express 的 WebSocket - 无效的 WebSocket 帧：无效的 UTF-8 序列

Question

我正在使用HTTPS、Express、Socket.io和构建一个 Web 应用程序WebSocket。目前Express正在使用3000端口。为了使用与WebSocket3000端口相同的端口，我编写了如下代码。

应用程序.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;

斌/万维网

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

公共/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..');
    });
};

路线/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;

如上配置服务器后，如果连接到https://localhost:3000after npm start，会出现如下错误。

错误：无效的 WebSocket 帧：无效的 UTF-8 序列...代码：'WS_ERR_INVALID_UTF8'，[符号（状态代码）]：1007

我不明白为什么会发生此错误。另外，如何修复代码以修复错误？

标签： node.jsexpresswebsockethttps