最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

第二十六章-盤古開天(十四)-WEBSOCKET Client端(1)

XAMPP下载 admin 534浏览 0评论
 上一篇已經把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”>發送<tton>
</div>
</div>
</div>
</div>
</div>
</div>
頁面建立好後,下一個章節要開始講訊息送出的流程~大家下次見~~

转载请注明:XAMPP中文组官网 » 第二十六章-盤古開天(十四)-WEBSOCKET Client端(1)

您必须 登录 才能发表评论!