2017-04-21_12-15-17.png
npm init
chat/package.json//謝謝 [Symbian米湯] 的提醒，寫(xiě)錯(cuò)了Ｊ侠獭１檀稀！
{
"name": "chat",
"version": "1.0.0",
"description": "my chat",
"main": "index.js",
"dependencies": {
"express":"latest",
"socket.io":"latest"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"chat"
],
"author": "junchow",
"license": "ISC"
}
npm install
chat/server.js
//加載express模塊
var express = require('express');
var app = express();
var server = require('http').createServer(app);
//加載socket.io模塊并綁定到服務(wù)器
var io = require('socket.io').listen(server);
//指定靜態(tài)HTML文件位置
app.use('/',express.static(__dirname+'/www'));
server.listen(82);
//socket
io.on('connection',function(socket){
//接收并處理客戶端發(fā)送的connect事件
socket.on('connect',function(data){
//將消息輸出到控制臺(tái)
console.log(data);
});
})
chat/www/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>chat</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<link rel="stylesheet" href="css/jquery.mobile.flatui.css"/>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile.js"></script>
<script src="https://cdn.bootcss.com/socket.io/1.7.3/socket.io.js"></script>
</head>
<body>
<div data-role="page">
<div class="header linear-g" data-role="header">
<a href="#panel-left" class="col-xs-2 glyphicon glyphicon-th-large text-right"></a>
<a class="col-xs-8 text-center">我的聊天室</a>
<a href="#panel-right" class="col-xs-2 glyphicon glyphicon-user text-left" data-iconpos="notext"></a>
</div>
<div id="panel-left" class="list-group shortcut_menu dn linear-g" data-role="panel" data-position="left" data-display="push">
<a href="#" class="list-group-item"><span class="glyphicon glyphicon-home"> 首頁(yè)</span></a>
<a href="#" class="list-group-item"><span class="glyphicon glyphicon-edit"> 編輯</span></a>
<a href="#" class="list-group-item"><span class="glyphicon glyphicon-list"> 列表</span></a>
</div>
<div id="panel-right" class="user_box text-center dn linear-g" data-role="panel" data-position="right" data-display="push">
<div class="u_info">
<span class="username">Junchow</span>
</div>
<div class="user_menu">
<li class="menu"><a href="#"><span class="glyphicon glyphicon-cog"></span> 基本設(shè)置</a></li>
<li class="menu"><a href="#"><span class="glyphicon glyphicon-lock"></span> 修改密碼</a></li>
<li class="menu"><a href="#"><span class="glyphicon glyphicon-picture"></span> 修改頭像</a></li>
<li class="menu"><a href="#"><span class="glyphicon glyphicon-off"></span> 安全退出</a></li>
</div>
</div>
<div class="container" role="main" data-role="content">
<ul class="content-reply-box mg10">
<li class="odd">
<a href="#" class="user">
<span class="user-name">愛(ài)麗絲</span>
</a>
<div class="reply-content-box">
<span class="reply-time">2017-03-08 12:00</span>
<div class="reply-content pr">
<span class="arrow"></span>
為什么您的名字有三個(gè)金呢液茎？
</div>
</div>
</li>
<li class="even">
<a href="#" class="user">
<span class="user-name">本</span>
</a>
<div class="reply-content-box">
<span class="reply-time">2017-04-15 13:20</span>
<div class="reply-content pr">
<span class="arrow"></span>
命里缺水逞姿，取名為深。
</div>
</div>
</li>
</ul>
<!--
<ul class="operating row text-center linear-g">
<li class="col-xs-4"><a href="#"><span class="glyphicon glyphicon-tag"></span> 標(biāo)簽</a></li>
<li class="col-xs-4"><a href="#"><span class="glyphicon glyphicon-comment"></span> 回復(fù)</a></li>
<li class="col-xs-4"><a href="#"><span class="glyphicon glyphicon-heart"></span> 喜歡</a></li>
</ul>
-->
<div class="row">
<div class="col-xs-12">
<div class="input-group">
<input type="text" id="msg" class="form-control" placeholder="請(qǐng)輸入消息...">
<span class="input-group-btn">
<button class="btn btn-default" id="send">發(fā)送</button>
</span>
</div>
</div>
</div>
</div>
</div>
<script>
/*
//與服務(wù)器建立連接
var socket = io.connect();
$('#send').on('click',function(){
var msgVal = $('#msg').val();
socket.emit('foo',msgVal);//發(fā)送名為foo事件并傳遞字符串
});
*/
//定義chat類
var Chat = function(){
this.socket = null;
};
//向原型添加業(yè)務(wù)方法
Chat.prototype = {
//初始化程序
init:function(){
var that = this;
//建立到服務(wù)器的socket連接
this.socket = io.connect();
//監(jiān)聽(tīng)socket的connect事件捆等，此事件表示連接已建立滞造。
this.socket.on('connect',function(){
//連接到服務(wù)器后顯示昵稱輸入框
console.log('xxxxxxx');
});
}
};
window.onload = function(){
//實(shí)例并初始化
var chat = new Chat();
chat.init();
}
</script>
</body>
</html>
