PHP與反ajax推送，實現的訊息實時推送功能

php的小菜鳥發表於2018-07-16
PHP

index.html

<!DOCTYPE HTML>
<html>
<head>
  <title>反ajax推送</title>
  <style>
    .send{color:#555;text-align: left;}
    .require{color:blue;text-align: right;}
    .content_box{text-align: center;margin: 20px;
          border: 1px solid #ddd;padding: 20px;}
  </style>
  <script src="http://code.jQuery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
  <div class="content_box" id="content_box_title" style="border: none;">訊息框</div>
  <div class="content_box" id="content_box">
  </div>
  <div style="width: 450px;margin: 0 auto;">
    <select id="username" style="font-size: 20px;">
      <option value="1" selected="selected">1</option>
      <option value="2">2</option>
    </select>
    <input type="text" style="font-size: 20px;" value="" id="send_text">
    <button id="btn_send" style="font-size: 20px;">傳送</button>
    <button id="btn_link" style="font-size: 20px">連線</button>
  </div>
  <div class="error_tip" id="error_tip" style="color: red;">
  </div>
  <script>
    $(function(){
      //傳送訊息
      $(`#btn_send`).click(function(){
        var send_text = $(`#send_text`).val();
        if(send_text.length <= 0){
          $(`#error_tip`).html(`不能輸入空值`);
        }else{
          send(send_text);
        }
      });
      //按Enter鍵傳送訊息
      $(`#send_text`).on(`keyup`,function(e){
        if(e.keyCode == 13){
          $(`#btn_send`).trigger(`click`);
        }
      });
      //建立通訊連結
      $(`#btn_link`).click(function(){
        connect();
        var _this = $(this);
        _this.attr(`disabled`,true);
        _this.html(`已連線`);
      });
    });
    //建立通訊連線函式
    function connect(){
      $(`#content_box_title`).html($(`#username`).val()+`的訊息視窗`);
      $.ajax({
        data:{`user`:$(`#username`).val()},
        url:`ajaxPush.PHP`,
        type:`get`,
        timeout:0,
        dataType:`json`,
        success:function(data){
          $(`#content_box`).append(`<div class="require">`+data.msg+`</div>`);
          connect();
        }
      });
    }
    //傳送訊息函式
    function send(massege){
      var user =$(`#username`).val();
      $.getJSON(`write.php`,{`msg`:massege,`user`:user},function(data){
        if(data.sf){
          $(`#content_box`).append(`<div class="send">`+massege+`</div>`);
          $(`#send_text`).val(``);
        }else{
          $(`#error_tip`).html(`輸入儲存錯誤！`);
        }
      });
    }
  </script>
</body>
</html>

ajax處理輸入 write.php

<?php
/**
 * Created by Loading.
 * Time: 2017/4/18 13:13
 * function:
 */
$filename = dirname(__FILE__).`/data.txt`;
$isread_file = dirname(__FILE__).`/isread.txt`;
$user = dirname(__FILE__).`/user.txt`;
//寫入訊息，訊息未讀，誰傳送的訊息
file_put_contents($filename,$_GET[`msg`]);
file_put_contents($isread_file,`0`);
file_put_contents($user,$_GET[`user`]);
echo json_encode(array(`sf`=>true));

長輪詢推送 ajaxPush.php

<?php
/**
 * Created by Loading
 * Time: 2017/4/18 13:12
 * function:
 */
$filename = dirname(__FILE__).`/data.txt`;
$isread_file = dirname(__FILE__).`/isread.txt`;
$userfile = dirname(__FILE__).`/user.txt`;
$get_user = $_GET[`user`] == `1`?`2`:`1`;
$msg=``;
while(1){
  $msg = file_get_contents($filename);
  $isread = file_get_contents($isread_file);
  $user = file_get_contents($userfile);
  //是對方傳送的訊息，設定訊息已讀，退出迴圈。
  if($isread == `0` && $get_user == $user){
    file_put_contents($isread_file,`1`);
    break;
  }
  sleep(1);
}
echo json_encode(array(`msg`=>$msg));


相關文章