FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


PHP Chat (now rather good) how to design socket chat?





Royal
Following code works fine with a special .html with a form and a message [div].
Code:
<?php

$name = "<b>".$_GET['realname']."</b>: ";
$msg  = $_GET['message']."<br>";

$myFile = "dialogFile.txt";
$fh = fopen($myFile, 'a') or die("can't open dialogFile (1)");
fwrite($fh, $name.$msg."\n");
fclose($fh);

$dialog=array("No messages","","","","","","","","","");
;
if ($handle) {
   while (!feof($handle)) {
      $buffer0 = fgets($handle,
$handle = @fopen($myFile, "r") 4096);
      $buffer = trim($buffer0);
      $dialog[9] = $dialog[8];
      $dialog[8] = $dialog[7];
      $dialog[7] = $dialog[6];
      $dialog[6] = $dialog[5];
      $dialog[5] = $dialog[4];
      $dialog[4] = $dialog[3];
      $dialog[3] = $dialog[2];
      $dialog[2] = $dialog[1];
      $dialog[1] = $dialog[0];
      $dialog[0] = $buffer;
   }
   fclose($handle);
}

echo "<script type='text/javascript'>\n";
echo "  window.parent.handleResponse('";
echo $dialog[9].$dialog[8].$dialog[7].$dialog[6].$dialog[5].$dialog[4].$dialog[3].$dialog[2].$dialog[1].$dialog[0];
echo "');\n</script>";

?>


Only thing, there is no pushing mechanism, updating the participants who did not send the current message is not elegant.
Socket technology seems to be the magic word...
Anyone who can instruct me (or give a rather good address about this at the web?)
Royal
The .html I mentioned:
Code:
<HTML>
<HEAD>
<TITLE>Client</TITLE>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">

function handleResponse(txt) {
   var theFormDiv = document.getElementById('theFormDiv');
   theFormDiv.style.display = 'none';
   var responseMessage = document.getElementById('responseMessage');
   var message = 'Messages:<div style="background-color=#aaaaaa;">'+txt+'<\/div>'
   message += '<p><a href="#" onclick="showForm(); return false;">Send another message<\/a><\/p>'
   responseMessage.innerHTML = message;
   responseMessage.style.display = 'block';
}


function showForm() {
   var theFormDiv = document.getElementById('theFormDiv');
   theFormDiv.style.display = 'block';
   document.forms['emailForm'].reset();
   var responseMessage = document.getElementById('responseMessage');
   responseMessage.style.display = 'none';
}

</script>

</HEAD>
<BODY>

<script type="text/javascript">

var IFrameObj; // our IFrame object

function callToServer(theFormName) {

  if (!document.createElement) {return true};
  var IFrameDoc;

  var URL = 'Wserver.php' + buildQueryString(theFormName);
 
  if (!IFrameObj && document.createElement) {
    // create the IFrame and assign a reference to the
    // object to our global variable IFrameObj.
    // this will only happen the first time
    // callToServer() is called
   try {
      var tempIFrame=document.createElement('iframe');
      tempIFrame.setAttribute('id','RSIFrame');
      tempIFrame.style.border='0px';
      tempIFrame.style.width='0px';
      tempIFrame.style.height='0px';
      IFrameObj = document.body.appendChild(tempIFrame);
     
      if (document.frames) {
        // this is for IE5 Mac, because it will only
        // allow access to the document object
        // of the IFrame if we access it through
        // the document.frames array
        IFrameObj = document.frames['RSIFrame'];
      }
    } catch(exception) {
      // This is for IE5 PC, which does not allow dynamic creation
      // and manipulation of an iframe object. Instead, we'll fake
      // it up by creating our own objects.
      iframeHTML='\<iframe id="RSIFrame" style="';
      iframeHTML+='border:0px;';
      iframeHTML+='width:0px;';
      iframeHTML+='height:0px;';
      iframeHTML+='"><\/iframe>';
      document.body.innerHTML+=iframeHTML;
      IFrameObj = new Object();
      IFrameObj.document = new Object();
      IFrameObj.document.location = new Object();
      IFrameObj.document.location.iframe = document.getElementById('RSIFrame');
      IFrameObj.document.location.replace = function(location) {
        this.iframe.src = location;
      }
    }
  }


 
  if (navigator.userAgent.indexOf('Gecko') !=-1 && !IFrameObj.contentDocument) {
    // we have to give NS6 a fraction of a second
    // to recognize the new IFrame
    setTimeout('callToServer()',10);
    return false;
  }
 
  if (IFrameObj.contentDocument) {
    // For NS6
    IFrameDoc = IFrameObj.contentDocument;
  } else if (IFrameObj.contentWindow) {
    // For IE5.5 and IE6
    IFrameDoc = IFrameObj.contentWindow.document;
  } else if (IFrameObj.document) {
    // For IE5
    IFrameDoc = IFrameObj.document;
  } else {
    return true;
  }
 
  IFrameDoc.location.replace(URL);
  return false;
}

function buildQueryString(theFormName) {
  theForm = document.forms[theFormName];
  var qs = '';
  for (e=0;e<theForm.elements.length;e++) {
    if (theForm.elements[e].name!='') {
      qs+=(qs=='')?'?':'&';
      qs+=theForm.elements[e].name+'='+escape(theForm.elements[e].value);
      }
    }
  return qs;
}

</script>


<div id="responseMessage" style="display:none"></div>

<div id="theFormDiv">
<form name="msgForm" id="msgForm" method="get"
   action="Wserver.php"
   onsubmit="return callToServer(this.name)">
Your name:<br>
<input type="text" name="realname"><br>
Your message:<br>
<textarea name="message" cols="50" rows="10"></textarea><br><br>
<input type="submit" value="submit">
</form>
</div>

</BODY>
</HTML>
Royal
Of course I found this somewhere at the web, only extra needed is the textfile with full rights. I could have the .php write a .html with only these last messages. The writer gets his instant feedback, the others refresh their content automatically say every 3 seconds.

I hope this gives a good impression, I hope for a better solution... With a socket construct?
Royal
Code:
<HTML>
<HEAD>
<TITLE>NedertoonWall</TITLE>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">

//  var prefix="Messages:";
var prefix="";
var wachten=false;

function handleResponse(txt) {
   var theFormDiv = document.getElementById('theFormDiv');
//   theFormDiv.style.display = 'none';
   var responseMessage = document.getElementById('responseMessage');
   var message = prefix+'<div ID="IMSG">'+txt+'<\/div>'
   responseMessage.innerHTML = message;
   responseMessage.style.display = 'block';
}


function showForm() {
   wachten=true;
   var theFormDiv = document.getElementById('theFormDiv');
   theFormDiv.style.display = 'block';
   document.forms['msgForm'].reset();
//   var responseMessage = document.getElementById('responseMessage');
//   responseMessage.style.display = 'none';
}

function autorun()
{
 timeloop(4000);    // wachttijd: in milliseconden
}

function msgRefresh()
{
 if(document.msgForm.onsubmit())
 {
   document.msgForm.submit();
 }
}

function timeloop(speedj){
 var tempj='setTimeout("timeloop('+speedj+')",'+speedj+');';
 if (document.getElementById('msgForm').person.value != "" || document.getElementById('msgForm').message.value != "") wachten=true;
 if (wachten != true) msgRefresh();
 eval(tempj); // execute the statement stored in the tempj variable
}

</script>

<STYLE TYPE="text/css">
<!--
BODY { background-image: url(http://home.lvb.net/uploads/images/123/groundzero-street1.jpg); background-repeat: no-repeat; }
</STYLE>

</HEAD>

This lists the header with Javascript
Royal
And here is the body:
Code:
<BODY onload="autorun()">

<!-- SCRIPT HERE -->

<div ID="SHOWINPUT" onclick="showForm()" style="z-index:3;position:absolute;top:260;left:280;width:60;height:20;"></div>

<div id="responseMessage" style="display:block;position:absolute;top:35;left:20;width:600;height:50;font-family:arial;
text-align:left;font-weight:bold;color:indigo;background-color:lavender;filter:alpha(opacity=65);-moz-opacity:.65;opacity:.65;"></div>

<div id="theFormDiv"  style="display:block;background-color:white;filter:alpha(opacity=65);-moz-opacity:.65;opacity:.65;position:absolute;top:88;left:20;width:600;">
<form name="msgForm" STYLE="margin-top:3px;margin-bottom:3px;" id="msgForm" method="get"
   action="N_Wserver.php"
   onsubmit="return callToServer(this.name)">
Naam:<input type="text" name="person" size=10 STYLE="font-family:arial;font-size:8pt">
Bericht:<input type="text" name="message" size=65 STYLE="font-family:arial;font-size:8pt">
<input name="Klik" type="submit" value="Verzend">
</form>
</div>


</BODY>
</HTML>

Royal
This is the javascript as indicated above...
Would it work as good if joined into the header? Or is there a difference in loading/executing time?
Code:

<script type="text/javascript">

var IFrameObj; // our IFrame object

function callToServer(theFormName) {

  if (!document.createElement) {return true};
  var IFrameDoc;

  var URL = 'N_Wserver.php' + buildQueryString(theFormName);
 
  document.getElementById('msgForm').message.value="";
  wachten=false;

  if (!IFrameObj && document.createElement) {
    // create the IFrame and assign a reference to the
    // object to our global variable IFrameObj.
    // this will only happen the first time
    // callToServer() is called
   try {
      var tempIFrame=document.createElement('iframe');
      tempIFrame.setAttribute('id','RSIFrame');
      tempIFrame.style.border='0px';
      tempIFrame.style.width='0px';
      tempIFrame.style.height='0px';
      IFrameObj = document.body.appendChild(tempIFrame);
     
      if (document.frames) {
        // this is for IE5 Mac, because it will only
        // allow access to the document object
        // of the IFrame if we access it through
        // the document.frames array
        IFrameObj = document.frames['RSIFrame'];
      }
    } catch(exception) {
      // This is for IE5 PC, which does not allow dynamic creation
      // and manipulation of an iframe object. Instead, we'll fake
      // it up by creating our own objects.
      iframeHTML='\<iframe id="RSIFrame" style="';
      iframeHTML+='border:0px;';
      iframeHTML+='width:0px;';
      iframeHTML+='height:0px;';
      iframeHTML+='"><\/iframe>';
      document.body.innerHTML+=iframeHTML;
      IFrameObj = new Object();
      IFrameObj.document = new Object();
      IFrameObj.document.location = new Object();
      IFrameObj.document.location.iframe = document.getElementById('RSIFrame');
      IFrameObj.document.location.replace = function(location) {
        this.iframe.src = location;
      }
    }
  }


 
  if (navigator.userAgent.indexOf('Gecko') !=-1 && !IFrameObj.contentDocument) {
    // we have to give NS6 a fraction of a second
    // to recognize the new IFrame
    setTimeout('callToServer()',10);
    return false;
  }
 
  if (IFrameObj.contentDocument) {
    // For NS6
    IFrameDoc = IFrameObj.contentDocument;
  } else if (IFrameObj.contentWindow) {
    // For IE5.5 and IE6
    IFrameDoc = IFrameObj.contentWindow.document;
  } else if (IFrameObj.document) {
    // For IE5
    IFrameDoc = IFrameObj.document;
  } else {
    return true;
  }
 
  IFrameDoc.location.replace(URL);
  return false;
}

function buildQueryString(theFormName) {
  theForm = document.forms[theFormName];
  var qs = '';
  for (e=0;e<theForm.elements.length;e++) {
    if (theForm.elements[e].name!='') {
      qs+=(qs=='')?'?':'&';
      qs+=theForm.elements[e].name+'='+escape(theForm.elements[e].value);
      }
    }
  return qs;
}

</script>
Royal
The thing works really fine now!
I will post the .php asap, remember to set rights to the .txt or .html output file to CHMOD 777.

Still: can anyone help me with a socket-based solution? Please?
Related topics
Chat script
php chat
[IDEA gdi] IRC ???
I cant install php chat tables nor set up diffrent subdomain
Php chat
PHP & Chat
School chat.. Need approval...
The 5 Golden Rules of Professional Design
Chat page?
Php chat room
PHP CHAT PROGRAM IN HEBREW
any suggestion! on create a voice or text chat room??
any suggestion! on create a voice or text chat room??
PHP
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.