I am working on a project which requires websockets. So far I have set up a websocket server (quarkus) which works perfectly fine when I use insomnia to test it. I can connect and send messages no errors.
But when I try to connect from angular with socket.io-client (v4.7.5) it does not work somehow. This is my code of the service:
import { Injectable } from "@angular/core"
import { Socket, io } from "socket.io-client"
@Injectable({
providedIn: "root",
})
export class WebsocketService {
socket: Socket
constructor() {
this.socket = io("http://localhost:8080", {
path: "/live/angular",
transports: ["websocket"],
addTrailingSlash: false,
}).connect()
setInterval(() => {
console.log(this.socket)
}, 3000)
this.socket.on("connect", () => {
console.log("Connected to WebSocket server")
})
this.socket.on("disconnect", () => {
console.log("Disconnected from WebSocket server")
})
this.socket.on("connect_error", (err: any) => {
console.error("Connection error:", err)
})
this.socket.on("message", (message: any) => {
console.log("Received message:", message)
})
}
sendMessage(msg: string): void {
this.socket.emit(msg)
}
onMessage(callback: (message: string) => void): void {
this.socket.on("message", callback)
}
disconnect(): void {
if (this.socket) {
this.socket.disconnect()
}
}
}
Here you can see that I want to connect to localhost where the websocket server runs. This works apparently because I log when somebody connects to the websocket server.
However when I log the current socket connection (the socket object to be exact), it always says that it is not connected. And the onConnect also does not fire.
The next thing is when I want to emit a message it also does not work. I assume because the connection is not established or terminated somehow.
I have tried multiple version of the socket.io-client and even different libs like ngx-socket-io which resulted in the same errors. The problem has to be somewhere in the frontend angular part because every test with insomnia did work perfectly.
socket.io-client is trying to establish a connection with a socketio server, not a standard WebSocket implementation. It is waiting for a handshake from the server before the client onConnect callback will fire.
As explained in the "What Socket.IO is not" section, the Socket.IO client is not a WebSocket implementation and thus will not be able to establish a connection with a WebSocket server, even with transports: ["websocket"]:
If you want to continue to use quarkus on the backend, then you will need to use a different approach to connecting from the client.
Otherwise, you could use socketio on the backend.