'Websocket connection to 'wss' failed Websocket handshake response code 400

I'm trying to get a connection between my client and server via https. Following is the code I am using. But whenever I am trying to connect I get the error

websocket.js:54 
        
       WebSocket connection to 'wss://localhost/socket.io/?EIO=4&transport=websocket&sid=9c2xTTlYB5qGKxk9AAAC' failed: Error during WebSocket handshake: Unexpected response code: 400
value @ websocket.js:54

sever.js:



const express= require('express')
const app= express();
const https= require('https')

const fs=require('fs')

const PORT=process.env.PORT || 443

const httpsOptions={
    key: fs.readFileSync('./cert/key.pem'),
    cert: fs.readFileSync('./cert/cert.pem')
}
var server=https.createServer(httpsOptions,app);


server.listen(PORT,function(){
    console.log(`listening to port ${PORT}`)
})

const io = require('socket.io')(server,{maxHttpBufferSize:1e8}).listen(server)


app.get('/test', (req,res)=>{
    res.sendStatus(200);
})

app.use(express.static(__dirname + '/public'))

app.use(require('./routes/posts'));

app.use(require('./routes/users'));


app.get('/',(req,res)=>{
    res.sendFile(__dirname + '/login_register/login.html')
})


app.get('/register',(req,res)=>{
    res.sendFile(__dirname + '/login_register/register.html')
})

app.get('/chatroom',(req,res)=>{
    res.sendFile(__dirname + '/index.html')
})

io.on('connection',(socket)=>{
    console.log('new connection',socket.id)
    socket.on('message', (msg)=>{
        console.log(msg)
        socket.broadcast.emit('message',msg)
    })
  
    socket.on('file-message', (msg)=>{
        console.log(msg)
        socket.broadcast.emit('file-message',msg)
    })
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/style.css">
    <script src="https://cdn.socket.io/4.4.1/socket.io.min.js" integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H" crossorigin="anonymous"></script>

</head>
<body>

    <section class="chat_section">
        <div class="brand">
            <img src="" alt="">
            <h1> chat</h1>

        </div>
        <div class="message_area">

        </div>
        <div>
            <textarea id="textarea" cols="30" rows="1" placeholder="write a message "></textarea>
        </div>


        <input type="file"id="fileupload" name="fileName">
        <button id="submitFile" onclick="submitData()">senden</button>


    </section>

    
<script>

    socket = io('https://localhost:443/')

  
    
    let userName;
    let userName_;
    
    
    
    let textarea=document.querySelector('#textarea')

    let messageArea= document.querySelector('.message_area')
    
    let file__ = document.querySelector('#fileupload')
    
    userName=sessionStorage.getItem('displayUsername')
    
    userName_= userName
    
    console.log(userName_)
    
    sessionStorage.removeItem('displayUsername');
    sessionStorage.clear();
   
    
    
    textarea.addEventListener('keyup', (e)=>{
        if(e.key === 'Enter'){
            sendMessage(e.target.value)
        }
    })
    
    
    
    function sendMessage(message){
        let msg= {
            user:userName_,
            message:message.trim()
        }
    
        //append message to frontend call function 
        appendMessage(msg,'outgoing')
        textarea.value=""
        scrollBottom()
    
        //send to server
        socket.emit('message', msg)

    }
    
    function appendMessage(msg,type,isFile){
        
        //dont needed for error
    }
    

  

 
    socket.on('message',(msg)=>{
        
        appendMessage(msg,'incoming')
        scrollBottom()
    })
    



    socket.on('file-message',(msg)=>{
        console.log(msg)

        
        let message={
            message: msg.filename,
            user: msg.user,
            result: msg.result
        }

        
        appendMessage(message,'incoming',isFile=true)
    

    })
    
    function scrollBottom(){
        messageArea.scrollTop=messageArea.scrollHeight
    }
    
    function submitData(){
    //dont needed for error
    
    
       
    }
    
    function downloadFile(result,filename){
        
   
    }


</script>

</body>
</html>

my folder hirarchy:

chatapplication
  cert
      cert.pem
      csr.pem
      key.pem
  login_register
      login.html
      register.html
  model
      user.js
  node_modules
      (included when setup) 
  public
      client.js
      style.css
  routes
      users.js
  database.js
  index.html
  package-lock.json
  package.json
  secret.json
  server.js
node.jsexpresssocket.io


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions