Can't connect to chat Websocket (Angular, socket.io)

Question

I have a major problem when trying to connect to socket. I have to use this url wss://socketio-chat-h9jt.herokuapp.com When I am starting server locally and I setup CORS correctly:

const io = require('socket.io')(server, {
    cors: {
      origin: "http://localhost:4200",
      methods: ["GET", "POST"]
    }
  });

it works rly good. Unfortunately I have to use that specific URL. When I change it in my service:

socket = io('wss://socketio-chat-h9jt.herokuapp.com');

it is not working anymore. I have component that should console.log connection status when created. When server is running locally i get CONNECTED message, when I use URL nothing happens... I even have error listener, when I'm using wss://socketio-chat-h9jt.herokuapp.com it prints this error:

Error: server error
    at Socket.onPacket (socket.js:317:1)
    at Polling.Emitter.emit (index.mjs:136:1)
    at Polling.onPacket (transport.js:105:1)
    at callback (polling.js:118:18)
    at Array.forEach (<anonymous>)
    at Polling.onData (polling.js:121:53)
    at Request.Emitter.emit (index.mjs:136:1)
    at Request.onLoad (polling.js:365:18)
    at XMLHttpRequest.xhr.onreadystatechange [as __zone_symbol__ON_PROPERTYreadystatechange] (polling.js:301:26)
    at XMLHttpRequest.wrapFn (zone.js:766:1)

Can someone help? I'm using Angular 13 with socket.io-client (latest version).

Answer 1

As I saw your code you are trying to connect your socket from un-secure URL and you have created the socket securely

so, you have served your angular application using --ssl

You can refer to the docs Link that guide you on how to run your angular project securely over HTTPS//

I hope this helps you to move forward