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?
