title: Websocket 'Sec-WebSocket-Accept' header mismatch between ReactJS client and Node.js server
body: <p>I'm writing an application using WebSockets with a React client on port 8080 (run using Webpack devServer) and Node server and sockets on port 5000. However, the initial handshake always fails with an error: <code>WebSocket connection to 'ws://localhost:5000/' failed: Error during WebSocket handshake: Incorrect 'Sec-WebSocket-Accept' header value</code></p>
  
  <p>To make sure, I check the request and response of the React app using Chrome devtools, and see the following: 
  <a href="https://i.stack.imgur.com/5NxQY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5NxQY.png" alt="enter image description here"></a></p>
  
  <p>While on my Node server, I logged the sec-websocket-accept header accept key, as well as the headers for my response, and got the following:</p>
  
  <p><a href="https://i.stack.imgur.com/SlSYE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SlSYE.png" alt="enter image description here"></a></p>
  
  <p>It looks like that indeed, the keys don't match. In fact, they don't seem to be the same keys at all. Is there something in between the React client and Node server (like the Webpack devserver that I'm using for React) that's changing them?</p>
  
  <p>My React code:</p>
  
  <pre><code>    componentDidMount(){
          this.socket = new WebSocket('ws://localhost:5000', ['json']);
          this.socket.onerror = err =&gt; {
              console.log(err)
          }
          this.socket.onmessage = e =&gt; {
              let res = JSON.parse(e.data);
              console.log(e, res);
              let copyArr = [...this.state.message]
              copyArr.push(res);
  
              this.setState({
                  message: copyArr
              });
          }
      }
  </code></pre>
  
  <p>My Node.js code:</p>
  
  <pre><code>const server = http.createServer();
  
  server.on('upgrade', (req, socket) =&gt; {
  
      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 =&gt; 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');
  }
  </code></pre>