使用wss://时,Websockets和https不会连接

时间:2016-09-22 02:56:13

标签: javascript php websocket

我正在为我的网站创建一个php网络聊天应用程序,它是用php和js html构建的,当它被用于http(在安全连接中)但当我使用时,它工作正常(有一些小烦恼和需要更新)使用https它询问加载不安全脚本(系统的主要js),我不想要,我试图将其更改为wss://但现在我没有得到任何连接,网站有两个主要部分页面和服务器,页面如下

<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>

,服务器如下

    <?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 \r\n");
        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 \r\n");
            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 \r\n");
            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("/\r\n/", $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\r\n" .
    "Upgrade: websocket\r\n" .
    "Connection: Upgrade\r\n" .
    "WebSocket-Origin: $host\r\n" .
    "WebSocket-Location: wss://$host:$port/demo/shout.php\r\n".
    "Sec-WebSocket-Accept:$secAccept\r\n\r\n";
    socket_write($client_conn,$upgrade,strlen($upgrade));
}

这在http中工作得很好但在https中不起作用是否有任何人可以帮助解决这个问题并使其在https系统上运行而不必点击会在说不安全之后允许它的内容?

1 个答案:

答案 0 :(得分:0)

显然,它永远不会通过SSL,因为您的代码不支持SSL。您只是打开一个原始套接字并通过一个不安全的套接字发送/接收。 SSL在套接字层之上作为安全层发生,因此名称为 SSL 。您无法从通过安全连接加载的页面降级到通过不安全连接加载资源。浏览器根本不允许这样做就是为了破坏使用安全连接的目的。

简单的解决方法是在您的websocket服务器前面放置一个支持SSL的反向代理,并在代理级别进行SSL终止。 HAProxy是一个可以支持websockets的反向代理。

更复杂的修复,实在太广泛,无法在此详细解释,实际上是在应用程序级别(即在PHP中)进行SSL终止。这部分需要你进行大量的研究和努力,如果你刚刚开始学习这些东西,我真的不会建议。