web socket not working with SSL and WSS in javascript

Question

I have implemented web socket using below code,

try {
        console.log('wss://' + hostname + ':' + port + endpoint);
        webSocket = new WebSocket(webSocketURL);
        webSocket.onmessage = function (event) {
            //console.log('send message successfully.');
            var obj = JSON.parse(event.data);
            append_data(obj, market_pair);
        };
    } catch (exception) {
        console.log('Exception handle!');
        console.error(exception);
    }

My page is https supported so I am using wss protocol. but issue is it gives me error that "Firefox can’t establish a connection to the server at wss://domainname.com:4008/order.php" if I will load the page using simple http and use ws in websocket then it is working fine but with wss it shows above error. same way in google chrome it will also not able to connect. My ssl certificate is installed correctly in server and my hosting and domain provided in godaddy and they told me that certificate is installed correctly.

I am running server side socket in php and it is working fine just now able to connect to that socket port using wss://

I have found that I am not able to do handshak using my php code because my php file is running in background and the content I am getting by socket read is encrypted.

function doHandshake($received_header, $client_socket_resource, $host_name, $port) {
    echo $received_header;
    $headers = array();
    $lines = preg_split("/\r\n/", $received_header);
    foreach ($lines as $line) {
        $line = chop($line);
        if (preg_match('/\A(\S+): (.*)\z/', $line, $matches)) {
            $headers[$matches[1]] = $matches[2];
        }
    }

    $secKey = $headers['Sec-WebSocket-Key'];
    echo $headers['Sec-WebSocket-Key']; 
    $secAccept = base64_encode(pack('H*', sha1($secKey . '258EAFA5-E914-47DA-95CA-C5AB0DC85B11')));
    //$secAccept = base64_encode(sha1($secKey . '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'));
    $buffer = "HTTP/1.1 101 Web Socket Protocol Handshake\r\n" .
            "Upgrade: websocket\r\n" .
            "Connection: Upgrade\r\n" .
            "WebSocket-Origin: $host_name\r\n" .
            "WebSocket-Location: wss://$host_name:$port/websocket/btc_boon_pair.php\r\n" .
            "Sec-WebSocket-Accept:$secAccept\r\n\r\n";
    socket_write($client_socket_resource, $buffer, strlen($buffer));
}

this is my handshak function $headers['Sec-WebSocket-Key'] is undefined because $received_header is encrypted.

can anyone suggest the solution of this issue? I have to run php file as daemon and want to connect using wss protocol.

score 0 · Answer 1 · answered Jun 02 '18 at 08:39

Ok finally I solved the issue.

due to the SSL encryption it is not able to read socket in my php daemon file. So I get solution from below answer https://serverfault.com/questions/804862/apache-mod-proxy-forward-secure-websocket-to-non-secure

we can use proxy pass in apache so it will send all request with /websocket to the other ws://host:port/ after this it is working perfectly.

Also make sure that domain name is not using proxy because due to that my above solution is not worked but After removing proxy from DNS settings it started working.

score 0 · Answer 2 · answered Oct 19 '21 at 20:19

In my case, I was using a VPS on Dreamhost.com and thus couldn't change Apache configuration files. However, I used this library to start secure socket server via following code:

use WSSC\Components\ServerConfig;
use WSSC\WebSocketServer;

$config = new ServerConfig();
$config->setIsSsl(true)->setAllowSelfSigned(true)
    ->setCryptoType(STREAM_CRYPTO_METHOD_SSLv23_SERVER)
    ->setLocalCert("./tests/certs/cert.pem")->setLocalPk("./tests/certs/key.pem")
    ->setPort(8888);

$websocketServer = new WebSocketServer(new ServerHandler(), $config);
$websocketServer->run();

I filled cert.pem and key.pem files with proper values from Dreamhost dashboard -> Websites -> Secure Certificates section.

web socket not working with SSL and WSS in javascript

2 Answers2