'WebSocket couldnt establish a connection

I referred this link for building up my WebSocket server and client code. But I receive below error on my browser when trying to connect to websocket server with wss protocol (and this error takes some time to get printed): WebSocket connection to 'ws://URL' failed.

In the Apache and TomEE access log I see 101 (protocol switch) response code for the request being made.

In TomEE stdout, I can see below Sysout being printed for one connect request from JS Client.

onOpen::0
onError::null
onClose::0
onOpen::1
onOpen::2
onError::null
onClose::1
onError::null
onClose::2

Few things to NOTE:

  • WebSocket server is hosted on our Company's server. I receive above error when I execute the client from my laptop.
  • Same code works if I execute both client and server on the same machine.
  • Port in use looks too be good, as I can make HTTP connection using same port.
  • I have enabled trace8 level log in Apache but do not see any specific error, or am I missing something? If any pointers can be provided.

Below code is used for WebSocket server

@ServerEndpoint("/endpoint")
public class SocketServer {

private static PushTimeService pst;
@OnOpen
public void onOpen(Session session) {
    System.out.println("onOpen::" + session.getId());        
}
@OnClose
public void onClose(Session session) {
    System.out.println("onClose::" +  session.getId());
}

@OnMessage
public void onMessage(String message, Session session) {
    System.out.println("onMessage::From=" + session.getId() + " Message=" + message);
    
    try {
        session.getBasicRemote().sendText("Hello Client " + session.getId() + "!");
    } catch (IOException e) {
        e.printStackTrace();
    }
}

@OnError
public void onError(Throwable t) {
    System.out.println("onErrorTrace::" + t.getMessage());
}

JS Client Code:

class WebSocketClient {
    
    constructor(protocol, hostname, port, endpoint) {
        
        this.webSocket = null;
        
        this.protocol = protocol;
        this.hostname = hostname;
        this.port     = port;
        this.endpoint = endpoint;
    }
    
    getServerUrl() {
        return this.protocol + "://" + this.hostname + ":" + this.port + this.endpoint;
    }
    
    connect() {
        try {
            this.webSocket = new WebSocket(this.getServerUrl());
            this.webSocket.onopen = function(event) {
                console.log('onopen::' + JSON.stringify(event, null, 4));
            }
            
            this.webSocket.onmessage = function(event) {
                var msg = event.data;
                console.log('onmessage::' + JSON.stringify(msg, null, 4));
            }
            this.webSocket.onclose = function(event) {
                console.log('onclose::' + JSON.stringify(event, null, 4));                
            }
            this.webSocket.onerror = function(event) {
                console.log('onerror::' + JSON.stringify(event, null, 4));
            }
            
        } catch (exception) {
            console.error(exception);
        }
    }
    
    getStatus() {
        return this.webSocket.readyState;
    }
    send(message) {
        
        if (this.webSocket.readyState == WebSocket.OPEN) {
            this.webSocket.send(message);
            
        } else {
            console.error('webSocket is not open. readyState=' + this.webSocket.readyState);
        }
    }
    disconnect() {
        if (this.webSocket.readyState == WebSocket.OPEN) {
            this.webSocket.close();
            
        } else {
            console.error('webSocket is not open. readyState=' + this.webSocket.readyState);
        }
    }
}

I have Apache config in place.

<VirtualHost *:443>
    SSLEngine on
    SSLProxyEngine on
    SSLProxyVerify none
    SSLProxyCheckPeerCN off
    SSLProxyCheckPeerName off
    SSLCertificateFile      test.crt
    SSLCertificateKeyFile   test.key
    SSLCertificateChainFile test.cer
    ServerName hostname.com
    ServerAlias hostname.com
    RequestHeader set connection "upgrade"
    RequestHeader set upgrade "websocket"
    ProxyPass /hello/endpoint ws://servername:7080/WebSocketService/endpoint
    ProxyPassReverse //hello/endpoint ws://servername:7080/WebSocketService/endpoint
</VirtualHost>


Sources

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

Source: Stack Overflow

Solution Source