Chat Messages With Incremental Output ( Yii Ajax For Polling) In A Page

HELP!EVERYONE!

I want to make a chat page that can read the chat messages from the db and display them one by one without refresh(incremental output) when the user send nothing , and when the user sends some message ,the div must display it immediately, all the message displayed are ordered by the time they created . I do that with ajax ,but it does not work,help!!!

my table chatmessages:_id(PK auto_increment),channel,created_at,speaker,words,target

the chat has two channels – aa bb

the ChannelOptions: 1 is aa, 2 is bb

view _form.php




<div class="form">


<?php $form=$this->beginWidget('CActiveForm', array(

	'id'=>'chat-messages-form',

	'enableAjaxValidation'=>TRUE,

	'clientOptions'=>array('validateOnSubmit'=>TRUE,

),

)); ?>

<?php echo $form->errorSummary($model); ?>


	<div class="row">

		<?php echo $form->labelEx($model,'channel'); ?>

		<?php echo $form->dropDownList($model,'channel',$model->getChannelOptions(),array('onclick'=>"js:return chooseChannel(this);",)); ?>

		<?php echo $form->error($model,'channel'); ?>

	</div>


	<div class="row">

		

		<?php echo $form->labelEx($model,'target); ?>

		<?php echo $form->textField($model,'target'); ?>

		<?php echo $form->error($model,'target'); ?>

	</div>


	<div class="row">

		<?php echo $form->hiddenField($model,'created_at',array('size'=>20,'maxlength'=>20,'value'=>time())); ?>

	</div>

       <div class="row">

			

		<?php echo $form->labelEx($model,'words'); ?>

		<?php echo $form->textField($model,'speaker',array('size'=>20)); ?>

		<?php echo $form->error($model,'words'); ?>

			

       </div>

		


	<div class="row">

		<?php echo $form->labelEx($model,'words'); ?>

		<?php echo $form->textField($model,'words',array('size'=>60,'maxlength'=>500)); ?>

		<?php echo $form->error($model,'words'); ?>

	</div>

       <div class="row buttons">

	      <?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>

      </div>



view chat.php




<?php $this->renderPartial('_form',array(

		'model'=>$model,

	));

	?>

<?php Yii::app()->clientScript->registerCoreScript("jquery")?>

<div id="aa"  style="display:none;">

	Loading...

</div>

<div id="bb"  style="display:none;">	

	Loading..

</div>


<script type="text/javascript">

function chooseChannel(a){

	var channel = document.getElementById('ChatMessages_channel').value;

	if(channel == 1){		

		jQuery(function($) {

			var msgList = document.getElementById('aa');

			function updateMsgs(){

				$.ajax({

					url: "<?php echo $this->createUrl('aa')?>",

					dataType: 'json',

					cache: false,

					success: function(data) {

						var out = "<ul>";

						$(data).each(function(){

							out+="<li>"+this.speaker+":&nbsp;";

							out+=this.words+"&nbsp;";

						});

						out += "</ul>";

						msgList.innerHTML =  out + msgList.innerHTML;

					}

				});

			}

			updateMsgs();

		});	

	}

   

	if(channel == 2){		

		jQuery(function($) {

			var msgList = document.getElementById('bb');

			function updateMsgs(){

				$.ajax({

					url: "<?php echo $this->createUrl('bb')?>",

					dataType: 'json',

					cache: false,

					success: function(data) {

						var out = "<ul>";

						$(data).each(function(){

							out+="<li>"+this.speaker+":&nbsp;";

							out+=this.words+"&nbsp;";

						});

						out += "</ul>";

						msgList.innerHTML =  out + msgList.innerHTML;

					}

				});

			}

			updateMsgs();

		});	

	}

	

	if(a.value == '1'){

		document.all.aa.style.display="";

		document.all.bb.style.display="none";

	}

	if(a.value == '2'){

		document.all.aa.style.display="none";

		document.all.bb.style.display="";

	}

	

}

</script> 



controller ChatMessagesController.php




class ChatMessagesController extends Controller

{......

public function actionAa(){

		 $criteria = new CDbCriteria();

		 $criteria->addCondition("channel=1");	

		 $criteria->order = '_id DESC';

		 $criteria->limit = 1;

		 $chatmsg = ChatMessages::model()->findAll($criteria);

		 echo CJSON::encode($chatmsg);

	 }


public function actionBb){

		 $criteria = new CDbCriteria();

		 $criteria->addCondition("channel=2");	

		 $criteria->order = '_id DESC';

		 $criteria->limit = 1;

		 $chatmsg = ChatMessages::model()->findAll($criteria);

		 echo CJSON::encode($chatmsg);

	 }


........

}



I don’t know how to use ajax polling to implement the chat messages incremental output without refresh clearly. and now when the user input something in textfield and click the channel Drop-down list and click the channel the users is in the data will be stored in the table and the message will displayed, neither do i need to click the send button.

All I want is when I click the "send " button to send the message ,the message I have sent must display immediately,and I also can see the others messages. And when i do not send anything,the others’ chat messages must be displayed one by one without refresh. All the messages order by created_at.

How? write action in controller??? Thanks very much!!!!!

Obviously you need to repeat the ajax call ("poll") at regular intervals. Have you googled "ajax polling"?

You may also use Server-Sent Events, the wiki is about displaying new user messages so it could be interesting to check.

Thank you very much ,bennouna. It helps me a lot.