建置完 Laravel 會員系統後 , 要如何建置聊天室

laravel

alex9453 2019-04-17 16:44:28 ‧ 4707 瀏覽

分享至

建置會員系統只要 2 分鐘
https://www.youtube.com/watch?v=RO1ckddNgWM

幾乎每個網站都有會員系統 , 所以建置完後 , 要如何建置聊天室
聊天室架構如下 , 沒使用 laravel 的傳統設計方式 , 要如何轉到 laravel

ccutmis iT邦高手 2 級 ‧ 2019-04-17 19:34:52 檢舉

到youtube 搜"Laravel chatroom"就有影片了

alex9453 iT邦新手 2 級 ‧ 2019-04-17 20:31:35 檢舉

聽得懂一半而已

ccutmis iT邦高手 2 級 ‧ 2019-04-17 21:09:09 檢舉

看一遍聽的懂一半很不錯了再多看一遍就全懂了...

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

5 個回答

bestlong

iT邦研究生 4 級 ‧ 2019-04-20 18:29:04

最佳解答

學 PHP 語言是練基本功
與學 Laravel 框架是不同層級的狀況
如果能力已到用 PHP 可以做出可用的網站，再學框架才比較有概念

練功題目的部分用聊天室牽涉到很多高階技術真的不建議
或許改為 Blog、討論區或購物車都不錯

回應 1
分享
檢舉

alex9453 iT邦新手 2 級 ‧ 2019-04-21 21:39:10 檢舉

瞭解 , 我看聊天室網頁才 3 個檔案 , 以為很簡單 , 還是做其他好了

登入發表回應

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2019-04-17 16:58:26

你問了一個好大的問題。聊天室怎麼做耶!!!
你要不要直接問「我水泥鋪好了，再來怎麼建房子。」
還是你覺得聊天室是個單純的東西很簡單?

如果你可以將想問的東西再分細分細分細一些，搞不好我還會回答你。

不過
依據過往的經驗，及判斷你的能力的情況下。
我想我沒那個能力可以教會你。

所以，下一位請繼續

回應 8
分享
檢舉

看更多先前的回應...收起先前的回應...

alex9453 iT邦新手 2 級 ‧ 2019-04-17 17:13:07 檢舉

抱歉 ! 我以為很簡單 , 傳統檔案我看得懂 , 要怎麼轉到 laravel , 就沒有頭緒 , 有 3 個檔案 enterroom.php , chatroom.php , chat.ine.php
enterroom 如下

<?php
require_once ("chat.inc.php");
session_start();

$users = array();

if(is_file(USER_LIST)) {    // 檢查聊天名單檔是否存在
  // 由檔案讀入聊天名單並存於陣列中
  $users = unserialize(file_get_contents(USER_LIST));
}
$msg_users ="沒有人";
if( count($users)>0) $msg_users="有".count($users)."人";

$xajax = new xajax();             // 建立物件
$xajax->configure('javascript URI', '../');
$request=$xajax->register(XAJAX_FUNCTION,  // 註冊回應函式
                          'checkname');  
$request->addParameter(XAJAX_FORM_VALUES, 'form1');
$xajax->processRequest();                  // 處理非同步要求

// ---------------------------------------------------------- 
function checkname($form1) { // 檢查使用者暱稱的回應函式
  global $users;
  $response = new xajaxResponse();
  $username=$form1['username'];
  
  $username = trim($username);  // 去除名稱前後空白
  if($username == '') {         // 檢查名稱是否僅含空白
    $response->assign('msg', 'innerHTML', '您的暱稱不合法！');
    return $response;
  }
  
  $username = htmlspecialchars($username);  // 轉成適合 HTML 的格式
  
  if (count($users) == MAX_USER) {  // 檢查人數是否已達上限
    $response->assign('msg', 'innerHTML',
                             '聊天室人數已達上限, 請稍候再試！');
	return $response;
  }                                 // 檢查是否已有相同名稱
  elseif (array_key_exists(strtolower($username), $users)) {
    $response->assign('msg', 'innerHTML', 
                      '已有人使用相同暱稱, 請更換暱稱！');
	return $response;
  }
  
  $users[strtolower($username)] = $username;  // 以小寫名稱當索引
  file_put_contents(USER_LIST, serialize($users), LOCK_EX);
  
  // 以下利用 session 變數儲存必要資訊
  // 並讓使用者進入 ChatRoom.php 網頁
  $_SESSION['newuser'] = true;                // 記錄此為新加入的使用者
  $_SESSION['username'] = $username;          // 記錄使用者暱稱
  $response->redirect('ChatRoom.php');     // 將瀏覽器轉至聊天室
  return $response;
}  
?>
<!DOCTYPE html>
<html>
<head>
  <title>聊天登入網頁</title>
  <meta charset="UTF-8">
  <?php $xajax->printJavascript(); // 輸出 JavaScript 程式 ?>
  <link rel="stylesheet" type="text/css" href="chatstyle.css">
</head>
<body>
  <p class="logo">Welcome!<br>歡迎來到PHP聊天室</p>
  <p>目前<?php echo $msg_users; ?>上線。</p>
  <form id="form1" name="form1" 
    onsubmit='<?php $request->printscript() ?>;return false;'>
    請輸入暱稱：<input type="text" id="username" name="username">    
	<input type="submit" value="進入聊天室">
  </form>
  <span id="msg" class="sys_msg"></span>
</body>
</html>

chatroom 如下

<?php
require_once ("chat.inc.php");
session_start();

// $_SESSION['newuser'] == true 表示是新進聊天室的使用者
// 因此要建立一筆歡迎訊息
if(!empty($_SESSION['newuser']) && $_SESSION['newuser'] == true) {  // 新使用者
  // 建立一筆使用者剛進入聊天室的訊息
  $welcomeMsg = '<span style="color:gray">' . 
                $_SESSION['username'] . 
                ' 進入聊天室</span><br>';
  // $_SESSION['lastRead'] 記錄最近一次讀到的訊息之索引
  // addMsg() 會傳回加入的新訊息所在位置之索引
  // 以下設定新使用者從歡迎自己的訊息開始讀取 
  $_SESSION['lastRead'] = addMsg($welcomeMsg);
  unset($_SESSION['newuser']);                 // 取消新使用者狀態 
}
// 若 $_SESSION['newuser'] 不是 true 
// 也沒有 $_SESSION['lastRead'] 的值
// 表示使用者是隨意進入聊天室, 因此轉至登入網頁
elseif(!isset($_SESSION['lastRead']))         // 隨意進入本網頁
  header('Location: EnterRoom.php');          // 轉至登入網頁

$xajax = new xajax();                         // 建立物件
$xajax->configure('javascript URI', '../');
$xajax->configure('waitCursor', false);
$xajax->register(XAJAX_FUNCTION,'send'); // 註冊送出訊息的回應函式             
$xajax->register(XAJAX_FUNCTION,'read'); // 註冊讀取訊息的回應函式
$xajax->register(XAJAX_FUNCTION,'bye');  // 註冊離開聊天室的回應函式
$xajax->processRequest();         // 處理非同步要求


// --------------------------------------------------------------------
// 新增訊息至聊天檔的函式, 傳回值為新訊息存於陣列的索引值
function addMsg($msg) {   
  // 檢查聊天檔案是否存在
  if(is_file(CHAT_FILE))      // 若檔案存在
    $msgEntry = unserialize(file_get_contents(CHAT_FILE));
  else                        // 若檔案不存在
    $msgEntry[0] = ENTRY_MAX; // 將代表最後一筆資料位置的變數
                              // 設到最後一筆
   
  $indexLast = $msgEntry[0];  // 保留最後一筆的數值, 以便稍後傳回 
  
  if(++$msgEntry[0] > ENTRY_MAX)  // 將代表最後一筆資料位置的變數加 1
    $msgEntry[0] = 1;             // 若其值超過訊息數上限, 則設為 1
  $msgEntry[$msgEntry[0]] = $msg;
  file_put_contents(CHAT_FILE, serialize($msgEntry), LOCK_EX);
  return $indexLast;          // 傳回新加入訊息所在的索引值  
}                             // 只有新進聊天室時, 會用到此傳回值

// 接收用戶端送出新訊息的回應函式                                   
function send($aFormValues) {   // 參數為表單陣列
  // 由表單陣列取得使用者輸入的訊息、及選擇的訊息顏色
  $usermsg  = htmlspecialchars($aFormValues['usermsg']);
  $colorselect  = $aFormValues['colorselect'];
  
  // 組合訊息字串, 在字串最後加上換行標籤
  $str = sprintf('[%s] <span class="nick">%s</span>:&nbsp<span class="usr_msg" style="color:%s">%s</span><br>',
                 date('H:i'),           // 目前時間
                 $_SESSION['username'], // 使用者暱稱
                 $colorselect,          // 訊息顏色
                 changeface($usermsg)); // 替換表情字串後的訊息文字
                 
  addMsg($str);         // 將訊息存檔
	
  $response = new xajaxResponse();   
  return $response;                  // 傳回空的回應內容
}

// 將表情符號置換成對應圖檔 img 標籤的函式
function changeface($str) {
  // 表情符號陣列
  $symbols = array(':)',  
                   ':(',
                   ':D',
                   ':cry');
  // 表情圖案檔名陣列
  $tags = array('<img src="images/smile.gif">',
                '<img src="images/upset.gif">',
                '<img src="images/lol.gif">',
                '<img src="images/cry.gif">');
  
  // 將 $str 中出現的 $symbols 陣列元素, 換成對應的 $tags 陣列元素
  return str_replace($symbols, $tags, $str);
}

// 由用戶端定時呼叫, 以便讀取新的聊天訊息的回應函式
function read() {
  $response = new xajaxResponse();
  
  if(!is_file(CHAT_FILE)||!is_file(USER_LIST)) { // 若檔案不存在
    $response->append('allmsg', 'innerHTML',  // 在網頁中顯示訊息
       '<span style="color:red">系統錯誤</span>');
	$response->call('scrollDiv',null);
	return $response;
  }
  
  $users = unserialize(file_get_contents(USER_LIST));    // 讀取名單
  $msgEntry = unserialize(file_get_contents(CHAT_FILE)); // 讀取訊息
  $indexLast = $msgEntry[0]; 
    
  // 比較用戶端上次讀到的訊息索引, 與目前檔案記錄最後一筆訊息的索引
  // 兩者相同表示沒有新訊息要傳送給用戶端, 即跳過 if 段落
  // 兩者不同才需傳送新訊息給用戶端
  if ($_SESSION['lastRead'] != $indexLast) {
    $str = '';                      // 初始化訊息字串
    // 由最近一筆訊息開始往前讀, 讀到上次所讀到的訊息為止
    for($i=$indexLast; $i != $_SESSION['lastRead']; ) { 
      $str = $msgEntry[$i] . $str; // 以『舊訊息在前』的方式串接訊息
      ($i == 1) ? $i = ENTRY_MAX : // 若 $i==1, 將 $i 設為索引最大值 
                  $i--;            // 否則將 $i 值減 1 
    }
    $_SESSION['lastRead'] = $indexLast;  // 更新 session 中的記錄
    $response->append('allmsg', 'innerHTML', $str); // 回應訊息
    
    // 呼叫捲動訊息區的 JavaScript 函式
    $response->call('scrollDiv'); 
  }
  
  // 將目前的使用者名單存到 $nameList 字串
  $nameList = '';
  foreach($users as $k=>$username){
    // 自己的匿稱加粗
    if($username == $_SESSION['username'])
	  $nameList .= '<b>' . $username . '</b><br>'; 
	else  
      $nameList .= $username . '<br>'; 
  }
  $response->assign('userlist', 'innerHTML', 
                       $nameList); // 傳回名單 
  return $response;
}

// 用戶離線的回應函式
function bye() {
  $users = unserialize(file_get_contents(USER_LIST)); // 取得名單陣列
  // 將使用者暱稱自名單移除
  unset($users[strtolower($_SESSION['username'])]);
  if(count($users) == 0) { // 若聊天室已沒有人了
    unlink(USER_LIST);     // 刪除名單檔
    unlink(CHAT_FILE);     // 刪除聊天檔
  }
  elseif (isset($_SESSION['username'])) {    // 若聊天室還有別人
    // 將減少一人的名單陣列寫回名單檔
    file_put_contents(USER_LIST, serialize($users), LOCK_EX); 
  
    // 建立一筆使用者離開的訊息
    $byeMsg = '<span style="color:gray">' . $_SESSION['username'] . 
              ' 離開聊天室</span><br>';
    addMsg($byeMsg);       // 新增訊息 
  }
  session_destroy();       // 清除 session 變數  
  
  $response = new xajaxResponse();  
  $response->redirect('EnterRoom.php');  // 將使用者轉回登入網頁
  return $response;
}
?>
<!DOCTYPE html>
<html>
<head>
  <title>PHP 聊天室</title>
  <meta charset="UTF-8">
  <?php $xajax->printJavascript();  ?>
  <script>
    var readTimer;  // 儲存定時器
	// 定時呼叫 xajax_read() 的函式
    function startRead() {
      xajax_read();
      readTimer=setTimeout('startRead()', 3000); // 3 秒後再呼叫自己
    } 
    
	// 檢查是否支援 HTML5 input type="color"
	function check_input_color(){
	  var i = document.getElementById("bgcolorselect");
      // 有支援 HTML5 color 輸入欄位
	  if (i.type == "color") {
	    i.onchange = function () {    // 設定『當使用者變更色彩』時, 
		  document.body.style.background=i.value;  // 即改變背景顏色
		}
	  }
	  // 不支援 HTML5 color 輸入欄位
	  else{    // 移除 HTML5 color 輸入欄位相關標籤
	    var span=document.getElementById("bgcolor");
		span.parentNode.removeChild(span);
	  }
	}
	
    // 檢查是否輸入空白訊息
    function check()	{
      // 取得代表訊息區的物件
      msg = document.getElementById('usermsg');  

      if(msg.value == "")	{ // 若為空白訊息 
	      alert("未輸入訊息");// 提示使用者
      } 
      else {                // 非空白訊息才送出
        xajax_send(xajax.getFormValues('bottom')); 
                            // 以 bottom 表單欄位的陣列為參數
		clearTimeout(readTimer);
		startRead();        // 重新設定定時讀取  
        msg.value = "";     // 將訊息區內容設為空白
        msg.focus();        // 將游標移至訊息區         
      }
    }
    
    // 將訊息區捲動至最下方 
    function scrollDiv() {
      var objDiv = document.getElementById("allmsg");
      if (!document.getElementById("noscroll").checked)
        objDiv.scrollTop = objDiv.scrollHeight;      
    }
  </script>
  <link rel="stylesheet" type="text/css" href="chatstyle.css">
</head>
<!-- 設定載入網頁時呼叫 nextRead() -->
<body onload="startRead();check_input_color();" onunload="xajax_bye();">
<p class="logo">PHP聊天室</p>
  <div style="height:255px">
    <div id="allmsg"></div>
    <div id="userlist"></div>
  </div>
  <hr style="clear:both">
  <form id="bottom" onsubmit="check();return false;">
    <input type="text" id="usermsg" name="usermsg" cols="75">
    <select id="colorselect" name="colorselect">
      <option value="black"  style="color:black" selected>黑</option>
      <option value="red"    style="color:red">紅</option>
      <option value="green"  style="color:green">綠</option>
      <option value="blue"   style="color:blue">藍</option>
      <option value="fuchsia" style="color:fuchsia">粉紅</option>
      <option value="gray"   style="color:gray">灰</option>
      <option value="maroon" style="color:maroon">褐</option>
      <option value="navy"   style="color:navy">海藍</option>
      <option value="olive"  style="color:olive">橄欖</option>
      <option value="purple" style="color:purple">紫</option>
      <option value="silver" style="color:silver">銀</option>
      <option value="teal"   style="color:teal">藍綠</option>
      <option value="yellow" style="color:yellow">黃</option>
    </select>
	<input type="submit" value="送出">
    </form>
	<button type="button" onClick="xajax_bye();">離開</button><br>
	<input type="checkbox" id="noscroll" name="noscroll">暫停捲動
	<span id="bgcolor">&nbsp;更換背景顏色：
	  <input type="color" id="bgcolorselect">
	</span>
</body>
</html>

抱歉 ! 我以為很簡單 , 傳統檔案我看得懂 , 要怎麼轉到 laravel , 就沒有頭緒 , 有 3 個檔案 enterroom.php , chatroom.php , chat.ine.php
enterroom 如下
```
<?php
require_once ("chat.inc.php");
session_start();

$users = array();

if(is_file(USER_LIST)) {    // 檢查聊天名單檔是否存在
  // 由檔案讀入聊天名單並存於陣列中
  $users = unserialize(file_get_contents(USER_LIST));
}
$msg_users ="沒有人";
if( count($users)>0) $msg_users="有".count($users)."人";

$xajax = new xajax();             // 建立物件
$xajax->configure('javascript URI', '../');
$request=$xajax->register(XAJAX_FUNCTION,  // 註冊回應函式
                          'checkname');  
$request->addParameter(XAJAX_FORM_VALUES, 'form1');
$xajax->processRequest();                  // 處理非同步要求

// ---------------------------------------------------------- 
function checkname($form1) { // 檢查使用者暱稱的回應函式
  global $users;
  $response = new xajaxResponse();
  $username=$form1['username'];
  
  $username = trim($username);  // 去除名稱前後空白
  if($username == '') {         // 檢查名稱是否僅含空白
    $response->assign('msg', 'innerHTML', '您的暱稱不合法！');
    return $response;
  }
  
  $username = htmlspecialchars($username);  // 轉成適合 HTML 的格式
  
  if (count($users) == MAX_USER) {  // 檢查人數是否已達上限
    $response->assign('msg', 'innerHTML',
                             '聊天室人數已達上限, 請稍候再試！');
	return $response;
  }                                 // 檢查是否已有相同名稱
  elseif (array_key_exists(strtolower($username), $users)) {
    $response->assign('msg', 'innerHTML', 
                      '已有人使用相同暱稱, 請更換暱稱！');
	return $response;
  }
  
  $users[strtolower($username)] = $username;  // 以小寫名稱當索引
  file_put_contents(USER_LIST, serialize($users), LOCK_EX);
  
  // 以下利用 session 變數儲存必要資訊
  // 並讓使用者進入 ChatRoom.php 網頁
  $_SESSION['newuser'] = true;                // 記錄此為新加入的使用者
  $_SESSION['username'] = $username;          // 記錄使用者暱稱
  $response->redirect('ChatRoom.php');     // 將瀏覽器轉至聊天室
  return $response;
}  
?>
<!DOCTYPE html>
<html>
<head>
  <title>聊天登入網頁</title>
  <meta charset="UTF-8">
  <?php $xajax->printJavascript(); // 輸出 JavaScript 程式 ?>
  <link rel="stylesheet" type="text/css" href="chatstyle.css">
</head>
<body>
  <p class="logo">Welcome!<br>歡迎來到PHP聊天室</p>
  <p>目前<?php echo $msg_users; ?>上線。</p>
  <form id="form1" name="form1" 
    onsubmit='<?php $request->printscript() ?>;return false;'>
    請輸入暱稱：<input type="text" id="username" name="username">    
	<input type="submit" value="進入聊天室">
  </form>
  <span id="msg" class="sys_msg"></span>
</body>
</html>
```
chatroom 如下

```
<?php
require_once ("chat.inc.php");
session_start();

// $_SESSION['newuser'] == true 表示是新進聊天室的使用者
// 因此要建立一筆歡迎訊息
if(!empty($_SESSION['newuser']) && $_SESSION['newuser'] == true) {  // 新使用者
  // 建立一筆使用者剛進入聊天室的訊息
  $welcomeMsg = '<span style="color:gray">' . 
                $_SESSION['username'] . 
                ' 進入聊天室</span><br>';
  // $_SESSION['lastRead'] 記錄最近一次讀到的訊息之索引
  // addMsg() 會傳回加入的新訊息所在位置之索引
  // 以下設定新使用者從歡迎自己的訊息開始讀取 
  $_SESSION['lastRead'] = addMsg($welcomeMsg);
  unset($_SESSION['newuser']);                 // 取消新使用者狀態 
}
// 若 $_SESSION['newuser'] 不是 true 
// 也沒有 $_SESSION['lastRead'] 的值
// 表示使用者是隨意進入聊天室, 因此轉至登入網頁
elseif(!isset($_SESSION['lastRead']))         // 隨意進入本網頁
  header('Location: EnterRoom.php');          // 轉至登入網頁

$xajax = new xajax();                         // 建立物件
$xajax->configure('javascript URI', '../');
$xajax->configure('waitCursor', false);
$xajax->register(XAJAX_FUNCTION,'send'); // 註冊送出訊息的回應函式             
$xajax->register(XAJAX_FUNCTION,'read'); // 註冊讀取訊息的回應函式
$xajax->register(XAJAX_FUNCTION,'bye');  // 註冊離開聊天室的回應函式
$xajax->processRequest();         // 處理非同步要求

// --------------------------------------------------------------------
// 新增訊息至聊天檔的函式, 傳回值為新訊息存於陣列的索引值
function addMsg($msg) {   
  // 檢查聊天檔案是否存在
  if(is_file(CHAT_FILE))      // 若檔案存在
    $msgEntry = unserialize(file_get_contents(CHAT_FILE));
  else                        // 若檔案不存在
    $msgEntry[0] = ENTRY_MAX; // 將代表最後一筆資料位置的變數
                              // 設到最後一筆
   
  $indexLast = $msgEntry[0];  // 保留最後一筆的數值, 以便稍後傳回 
  
  if(++$msgEntry[0] > ENTRY_MAX)  // 將代表最後一筆資料位置的變數加 1
    $msgEntry[0] = 1;             // 若其值超過訊息數上限, 則設為 1
  $msgEntry[$msgEntry[0]] = $msg;
  file_put_contents(CHAT_FILE, serialize($msgEntry), LOCK_EX);
  return $indexLast;          // 傳回新加入訊息所在的索引值  
}                             // 只有新進聊天室時, 會用到此傳回值

// 接收用戶端送出新訊息的回應函式                                   
function send($aFormValues) {   // 參數為表單陣列
  // 由表單陣列取得使用者輸入的訊息、及選擇的訊息顏色
  $usermsg  = htmlspecialchars($aFormValues['usermsg']);
  $colorselect  = $aFormValues['colorselect'];
  
  // 組合訊息字串, 在字串最後加上換行標籤
  $str = sprintf('[%s] <span class="nick">%s</span>:&nbsp<span class="usr_msg" style="color:%s">%s</span><br>',
                 date('H:i'),           // 目前時間
                 $_SESSION['username'], // 使用者暱稱
                 $colorselect,          // 訊息顏色
                 changeface($usermsg)); // 替換表情字串後的訊息文字
                 
  addMsg($str);         // 將訊息存檔
	
  $response = new xajaxResponse();   
  return $response;                  // 傳回空的回應內容
}

// 將表情符號置換成對應圖檔 img 標籤的函式
function changeface($str) {
  // 表情符號陣列
  $symbols = array(':)',  
                   ':(',
                   ':D',
                   ':cry');
  // 表情圖案檔名陣列
  $tags = array('<img src="images/smile.gif">',
                '<img src="images/upset.gif">',
                '<img src="images/lol.gif">',
                '<img src="images/cry.gif">');
  
  // 將 $str 中出現的 $symbols 陣列元素, 換成對應的 $tags 陣列元素
  return str_replace($symbols, $tags, $str);
}

// 由用戶端定時呼叫, 以便讀取新的聊天訊息的回應函式
function read() {
  $response = new xajaxResponse();
  
  if(!is_file(CHAT_FILE)||!is_file(USER_LIST)) { // 若檔案不存在
    $response->append('allmsg', 'innerHTML',  // 在網頁中顯示訊息
       '<span style="color:red">系統錯誤</span>');
	$response->call('scrollDiv',null);
	return $response;
  }
  
  $users = unserialize(file_get_contents(USER_LIST));    // 讀取名單
  $msgEntry = unserialize(file_get_contents(CHAT_FILE)); // 讀取訊息
  $indexLast = $msgEntry[0]; 
    
  // 比較用戶端上次讀到的訊息索引, 與目前檔案記錄最後一筆訊息的索引
  // 兩者相同表示沒有新訊息要傳送給用戶端, 即跳過 if 段落
  // 兩者不同才需傳送新訊息給用戶端
  if ($_SESSION['lastRead'] != $indexLast) {
    $str = '';                      // 初始化訊息字串
    // 由最近一筆訊息開始往前讀, 讀到上次所讀到的訊息為止
    for($i=$indexLast; $i != $_SESSION['lastRead']; ) { 
      $str = $msgEntry[$i] . $str; // 以『舊訊息在前』的方式串接訊息
      ($i == 1) ? $i = ENTRY_MAX : // 若 $i==1, 將 $i 設為索引最大值 
                  $i--;            // 否則將 $i 值減 1 
    }
    $_SESSION['lastRead'] = $indexLast;  // 更新 session 中的記錄
    $response->append('allmsg', 'innerHTML', $str); // 回應訊息
    
    // 呼叫捲動訊息區的 JavaScript 函式
    $response->call('scrollDiv'); 
  }
  
  // 將目前的使用者名單存到 $nameList 字串
  $nameList = '';
  foreach($users as $k=>$username){
    // 自己的匿稱加粗
    if($username == $_SESSION['username'])
	  $nameList .= '<b>' . $username . '</b><br>'; 
	else  
      $nameList .= $username . '<br>'; 
  }
  $response->assign('userlist', 'innerHTML', 
                       $nameList); // 傳回名單 
  return $response;
}

// 用戶離線的回應函式
function bye() {
  $users = unserialize(file_get_contents(USER_LIST)); // 取得名單陣列
  // 將使用者暱稱自名單移除
  unset($users[strtolower($_SESSION['username'])]);
  if(count($users) == 0) { // 若聊天室已沒有人了
    unlink(USER_LIST);     // 刪除名單檔
    unlink(CHAT_FILE);     // 刪除聊天檔
  }
  elseif (isset($_SESSION['username'])) {    // 若聊天室還有別人
    // 將減少一人的名單陣列寫回名單檔
    file_put_contents(USER_LIST, serialize($users), LOCK_EX); 
  
    // 建立一筆使用者離開的訊息
    $byeMsg = '<span style="color:gray">' . $_SESSION['username'] . 
              ' 離開聊天室</span><br>';
    addMsg($byeMsg);       // 新增訊息 
  }
  session_destroy();       // 清除 session 變數  
  
  $response = new xajaxResponse();  
  $response->redirect('EnterRoom.php');  // 將使用者轉回登入網頁
  return $response;
}
?>
<!DOCTYPE html>
<html>
<head>
  <title>PHP 聊天室</title>
  <meta charset="UTF-8">
  <?php $xajax->printJavascript();  ?>
  <script>
    var readTimer;  // 儲存定時器
	// 定時呼叫 xajax_read() 的函式
    function startRead() {
      xajax_read();
      readTimer=setTimeout('startRead()', 3000); // 3 秒後再呼叫自己
    } 
    
	// 檢查是否支援 HTML5 input type="color"
	function check_input_color(){
	  var i = document.getElementById("bgcolorselect");
      // 有支援 HTML5 color 輸入欄位
	  if (i.type == "color") {
	    i.onchange = function () {    // 設定『當使用者變更色彩』時, 
		  document.body.style.background=i.value;  // 即改變背景顏色
		}
	  }
	  // 不支援 HTML5 color 輸入欄位
	  else{    // 移除 HTML5 color 輸入欄位相關標籤
	    var span=document.getElementById("bgcolor");
		span.parentNode.removeChild(span);
	  }
	}
	
    // 檢查是否輸入空白訊息
    function check()	{
      // 取得代表訊息區的物件
      msg = document.getElementById('usermsg');

if(msg.value == "")	{ // 若為空白訊息 
	      alert("未輸入訊息");// 提示使用者
      } 
      else {                // 非空白訊息才送出
        xajax_send(xajax.getFormValues('bottom')); 
                            // 以 bottom 表單欄位的陣列為參數
		clearTimeout(readTimer);
		startRead();        // 重新設定定時讀取  
        msg.value = "";     // 將訊息區內容設為空白
        msg.focus();        // 將游標移至訊息區         
      }
    }
    
    // 將訊息區捲動至最下方 
    function scrollDiv() {
      var objDiv = document.getElementById("allmsg");
      if (!document.getElementById("noscroll").checked)
        objDiv.scrollTop = objDiv.scrollHeight;      
    }
  </script>
  <link rel="stylesheet" type="text/css" href="chatstyle.css">
</head>

<body onload="startRead();check_input_color();" onunload="xajax_bye();">
<p class="logo">PHP聊天室</p>
  <div style="height:255px">
    <div id="allmsg"></div>
    <div id="userlist"></div>
  </div>
  <hr style="clear:both">
  <form id="bottom" onsubmit="check();return false;">
    <input type="text" id="usermsg" name="usermsg" cols="75">
    <select id="colorselect" name="colorselect">
      <option value="black"  style="color:black" selected>黑</option>
      <option value="red"    style="color:red">紅</option>
      <option value="green"  style="color:green">綠</option>
      <option value="blue"   style="color:blue">藍</option>
      <option value="fuchsia" style="color:fuchsia">粉紅</option>
      <option value="gray"   style="color:gray">灰</option>
      <option value="maroon" style="color:maroon">褐</option>
      <option value="navy"   style="color:navy">海藍</option>
      <option value="olive"  style="color:olive">橄欖</option>
      <option value="purple" style="color:purple">紫</option>
      <option value="silver" style="color:silver">銀</option>
      <option value="teal"   style="color:teal">藍綠</option>
      <option value="yellow" style="color:yellow">黃</option>
    </select>
	<input type="submit" value="送出">
    </form>
	<button type="button" onClick="xajax_bye();">離開</button><br>
	<input type="checkbox" id="noscroll" name="noscroll">暫停捲動
	<span id="bgcolor">&nbsp;更換背景顏色：
	  <input type="color" id="bgcolorselect">
	</span>
</body>
</html>
```

修改

alex9453 iT邦新手 2 級 ‧ 2019-04-17 17:14:48 檢舉

chat.inc 如下 , 這樣問會比較細嗎 ?

<?php
require_once ("../xajax_core/xajax.inc.php"); // 引用 xajax 類別
date_default_timezone_set('Asia/Taipei');

// 以常數定義聊天名單檔名及聊天室人數上限
define('MAX_USER',10);           // 設定最多可 10 人進入聊天室
define('USER_LIST', 'userlist'); // 儲存聊天名單的檔案
define('CHAT_FILE', 'chatmsg');  // 儲存聊天內容的檔案
define('ENTRY_MAX',50);          // 設定最多存 50 筆訊息

?>

alex9453 iT邦新手 2 級 ‧ 2019-04-17 17:20:53 檢舉

還有一個 css
chatstyle

body {background-color:HoneyDew}
div {height:240px;
    margin:0px 5px;
	float:left}
.sys_msg {color:red}
.usr_msg{font-size:x-large}
.logo {	border: 8px ridge blue;
		width:480px;	
		color:indianred;
		font: bold 2em "Comic Sans MS";			
		text-align:center; 	}
.nick{font-style: italic } 
#allmsg {width:480px;
        overflow:auto;
		border:2px solid pink;}
#userlist {width:120px;
           overflow:auto;
		   border:2px solid pink;}

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2019-04-17 17:21:15 檢舉

不會。下一位

alex9453 iT邦新手 2 級 ‧ 2019-04-17 17:25:26 檢舉

還有 images 下有 4 個檔

逢摸必爆MIS iT邦研究生 3 級 ‧ 2019-04-18 09:48:23 檢舉

... 直接丟整篇程式碼上來之前
還是整理一下自己看不懂的地方吧
這樣別人比較有意願也比較可以以最快的時間來協助你

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2019-04-18 10:46:50 檢舉

他就是全部看不懂才會整篇上來的

code iT邦新手 5 級 ‧ 2019-04-19 14:09:40 檢舉

他說他傳統檔案看得懂阿...呵呵

登入發表回應

froce

iT邦大師 1 級 ‧ 2019-04-17 22:05:12

要如何建置喔？外包就行了。
這絕對是最佳解答...

回應 3
分享
檢舉

Sam-物理拳頭系工程師(五段) iT邦高手 9 級 ‧ 2019-04-17 23:18:16 檢舉

你為什麼講話要這麼中肯啦………

froce iT邦大師 1 級 ‧ 2019-04-18 08:21:16 檢舉

沒辦法，某A老愛問一些只能GIGO的問題。

棉花 iT邦新手 4 級 ‧ 2019-04-18 09:54:20 檢舉

外包只要出一張嘴省時省力又簡單

登入發表回應

淺水員

iT邦大師 6 級 ‧ 2019-04-18 15:06:13

細節還是要先去了解一下 laravel 的文件了
下面只是一個大方向

先把自己的程式整理出下面這些東西

view：就是前端的內容
route：這邊要整理好你想要呼叫的API跟參數
controller：由 route 呼叫，API真正處理的事情

這些與程式碼怎麼寫關係不大
但是比程式細節重要許多
(可以邊看文件邊實作了解這一些東西)

其他

你的程式碼只有簡單的讀寫文件，如果只是要處理這篇的內容 database 那些就可以省略了
注意一下哪些 API 需要登入會員，可以透過 middware 過濾請求

回應 6
分享
檢舉

看更多先前的回應...收起先前的回應...

Sam-物理拳頭系工程師(五段) iT邦高手 9 級 ‧ 2019-04-18 15:43:55 檢舉

我認為，他如果沒有接受過物件導向程式設計訓練。
甚至連最根本的程式設計訓練都不肯好好接受的話。
那麼東拼西湊根本不可能生的出東西來。

不然就直接問一個Laravel現在算是很基本的問題：
IoC/DI的實現模式。
我相信只要有好好看操作說明，一定會知道這是什麼東西或是在做什麼。

咱不談Laravel好了。
請他用oop寫一個留言板我都不知道他想花多少時間才能幹出這種東西來。

我只是覺得……他一直都在浪費時間不斷的重覆「無意義」的事情以及「無意義」的發問。

因為很基本的基本功………都不願意好好的扎下基礎。

我才不會管他幾歲，就算他是90歲的老人家想學寫程式就必須「受虐」。
辦不到就請不要踏進這個行業。會死。

alex9453 iT邦新手 2 級 ‧ 2019-04-19 10:30:02 檢舉

謝謝淺水員的分析 , 也謝謝可樂快跑指教 , 還是你覺得我去補習班上課 , 會比較好 , 但我之前去補習班上課 , 老師講很多專有名詞 , 我只聽得懂 2/3 , 就算錄音下來 , 因為口音的關系 , 也不好查出他是講什麼 , 試聽的時候 , 是派最受歡迎的老師來講 , 但他只是 5 個老師的其中一個 , 他的課都客滿 , 其他人的課學生都不多, 下面這篇講解蠻詳細的 https://docs.google.com/document/d/1x9ytUJEpNYhIxrJAezHmBwevro_6fe5hZp1kQ3HwIRU/edit
但講得很雜 , 如果能夠針對製作一個專案來講 , 會比較好 , 還是有其他方法比較好

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2019-04-19 10:45:15 檢舉

我覺得問題的重點不在於你上什麼課，找什麼名師。
只要你不去改變你的跳胣思維跟直接想飛的想法。
你永遠是學不會的。

因為你現在找的看的，都是屬於中高階級能力的人在看的東西。
都是需要有底子的。
但你從之前一直到現在看起來好像是在問很高階的問題，但偏偏其實都是基礎學會的東西。

你知道你最大的問題在哪嗎??
你可以把「1+1=2」的東西，說成了超複雜的問題，超高階的問題。
然後讓我看到你的問題就很哭笑不得。
但這也是讓我知道你的基礎可以說是完全不夠的。已經是接近0的地步。
但就如之前原本需要請你先學會基礎的因素。

寫程式，除了努力之外，也很講究天分的。
沒天分的人，還可以靠時間跟努力。
但努力的地方錯誤，也等於是沒努力。

簡單來說。就如你後面po的html聊天室的程式碼。
你有辦法去解釋這之間的應用、post?form?ajax?.....
我相信你一定不會解釋。要不然你並不會直接丟一個你找到的範例檔來想要改。你也一定沒有view跟model的觀念。

但說真的，你現在學這些還太早。因為你現在要看要學的東西。一切都是建立在物件的基礎上面。你連物件的基礎都不了解的情況下。
你說你會Laravel??沒人會相信
你只是會照用照操作。但你一定不會用。一個不會用的東西，又要外掛其它東西進來怎麼可能呢??

alex9453 iT邦新手 2 級 ‧ 2019-04-19 12:45:08 檢舉

浩瀚星空謝謝詳細指點 , 所以我還是先不要碰 laravel , 先從基本的開始學 , 這個教學如何 , https://www.csie.sju.edu.tw/cm/course/phpteach.htm
2013 年上傳的會不會太舊

code iT邦新手 5 級 ‧ 2019-04-19 14:15:46 檢舉

我是覺得你可以直接動手下去做，PHP在建置上應該沒什麼難度...XAMPP下去，直接VSCode編輯完丟到htdocs裡面，立馬可以跑..
間單做個自我介紹，再來進階一點CRUD，再來玩玩高階一點的，比較有概念再去玩框架，不過laravel的框架不太好入門，建議你緩緩

淺水員 iT邦大師 6 級 ‧ 2019-04-19 15:07:07 檢舉

如果想練功又不知道要練甚麼的話：

上面寫的程式碼可以先拿掉 xajax 也先不要用任何框架或是外面的函式庫，自己處理所有請求。
改寫成前後端分離的模式，為了明確區分，前端的網頁副檔名是 .html ，這只是為了禁止自己用 php 的東西（實際上前後端分離有部分內容還是可以用PHP輸出內容，這邊只是強制練習）
上面都做到之後，看看哪些東西可以抽出來做成 class ，以方便未來使用。

前 2 點是基礎。從第 3 點開始，就要開始思考哪些東西可以封裝起來，慢慢進入架構了。可以先做到1跟2再來考慮3吧。

登入發表回應