2017-04-21_12-15-17.png
npm init
chat/package.json//谢谢 [Symbian米汤] 的提醒，写错了！！！
{
"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模块并绑定到服务器
var io = require('socket.io').listen(server);
//指定静态HTML文件位置
app.use('/',express.static(__dirname+'/www'));
server.listen(82);
//socket
io.on('connection',function(socket){
//接收并处理客户端发送的connect事件
socket.on('connect',function(data){
//将消息输出到控制台
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"> 首页</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> 基本设置</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">爱丽丝</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>
为什么您的名字有三个金呢？
</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> 标签</a></li>
<li class="col-xs-4"><a href="#"><span class="glyphicon glyphicon-comment"></span> 回复</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="请输入消息...">
<span class="input-group-btn">
<button class="btn btn-default" id="send">发送</button>
</span>
</div>
</div>
</div>
</div>
</div>
<script>
/*
//与服务器建立连接
var socket = io.connect();
$('#send').on('click',function(){
var msgVal = $('#msg').val();
socket.emit('foo',msgVal);//发送名为foo事件并传递字符串
});
*/
//定义chat类
var Chat = function(){
this.socket = null;
};
//向原型添加业务方法
Chat.prototype = {
//初始化程序
init:function(){
var that = this;
//建立到服务器的socket连接
this.socket = io.connect();
//监听socket的connect事件，此事件表示连接已建立。
this.socket.on('connect',function(){
//连接到服务器后显示昵称输入框
console.log('xxxxxxx');
});
}
};
window.onload = function(){
//实例并初始化
var chat = new Chat();
chat.init();
}
</script>
</body>
</html>
