使用wss：//时，Websockets和https不会连接

Question

i am creating a php web chat app for my site, it is built in php and js html, it works fine (with some minor annoyances and needing updates) when it is used over http (in secure connections) but when i use https it asked about loading unsafe scripts (the main js for the system) which i dont want, i have tried to change it to wss:// but now i dont get any connection now, there is two main parts to the site the page and the server, the page is as follows

<style type="text/css">
<!--
.chat_wrapper {
    width: 100%;
        height: 100%;
    margin-right: auto;
    margin-left: auto;
    background: #CCCCCC;
    border: 1px solid #999999;
    padding: 10px;
    font: 12px 'lucida grande',tahoma,verdana,arial,sans-serif;
}
.chat_wrapper .message_box {
    background: #FFFFFF;
    height: 380px;
    overflow: scroll;
    padding: 10px;
    border: 1px solid #999999;
}
.chat_wrapper .panel input{
    padding: 2px 2px 2px 5px;
}
.system_msg{color: #BDBDBD;font-style: italic;}
.user_name{font-weight:bold;}
.user_message{color: #88B6E0;}
-->
</style>
<?php 
$colours = array('007AFF','FF7000','FF7000','15E25F','CFC700','CFC700','CF1100','CF00BE','F00');
$user_colour = array_rand($colours);
?>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script language="javascript" type="text/javascript">  
$(document).ready(function(){
    $("#message").keyup(function(event){
    if(event.keyCode == 13){
        $("#send-btn").click();
    }
});

    //create a new WebSocket object.
    var wsUri = "ws://radiobeacononline.com:9000/server.php";   
    websocket = new WebSocket(wsUri); 

    websocket.onopen = function(ev) { // connection is open 
            var myname = $('#name').val(); //get user name
            var mypic = $('#pic').val();
            var msg = {
        message: 'has just joined the chat',
        name: myname,
                pic : mypic,
        color : '<?php echo $colours[$user_colour]; ?>'
        };
        //convert and send data to server
        websocket.send(JSON.stringify(msg));
        $('#message_box').append("<div class=\"system_msg\">Connected!</div>"); //notify user
    }

    $('#send-btn').click(function(){ //use clicks message send button
        var mymessage = $('#message').val(); //get message text
        var myname = $('#name').val(); //get user name
        if(mymessage == ""){ //emtpy message?
            alert("Enter Some message Please!");
            return;
        }
        var mypic = $('#pic').val();
        //prepare json data
        var msg = {
                //type : 'mesage',
        message: mymessage,
        name: myname,
                pic : mypic,
        color : '<?php echo $colours[$user_colour]; ?>'
        };
        //convert and send data to server
        websocket.send(JSON.stringify(msg));
    });

    //#### Message received from server?
    websocket.onmessage = function(ev) {
        var msg = JSON.parse(ev.data); //PHP sends Json data
        var type = msg.type; //message type
        var umsg = msg.message; //message text
        var uname = msg.name; //user name
                var upic = msg.pic // user pic
        var ucolor = msg.color; //color

        if(type == 'usermsg') 
        {
            $('#message_box').append("<div><span class=\"user_name\" style=\"color:#"+ucolor+"\"><img src=\"app/engine/storage/users/"+uname+"/profile/"+upic+"\" width=\"23\" height=\"23\">"+uname+"</span> : <span class=\"user_message\">"+umsg+"</span></div>");
        }
        if(type == 'system')
        {
            $('#message_box').append("<div class=\"system_msg\">"+umsg+"</div>");
        }

        $('#message').val(''); //reset text
    };
    window.setInterval(function() {
  var elem = document.getElementById('message_box');
  elem.scrollTop = elem.scrollHeight;
}, 500);
    websocket.onerror   = function(ev){$('#message_box').append("<div class=\"system_error\">Error Occurred - "+ev.data+"</div>");}; 
    websocket.onclose   = function(ev){$('#message_box').append("<div class=\"system_msg\">Connection Closed</div>");}; 
});
</script>
<div class="chat_wrapper">
<div class="message_box" id="message_box"></div>
<div class="panel">
    <input type="text" name="name"  hidden="" id="name" value="<?=  fSession::get('user_name')?>" maxlength="10" style="width:20%"  />
    <input type="text" name="pic"  hidden="" id="pic" value="<?=  fSession::get('user_photo')?>" maxlength="10" style="width:20%"  />
    <div class="input-group">
        <span class="input-group-addon" id="basic-addon3"><?=  fSession::get('user_name')?></span>
                <input type="text" class="form-control" id="message" aria-describedby="basic-addon3" placeholder="Message" maxlength="80">
            </div>
<button class="btn btn-default form-inline" id="send-btn">Send</button>
</div>
</div>

and the server is as follows

    <?php
$host = 'radiobeacononline.com'; //host
$port = '9000'; //port
$null = NULL; //null var

//Create TCP/IP sream socket
$socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
//reuseable port
socket_set_option($socket, SOL_SOCKET, SO_REUSEADDR, 1);

//bind socket to specified host
socket_bind($socket, 0, $port);

//listen to port
socket_listen($socket);

//create & add listning socket to the list
$clients = array($socket);

//start endless loop, so that our script doesn't stop
while (true) {
    //manage multipal connections
    $changed = $clients;
    //returns the socket resources in $changed array
    socket_select($changed, $null, $null, 0, 10);

    //check for new socket
    if (in_array($socket, $changed)) {
        $socket_new = socket_accept($socket); //accpet new socket
        $clients[] = $socket_new; //add socket to client array

        $header = socket_read($socket_new, 1024); //read data sent by the socket
        perform_handshaking($header, $socket_new, $host, $port); //perform websocket handshake

        socket_getpeername($socket_new, $ip); //get ip address of connected socket
        //$response = mask(json_encode(array('type'=>'system', 'message'=>'A user has joined connected'))); //prepare json data
        //send_message($response); //notify all users about new connection
        $time = time();
        $file = fopen('app/engine/storage/writeable/logs/chat.log','a+');
        fwrite($file,"system: $ip connected $time 
");
        fclose($file);
        //make room for new socket
        $found_socket = array_search($socket, $changed);
        unset($changed[$found_socket]);
    }

    //loop through all connected sockets
    foreach ($changed as $changed_socket) { 

        //check for any incomming data
        while(socket_recv($changed_socket, $buf, 1024, 0) >= 1)
        {
            $received_text = unmask($buf); //unmask data
            $tst_msg = json_decode($received_text); //json decode 
                        // if($tst_msg->type == message)
                        // {
                        //  what it says below
                        // elseif($tst_msg->type == system)
                        // {
                        // do a system update this will be if the user is online or not.
                        // this will need a lot fo work on it to make sure that they are.
                        // }
                        // elseif($tst_msg->type == users)
                        // {
                        // update user list.
                        // }
                        // elseif($tst_msg->type == ping)
                        // {
                        // do ping stuff.
                        // }
                        // elseif($tst_msg->type == pong)
                        // {
                        // do pong stuff
                        // }

            $user_name = $tst_msg->name; //sender name
            $user_message = $tst_msg->message; //message text
            $user_color = $tst_msg->color; //color
                        $user_pic = $tst_msg->pic; //color
            $time = time();
            //prepare data to be sent to client
            $response_text = mask(json_encode(array('type'=>'usermsg', 'name'=>$user_name, 'message'=>$user_message, 'color'=>$user_color, 'pic'=>$user_pic)));
            send_message($response_text); //send data
            $file = fopen('app/engine/storage/writeable/logs/chat.log','a+');
            fwrite($file,"usermsg $user_name : $user_message $time 
");
            fclose($file);
            break 2; //exist this loop
        }

        $buf = @socket_read($changed_socket, 1024, PHP_NORMAL_READ);
        if ($buf === false) { // check disconnected client
            // remove client for $clients array
            $found_socket = array_search($changed_socket, $clients);
            socket_getpeername($changed_socket, $ip);
            unset($clients[$found_socket]);
            $time = time();
            //notify all users about disconnected connection
            $response = mask(json_encode(array('type'=>'system', 'message'=>$ip.' disconnected')));
            send_message($response);
            $file = fopen('app/engine/storage/writeable/logs/chat.log','a+');
            fwrite($file,"system $ip disconected $time 
");
            fclose($file);
        }
    }
}
// close the listening socket
socket_close($socket);

function send_message($msg)
{
    global $clients;
    foreach($clients as $changed_socket)
    {
        @socket_write($changed_socket,$msg,strlen($msg));
    }
    return true;
}


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

//Encode message for transfer to client.
function mask($text)
{
    $b1 = 0x80 | (0x1 & 0x0f);
    $length = strlen($text);

    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.$text;
}

//handshake new client.
function perform_handshaking($receved_header,$client_conn, $host, $port)
{
    $headers = array();
    $lines = preg_split("/
/", $receved_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')));
    //hand shaking header
    $upgrade  = "HTTP/1.1 101 Web Socket Protocol Handshake
" .
    "Upgrade: websocket
" .
    "Connection: Upgrade
" .
    "WebSocket-Origin: $host
" .
    "WebSocket-Location: wss://$host:$port/demo/shout.php
".
    "Sec-WebSocket-Accept:$secAccept

";
    socket_write($client_conn,$upgrade,strlen($upgrade));
}

this works fine in http but does not work in https is there anybody out there that can help with this and make it work on a https system with out having to click something that will allow it after saying unsafe on it?

Answer 1

Obviously that would never work over SSL, because your code doesn't support SSL. You're just opening a raw socket and sending/receiving over an unsecured socket. SSL takes place as a layer of security, on top of the socket layer, hence the name SSL. You can't downgrade from a page loaded over a secured connection to loading resources over an insecure connection. The browser simply won't allow that is it defeats the purposes of using a secure connection.

The simple fix is to place a reverse proxy infront of your websocket server that supports SSL and have the SSL termination happen at the proxy level. HAProxy is one such reverse proxy that can support websockets.

The more complicated fix, which is far too broad to explain in detail here, is to actually do the SSL termination at your application level (i.e. in PHP). This part would require a tremendous amount of research and effort on your part and I really wouldn't suggest it if you're just starting out learning about these things.