Ik heb een stukje code gevonden om een chat op te bouwen.
Onderstaande code werkt en is de orginele code m.u.v. het webadres.
Index.php
server.php
Op dit moment is het zo dat, wanneer iemand nieuw binnen komt in de chat, de boodschap "IP-adres komt binnen" getoond wordt. (regel 42, server.php)
Wat ik graag zou willen is dat de naam getoond wordt i.p.v. het IP-adres van degene die binnenkomt , het lastige is alleen dat ik geen idee heb waar ik deze gebruikersnaam vandaan moet halen, uit welke variabele.
Wie kan mij vertellen hoe ik de gebruikersnaam kan tonen ? Hij staat wel juist in het HTML-scherm. (regel 147, index.php)
Alvast bedankt
Onderstaande code werkt en is de orginele code m.u.v. het webadres.
Index.php
PHP:
<?php
include_once('../SSI.php');
//GLOBAL $user_info;
// $user_info['name'] = 'Clientnaam';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<style type="text/css">
<!--
.chat_wrapper {
width: 500px;
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: 150px;
overflow: auto;
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>
</head>
<body>
<?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(){
//create a new WebSocket object.
var wsUri = "ws://www.myaccount.nl:7890/chat_oud/server.php";
// websocket = new WebSocket(wsUri, 'naam3');
websocket = new WebSocket(wsUri);
websocket.onopen = function(ev) { // connection is open
$('#message_box').append("<div class=\"system_msg\">Welkom in de eigen chat</div>"); //notify user
}
function showMessage()
{
var mymessage = $('#message').val(); //get message text
// var myname = $user_info['name']; //get user name
var myname = $('#name').val(); //get user name
if(myname == ""){ //empty name?
alert("Vul je naam in!");
return;
}
if(mymessage == ""){ //emtpy message?
alert("Voer eerst een bericht in!");
return;
}
//prepare json data
var msg = {
message: mymessage,
name: myname,
color : '<?php echo $colours[$user_colour]; ?>'
};
//convert and send data to server
websocket.send(JSON.stringify(msg));
}
$("#message").keypress(function(event) {
if (event.which == 13) {
event.preventDefault();
showMessage();
}
});
$('#send-btn').click(function(){ //use clicks message send button
showMessage();
/* var mymessage = $('#message').val(); //get message text
var myname = $('#name').val(); //get user name
if(myname == ""){ //empty name?
alert("Enter your Name please!");
return;
}
if(mymessage == ""){ //emtpy message?
alert("Enter Some message Please!");
return;
}
//prepare json data
var msg = {
message: mymessage,
name: myname,
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 ucolor = msg.color; //color
if(type == 'usermsg')
{
$('#message_box').append("<div><span class=\"user_name\" style=\"color:#"+ucolor+"\">"+uname+"</span> : <span class=\"user_message\">"+umsg+"</span></div>");
$('#message_box').animate({ scrollTop: $('#message_box').height() }, 1000);
}
if(type == 'system')
{
$('#message_box').append("<div class=\"system_msg\">"+umsg+"</div>");
}
$('#message').val(''); //reset text
};
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" id="name" placeholder="Je naam" maxlength="10" style="width:20%" value="<?php echo($user_info['name'])?>" />
<input type="text" name="message" id="message" placeholder="Bericht" maxlength="80" style="width:60%" />
<button id="send-btn">Send</button>
</div>
</div>
</body>
</html>server.php
PHP:
<?php
$host = 'www.midlife-info.nl'; //host
$port = '7890'; //port
$null = NULL; //null var
//print_r($_GET);
//Create TCP/IP stream 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
$data = '';
foreach ($socket_new as $k => $v)
$data .= $k.' => '.$v.'/n';
$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'=>$user_info['name'] .' komt binnen'))); //prepare json data
$response = mask(json_encode(array('type'=>'system', 'message'=>'IP = '.$ip.' komt binnen'.$data))); //prepare json data
// $response = mask(json_encode(array('type'=>'system', 'message'=>'Iemand komt nieuw binnen'))); //prepare json data
send_message($response); //notify all users about new connection
//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
$user_name = $tst_msg->name; //sender name
$user_message = $tst_msg->message; //message text
$user_color = $tst_msg->color; //color
//prepare data to be sent to client
$response_text = mask(json_encode(array('type'=>'usermsg', 'name'=>$user_name, 'message'=>$user_message, 'color'=>$user_color)));
send_message($response_text); //send data
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]);
//notify all users about disconnected connection
// $response = mask(json_encode(array('type'=>'system', 'message'=>$user_info['name'].' verlaat de chat')));
$response = mask(json_encode(array('type'=>'system', 'message'=>'Iemand vertrekt weer')));
send_message($response);
}
}
}
// close the listening socket
socket_close($sock);
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: ws://$host:$port/chat_oud/server.php\r\n".
"Sec-WebSocket-Accept:$secAccept\r\n\r\n";
socket_write($client_conn,$upgrade,strlen($upgrade));
}Op dit moment is het zo dat, wanneer iemand nieuw binnen komt in de chat, de boodschap "IP-adres komt binnen" getoond wordt. (regel 42, server.php)
Wat ik graag zou willen is dat de naam getoond wordt i.p.v. het IP-adres van degene die binnenkomt , het lastige is alleen dat ik geen idee heb waar ik deze gebruikersnaam vandaan moet halen, uit welke variabele.
Wie kan mij vertellen hoe ik de gebruikersnaam kan tonen ? Hij staat wel juist in het HTML-scherm. (regel 147, index.php)
Alvast bedankt
