Ошибка рукопожатия Websocket между Node.js и React

Question

Я пишу приложение, используя сокеты, но не могу заставить первоначальное рукопожатие работать. Я использую WebSockets + React на своем внешнем интерфейсе, работающем на PORT 8080, и сокете Node.js на внутреннем сервере, работающем на PORT 5000. Внешнее рукопожатие выполняется через мой компонент следующим образом:

    componentDidMount(){
        this.socket = new WebSocket('ws://localhost:5000', ['json']);
        this.socket.onerror = err => {
            console.log(err)
        }
        this.socket.onmessage = e => {
            let res = JSON.parse(e.data);
            console.log(e, res);
            let copyArr = [...this.state.message]
            copyArr.push(res);

            this.setState({
                message: copyArr
            });
        }
    }

На моем сервере Node я делаю:

const server = http.createServer();

server.on('upgrade', (req, socket) => {

    if(req.headers['upgrade'] !== "websocket"){
        socket.end('HTTP/1.1 400 Bad Request');
        return;
    }

    const acceptKey = req.headers['sec-websocket-key'];
    const acceptHash = generateValue(acceptKey);

    console.log('accepkey', acceptKey, 'hash', acceptHash);

    const resHeaders = [ 'HTTP/1.1 101 Web Socket Protocol Handshake', 'Upgrade: WebSocket', 'Connection: Upgrade', `Sec-WebSocket-Accept: ${acceptHash}` ];

    console.log(resHeaders);

    let protocols = req.headers['sec-websocket-protocol'];
    protocols = !protocols ? [] : protocols.split(',').map(name => name.trim());

    if(protocols.includes('json')){
        console.log('json here');
        resHeaders.push(`Sec-WebSocket-Protocol: json`);
    }

    socket.write(resHeaders.join('\r\n') + '\r\n\r\n');
})

function generateValue(key){
    return crypto
      .createHash('sha1')
      .update(key + '258EAFA5-E914–47DA-95CA-C5AB0DC85B11', 'binary')
      .digest('base64');
}

Когда мой компонент React монтируется, он пытается установить первоначальное рукопожатие, но терпит неудачу с ошибкой: WebSocket connection to 'ws://localhost:5000/' failed: Error during WebSocket handshake: Incorrect 'Sec-WebSocket-Accept' header value. Я проверил с помощью инструмента разработчика Chrome и нашел это В то время как на бэкэнде, при регистрации заголовка принимающего ключа запроса и заголовков ответа, я видел это:

Итак, если я не ошибаюсь в отношении этих заголовков, кажется, что заголовок подтверждения ключа запроса и ответа каким-то образом изменяется при переходе от клиента к серверу и наоборот. Как это происходит? Или я неправильно понял, что происходит. Почему именно начальное рукопожатие не работает?

Answer 1

Я считаю, что функция generateValue неверна, вы передаете binary в качестве кодировки inputData, которая является ключевым словом для latin1 в соответствии с документами . Но я считаю, что это строка UTF-8, а не latin1, поэтому результат хеширования неверен. Так что просто попробуйте использовать update(key + '258EAFA5-E914–47DA-95CA-C5AB0DC85B11', 'utf8') или даже без второго utf8 аргумента, поскольку это значение по умолчанию.