'WebSocket connection to 'wss' failed

im trying to implement a chat client, i think my client server communication work, because i receive the messages in different tabs. im using a https connection

im getting in chrome following error:

WebSocket connection to 'wss://localhost/socket.io/?EIO=4&transport=websocket&sid=B-vRFkxNxHPkiK6cAAAE' failed: websocket.js:54

in firefox:

Firefox can’t establish a connection to the server at wss://localhost/socket.io/?EIO=4&transport=websocket&sid=vSwzZh9BE3cpHZHPAAAC.

im using a self signed certificate, that i created with openssl, thats why i get follwing konsole log in chrome:

This site does not have a valid SSL certificate! Without SSL, your site's and visitors' data is vulnerable to theft and tampering. Get a valid SSL certificate before  releasing your website to the public.

server.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.use(require('./public/client'));

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)=>{
        socket.broadcast.emit('message',msg)
    })
    socket.on('file-message', (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/')

    //also testet: 
    //const socket=io()
    //didnt worked
    
    let userName;
    let userName_;
    
    //const textarea = document.getElementById('textarea')
    
    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();
    
    //console.log(userName_)
    
    if(userName_==null){
        alert("dont scam")
        window.location.href = '/'
    }
    
    //console.log(localStorage.getItem(displayUsername));
    
    
    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 to understand
    }
    
    
    //recive messages 
    socket.on('message',(msg)=>{
        //console.log(msg)
        appendMessage(msg,'incoming')
        scrollBottom()
    })
    

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

        //File name Here
        let message={
            message: msg.filename,
            user: msg.user,
            result: msg.result
        }

        //send to the others 
        appendMessage(message,'incoming',isFile=true)
    

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


</script>

</body>
</html>

Sources

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

Source: Stack Overflow

Solution	Source

'WebSocket connection to 'wss' failed

Sources

Related Questions