Search code examples
javascriptjavawebsocketliferay-7

I can't make a connection to the websocket "wss" protocol in Liferay 7.2

I inform you that the code works correctly with the "ws" protocol without the certificate. I have recently added the certificate to the portal, ensuring that the connection of the page is secure.

The problem I have now is that it does not work with the secure "wss" protocol, it has been tested on firefox and chrome. I'm not sure what to do.

Next I will put code snippets from the portlet. (It is not going to put the complete code but the most important parts).

view.jsp

$(document).ready(function() {

    $('#conexion-chat').on('click', function(){  
        $('#display-chat-overlay').fadeIn('slow');
        initWebSocket();
        return false;     
    });      
        
    $('#close').on('click', function(){         
        $('#display-chat-overlay').fadeOut('slow');
        $('#conexion-chat').css('display', '');
        $('.msg-incoming-outgoing').children().remove();
        $('.msg-incoming-outgoing').text('');
        websocket.close();
        return false;     
    }); 
    
});

function initWebSocket(){
    $('#conexion-chat').css('display', 'none');
    $('#display-chat-overlay').css('display', '');
    $('.cloud_messages_unread').css('display','none');
    
    if('${currentUserRol}' != '${rolPreferences}'){
        $('.container').addClass('display-visitor');
        $('.header-chat').addClass('display-visitor');
        $('.inbox_people').addClass('display-visitor');
        $('.mesgs').addClass('display-visitor');
        $('.recent_heading.logo-sponsor').addClass('display-visitor');
        $('.mesgs').find('h4').text('${rolPreferences}');
        $('#sendField').prop('disabled', '');
        startTimeSession();
        
    }else{
        $('.header-chat').addClass('display-sponsor');
        $('.inbox_chat').children().remove();
        $('.mesgs').find('h4').text('');
        visitorNameHeader();
        $('.mesgs .recent_heading.logo-sponsor').addClass('display-sponsor');
        $('.inbox_people .recent_heading').addClass('visitor-list');
        $('#display-chat-overlay').addClass('display-sponsor');
    }
    
    $('.title-header').text('${messageHeaderChat}' + ' ' + substringNameHeader('${rolPreferences}'));
    
    websocket = new WebSocket('wss://my-domain.es/o/echo');
    
    websocket.onopen = function (event) {
        websocket.send(json_user());
    };
    
    websocket.onclose = function(event) {
        console.log("DESCONECTADO");
    };
    
    websocket.onmessage = function(event) {
        var message = event.data;
        processMessage(message);
    };
    
    websocket.onerror = function(event) {
        console.log("ERROR: " + event.data);
    };
}

Websocket.java

@Component(
    immediate = true,
    property = {
        "org.osgi.http.websocket.endpoint.path=/o/echo"
    },
    service = Endpoint.class
)
public class WebSocket extends Endpoint {

    private static Log _log = LogFactoryUtil.getLog(WebSocket.class);

A websocket is created in the view.js file, passing it the following parameter:

"wss: //my-domain.es/o/echo"

The endpoint is "/o/ echo" and it is obtained in the class "Websocket.java", inside the "@Component".

"org.osgi.http.websocket.endpoint.path = /o/ echo"

console firefox

network firefox

Solution

  • I have fixed the problem I was having with the Secure Websocket (wss) protocol. I had to configure apache web server to reverse websocket proxy. This configuration has been carried out by following the steps on the following web page:

    https://www.serverlab.ca/tutorials/linux/web-servers-linux/how-to-reverse-proxy-websockets-with-apache-2-4/