上一篇已經把Server端大部分的程式介紹完了,
再來就是Client的部份,
Client端的部份首先要先設計個頁面,
基本的先切割成四個區域,訊息輸入區、訊息顯示區、
在線使用者列表區(還可以設計更多功能,不過這裡就先不做其他功能)和MENU,
CSS的部份是用bootstrap的套件做的,
這裡就先不介紹bootstrap的部份,
MENU的部份目前只有登出功能：

#利用click來觸發logoutBt()的function,然後submit form到logout.php的頁面
<form method="POST" action="logout.php" id="outAccount" name="outAccount">
<a  class="btn btn-default btn-top " data-toggle="modal" data-target="#exampleModal" role="button" onClick="logoutBt()">登出</a>
</form>

<script>
function logoutBt(){
	document.getElementById('outAccount').submit();
}
</script>

然後要創建div的區域放在線使用者列表和訊息顯示區域以及訊息輸入區,
id="us"是在線使用者列表,
id="ct"是顯示訊息區,
id="nrong"是訊息輸入區,
us,ct目前裡面都是空的,之後有人連線進來或者要發送訊息,才會利用js把他的值append進去us和ct

<div class="container-fluid chat-content">
	<div class="row content">
		<div class="col-sm-3 sidenav hidden-xs chat-bar" >
			<ul class="nav nav-pills nav-stacked" id="us">
			</ul>
        </div>
        <div class="col-sm-9 well-border" >
			<div class="well well-bar" id="ct">
			</div>
			<div class="row">
				<div class="col-sm-12">
					<div class="form-group chat-typing">
						<textarea rows="3" id="nrong"></textarea>
						<button id="sd" type="button" class="btn btn-outline-primary">發送</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

頁面建立好後,下一個章節要開始講訊息送出的流程~大家下次見~~