无法建立连接wss：//example.net：8443 / direct

Question

Im trying to add websocket chat to my website, and can't establish connection towss：//example.net：8443 / direct`

在Ubuntu，Apache上添加我的VirtualHost文件：

    <IfModule mod_ssl.c>
    <VirtualHost *:443>
    ServerAdmin [email protected]
    ServerName example.net
    ServerAlias www.example.net
    DocumentRoot /var/www/html/example.net/public_html

<Directory /var/www/html/example.net/public_html>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

Include /etc/letsencrypt/options-ssl-apache.conf
SSLCertificateFile /etc/letsencrypt/live/example.net-0001/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/example.net-0001/privkey.pem
</VirtualHost>
# wss conf
<VirtualHost *:8443>
    ServerAdmin [email protected]
    ServerName example.net
    DocumentRoot /var/www/html/example.net/public_html

<Directory /var/www/html/example.net/public_html>
    Options +Indexes +FollowSymLinks +MultiViews
    AllowOverride All
    Require local
</Directory>

SSLEngine On
SSLProxyEngine On
ProxyRequests Off
ProxyPreserveHost on

ProxyPass /direct wss://example.net:8443 retry=0 keepalive=On
ProxyPassReverse /direct wss://example.net:8443 retry=0

Include /etc/letsencrypt/options-ssl-apache.conf
SSLCertificateFile /etc/letsencrypt/live/example.net-0001/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/example.net-0001/privkey.pem

</VirtualHost>
</IfModule>

所以，我还以这种方式添加了端口监听功能

Listen 80
Listen 8000
<IfModule ssl_module>
    Listen 443
Listen 8443
</IfModule>

<IfModule mod_gnutls.c>
    Listen 443
Listen 8443
</IfModule>

这是代码，我尝试在其中建立连接：

php-socket.php

<?php
define('HOST_NAME',"example.net");
define('PORT',"8443");
$null = NULL;

require_once("class.chathandler.php");
$chatHandler = new ChatHandler();

$socketResource = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
socket_set_option($socketResource, SOL_SOCKET, SO_REUSEADDR, 1);
socket_bind($socketResource, 0, PORT);
socket_listen($socketResource);

$clientSocketArray = array($socketResource);
while (true) {
    $newSocketArray = $clientSocketArray;
    socket_select($newSocketArray, $null, $null, 0, 10);

    if (in_array($socketResource, $newSocketArray)) {
        $newSocket = socket_accept($socketResource);
        $clientSocketArray[] = $newSocket;

        $header = socket_read($newSocket, 1024);
        $chatHandler->doHandshake($header, $newSocket, HOST_NAME, PORT);

        socket_getpeername($newSocket, $client_ip_address);
        $connectionACK = $chatHandler->newConnectionACK($client_ip_address);

        $chatHandler->send($connectionACK);

        $newSocketIndex = array_search($socketResource, $newSocketArray);
        unset($newSocketArray[$newSocketIndex]);
    }

    foreach ($newSocketArray as $newSocketArrayResource) {  
        while(socket_recv($newSocketArrayResource, $socketData, 1024, 0) >= 1){
            $socketMessage = $chatHandler->unseal($socketData);
            $messageObj = json_decode($socketMessage);

            $chat_box_message = $chatHandler->createChatBoxMessage($messageObj->chat_user, $messageObj->chat_message);
            $chatHandler->send($chat_box_message);
            break 2;
        }

        $socketData = @socket_read($newSocketArrayResource, 1024, PHP_NORMAL_READ);
        if ($socketData === false) { 
            socket_getpeername($newSocketArrayResource, $client_ip_address);
            $connectionACK = $chatHandler->connectionDisconnectACK($client_ip_address);
            $chatHandler->send($connectionACK);
            $newSocketIndex = array_search($newSocketArrayResource, $clientSocketArray);
            unset($clientSocketArray[$newSocketIndex]);         
        }
    }
}
socket_close($socketResource);

class.chathandler.php

<?php
class ChatHandler {
    function send($message) {
        global $clientSocketArray;
        $messageLength = strlen($message);
        foreach($clientSocketArray as $clientSocket)
        {
            @socket_write($clientSocket,$message,$messageLength);
        }
        return true;
    }

    function unseal($socketData) {
        $length = ord($socketData[1]) & 127;
        if($length == 126) {
            $masks = substr($socketData, 4, 4);
            $data = substr($socketData, 8);
        }
        elseif($length == 127) {
            $masks = substr($socketData, 10, 4);
            $data = substr($socketData, 14);
        }
        else {
            $masks = substr($socketData, 2, 4);
            $data = substr($socketData, 6);
        }
        $socketData = "";
        for ($i = 0; $i < strlen($data); ++$i) {
            $socketData .= $data[$i] ^ $masks[$i%4];
        }
        return $socketData;
    }

    function seal($socketData) {
        $b1 = 0x80 | (0x1 & 0x0f);
        $length = strlen($socketData);

        if($length <= 125)
            $header = pack('CC', $b1, $length);
        elseif($length > 125 && $length < 65536)
            $header = pack('CCn', $b1, 126, $length);
        elseif($length >= 65536)
            $header = pack('CCNN', $b1, 127, $length);
        return $header.$socketData;
    }

    function doHandshake($received_header,$client_socket_resource, $host_name, $port) {
        $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'];
        $secAccept = base64_encode(pack('H*', 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\r\n".
        "Sec-WebSocket-Accept:$secAccept\r\n\r\n";
        socket_write($client_socket_resource,$buffer,strlen($buffer));
    }

    function newConnectionACK($client_ip_address) {
        $message = 'New client ' . $client_ip_address.' joined';
        $messageArray = array('message'=>$message,'message_type'=>'chat-connection-ack');
        $ACK = $this->seal(json_encode($messageArray));
        return $ACK;
    }

    function connectionDisconnectACK($client_ip_address) {
        $message = 'Client ' . $client_ip_address.' disconnected';
        $messageArray = array('message'=>$message,'message_type'=>'chat-connection-ack');
        $ACK = $this->seal(json_encode($messageArray));
        return $ACK;
    }

    function createChatBoxMessage($chat_user,$chat_box_message) {
        $message = $chat_user . ": <div class='chat-box-message'>" . $chat_box_message . "</div>";
        $messageArray = array('message'=>$message,'message_type'=>'chat-box-html');
        $chatMessage = $this->seal(json_encode($messageArray));
        return $chatMessage;
    }
}
?>

和index.html

<html>
<head>
    <style>
    body{width:600px;font-family:calibri;}
    .error {color:#FF0000;}
    .chat-connection-ack{color: #26af26;}
    .chat-message {border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;
    }
    #btnSend {background: #26af26;border: #26af26 1px solid;    border-radius: 4px;color: #FFF;display: block;margin: 15px 0px;padding: 10px 50px;cursor: pointer;
    }
    #chat-box {background: #fff8f8;border: 1px solid #ffdddd;border-radius: 4px;border-bottom-left-radius:0px;border-bottom-right-radius: 0px;min-height: 300px;padding: 10px;overflow: auto;
    }
    .chat-box-html{color: #09F;margin: 10px 0px;font-size:0.8em;}
    .chat-box-message{color: #09F;padding: 5px 10px; background-color: #fff;border: 1px solid #ffdddd;border-radius:4px;display:inline-block;}
    .chat-input{border: 1px solid #ffdddd;border-top: 0px;width: 100%;box-sizing: border-box;padding: 10px 8px;color: #191919;
    }
    </style>    
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>  
    function showMessage(messageHTML) {
        $('#chat-box').append(messageHTML);
    }

    $(document).ready(function(){
        var websocket = new WebSocket("ws://example.net:8443/direct/index");
        websocket.onopen = function(event) { 
            showMessage("<div class='chat-connection-ack'>Connection is established!</div>");       
        }
        websocket.onmessage = function(event) {
            var Data = JSON.parse(event.data);
            showMessage("<div class='"+Data.message_type+"'>"+Data.message+"</div>");
            $('#chat-message').val('');
        };

        websocket.onerror = function(event){
            showMessage("<div class='error'>Problem due to some Error</div>");
        };
        websocket.onclose = function(event){
            showMessage("<div class='chat-connection-ack'>Connection Closed</div>");
        }; 

        $('#frmChat').on("submit",function(event){
            event.preventDefault();
            $('#chat-user').attr("type","hidden");      
            var messageJSON = {
                chat_user: $('#chat-user').val(),
                chat_message: $('#chat-message').val()
            };
            websocket.send(JSON.stringify(messageJSON));
        });
    });




    </script>
    </head>
    <body>
        <form name="frmChat" id="frmChat">
            <div id="chat-box"></div>
            <input type="text" name="chat-user" id="chat-user" placeholder="Name" class="chat-input" required />
            <input type="text" name="chat-message" id="chat-message" placeholder="Message"  class="chat-input chat-message" required />
            <input type="submit" id="btnSend" name="send-chat-message" value="Send" >
        </form>
</body>
</html>

[如果我尝试转到https://example.net:8443，则打开页面，一切都很好。

请，请在您的答案中修复文件。...谢谢！！！

Answer 1

您不能在https协议内使用非安全协议。但是，由于您将apache用作代理，因此您应该能够使用wss调用websocket。