标签：
Socket 英文原意是插座。
在网络世界里，
当一台主机温柔而体贴的同时提供多个服务时，
每个服务被绑定在一个端口上，
而每个端口就好像一个小插座。
用户们连接对应的插座去获取相应的服务。
在Node.js中，使用的是socket.io来实现Realtime的通信。
当程序两端实现数据通信时，
每一端便化身为一枚可爱的Socket了。
本示例使用Express做框架，
数据库使用Mongo（后面附带常用查询语句），
渲染引擎使用Jade。
1. 安装 dependencies：
在package.json文件里，指定所需依赖。
除了body-parser，cookie-parser，debug，serve-favicon之类常用依赖之外，
需安装的还有但不限于：
express，jade，mongo-client，mongodb，monk，
morgan，mpromise，mongoose，mongoskin……
By the way，由于实时通信是面向多用户，
如果你想给每个用户设置唯一的头像和Email，
可以考虑使用gravatar，本例为方便叙述，不讲gravatar了。
当然还有本篇的主角大人：socket.io
然后就可以妥妥的sudo npm install了。
2. 配置主程序 app.js
你也可以叫它index.js或者server.js，
总之它是程序启动的入口程序。
首先仍然是require所需的模块们：
var express = require(‘express‘);
var app = express();
var sio = require(‘socket.io‘);
指定端口：
var port = process.env.PORT || 8081;
然后是socket的监听：
var io = sio.listen( app.listen(port) );
3. 引入数据库
还是在app.js里继续写。
要使用数据库，必须先引入数据库模块。
var mongo = require(‘mongodb‘);
var monk = require(‘monk‘);
看到monk总想到和尚……
这里就把它理解为连接Mongo的一个小中间件。
在此不深究。
有了monk模块，就可以连接数据库了：
var db = monk(‘127.0.0.1:27017/myRealtimeApp‘);
其中27017是Monk默认指定的端口，后面是数据库名。
使用数据库之前，还需要将数据库传递给app：
app.use(function( req, res, next ){
req.db = db;
next();
});
其中的next即是执行此段代码后面紧跟着的程序。
为了方便维护，我把config的内容和routes规则写在另外的JS文件里。
因此在next后面要引入这两个模块：
require(‘./config‘)(app, io);
require(‘./routes‘)(app, io);
把app和io当作参数传递到模块里供继续使用。
至此，app.js基本完成了。
4. 配置config文件模块
在config里基本就是bodyParser、cookieParser、Path、favicon以及视图引擎的配置了。
不解释了，代码如下：
var express = require(‘express‘);
var cookieParser = require(‘cookie-parser‘);
var bodyParser = require(‘body-parser‘);
var path = require(‘path‘);
var favicon = require(‘serve-favicon‘);
module.exports = function(app, io){
app.use(favicon(path.join(__dirname, ‘public‘, ‘favicon.ico‘)));
app.use(cookieParser());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.set(‘views‘, __dirname + ‘/views‘);
app.set(‘view engine‘, ‘jade‘);
app.use(express.static(__dirname + ‘/public‘));
};
5. 基本的路由规则
由于App很小，所以路由规则和服务端的业务逻辑我都写在了routes.js里。
如果程序更为复杂，最好能够分开写之。
routes.js里，先配置基本的几个路由：
app.get(‘/‘, function(req, res){
res.render(‘login‘, { // 对应的在views目录里要有login.jade页，并在页面里有变量title和desc
title: ‘Realtime App with socket.io‘,
desc: ‘Welcome, this is V2.0‘
});
});
补充说明，本例的逻辑是在首页直接显示登录，
你也可以不这样做，比如设计一个单独的首页，
而登录页采用‘/login‘。说明毕。
有登录页，就有注册页，GET ‘/reg‘与之类似，不赘述了。
在聊天页面，可以在URL上设置room的id，确保所有登录用户进入的是同一个room：
app.get("/chat/:id", function(req, res){
res.render("chat", { // 在views目录里对应要有chat.jade页面，并有变量title
title: ‘Whatever……‘
});
});
6. 注册登录与数据库的通信
注册和登录的POST方法，
是接收客户端的用户信息并需要与数据库产生数据交换的。
因此有必要详细说明一下：
首先是注册：
app.post( ‘/register‘, function(req, res){
var nickname = req.body.nickname;
var phone = req.body.phone;
var psw = req.body.password; // 从客户端获取用户名、电话、密码
var db = req.db;
var collection = db.get(‘usercollection‘); // Mongo里的collection可以理解为table
collection.insert({ //向表里插入一条用户数据
nickname: nickname,
phone: phone,
password: psw
}, function( err, doc ){ //写数据库后的回调，err有值表示读写失败
if(err) {
res.send(‘error‘);
}else{ // 没有err表示读写成功，即用户注册成功
var userInfo = {};
var _sessionID = req.sessionID;
userInfo[‘nickname‘] = doc.nickname;
userInfo[‘userphone‘] = doc.phone;
res.cookie( ‘webchat_nickname‘, doc.nickname );
res.cookie( ‘webchat_token‘, _sessionID );
res.cookie( ‘webchat_roomid‘, staticRoomId ); // 用Cookie存储用户信息不是唯一的方法
res.send( userInfo ); // 用户信息返回给客户端
}
});
});
需要注意的是：
接收POST请求后的返回，必须res.end或res.send（包含end），
否则在浏览器里的这个请求会一直pending。
再来就是登录：
app.post( ‘/login‘, function(req, res){
var phone = req.body.username;
var psw = req.body.password;
var db = req.db;
var collection = db.get(‘usercollection‘);
var result = collection.findOne( {phone: phone, password: psw}, function(err, doc){
if(!doc){
res.send("error");
}else{
var nickname = doc.nickname;
var userPhone = doc.phone;
var _sessionID = req.sessionID;
var userInfo = {};
userInfo[‘nickname‘] = nickname;
userInfo[‘userphone‘] = userPhone;
userInfo[‘roomId‘] = staticRoomId;
res.cookie( ‘webchat_nickname‘, nickname );
res.cookie( ‘webchat_token‘, _sessionID );
res.cookie( ‘webchat_roomid‘, staticRoomId );
res.send( userInfo );
}
});
});
有登录，就有登出，具体实现此不赘述。
只是登出时要记得清空Cookie。
7. 附加福利：Mongo的常用查询语句
先在本地安装Mongo，然后使用命令“mongo”进入Mongo。
进入后会先显示：
MongoDB shell version: 2.0.4
connecting to: test // 默认连接到了 test 数据库
常用语句如下：
a：查看所有数据库：show dbs
b：进入某一个数据库：use myRealtimeApp
c：查看当前数据库的所有表：show collections // Mongo里叫collection，我就理解为表……
d：查看各表状态：db.printCollectionStats() // 会列出所有表的状态
e：查询某个表的数据：db.usercollection.find() //这样输出的结果没有格式化
f： 查询某个表的数据：db.usercollection.find().pretty() //输出结果格式化了
g：用某个特定条件查询某个表的数据：db.usercollection.find({‘nickname‘: ‘Alex‘})
h：存储某条数据：db.foo.save({‘name‘: ‘aaa‘})
i：删除某条数据：db.foo.remove({‘name‘: ‘aaa‘}) 或 db.foo.remove()
j：删除某个表：db.mycollection.drop()
8. Socket的连接和事件的注册与触发
到这里才是真正重要的内容：
在服务端连接Socket，并注册load、login等事件的回调，供客户端触发时调用。
同时，也要在客户端连接Socket，并注册startChat、receive等事件的回调，供服务端触发时调用。
这有点像一张网，服务端和客户端分别注册了若干事件，供对方调用。
同时它们也在调用对方所注册的事件。
具体实现如下：
先在服务端连接Socket：
var chat = io.of("/socket").on("connection", function(socket){
// 在这个回调里去注册socket的 ‘load‘, ‘login‘, ‘disconnect‘, ‘msg‘ 等事件：
socket.on(‘load‘,function(data){
if( chat.clients(data).length === 0 ){ // 获取用户数量，但这个clients不能缓存，每次都必须用chat获取
socket.emit(‘peopleinchat‘, {number: 0}); // "peopleinchat"在客户端注册，这里触发之，并将人数传到客户端
} else if ( chat.clients(data).length === 1 ) { // 用户数量1个人
socket.emit(‘peopleinchat‘, {
number: 1,
user: chat.clients(data)[0].username, // 用户姓名传到客户端
id: data // room的id传到客户端
});
} else if ( chat.clients(data).length === 2 ) { // 用户数量2个人
socket.emit(‘peopleinchat‘, {
number: 2,
user: [chat.clients(data)[0].username, chat.clients(data)[1].username], // 两个人及以上，user是数组
id: data
});
} ...... else { // 可以设置一个最多人数的限制，超过时提示人数满员
socket.emit(‘peopleinchat‘, { state: ‘too many people here!‘ });
}
});
socket.on(‘login‘,function(data){
var maxPeopleLength = 10; // 自定义最大容纳人数
if( chat.clients(data.id).length < maxPeopleLength ){ //必须在人数限制内
socket.username = data.userName;
socket.room = data.id; // 这个必须有
socket.join(data.id); // join方法会使clients.length+1
if( chat.clients(data.id).length >= 2 ) { // 只有 >= 2个人时才会触发startChat
dealWithClients(data); // 每 login（增加）一个用户，要触发一次startChat并将用户数组传给客户端
}
// if length == 3 ... 不赘述了
}
});
// dealWithClients 方法定义如下：
function dealWithClients(data) {
var usernames = []; // 包含当前登录用户的一个数组
chat.clients(data.id).forEach(function(item, index){
usernames.push( item.username ); // 拿到所有用户，push到这个数组里
});
chat.in(data.id).emit(‘startChat‘, { // 只有 >= 2个人时才会触发startChat
check: true,
user: usernames, // 所有用户
number: usernames.length, // 人数
id: data.id // room 的 id
});
};
socket.on(‘msg‘,function(data){ // 这里注册发消息的事件（当客户端点击发送按钮时，触发之）
socket.broadcast.to(socket.room).emit(‘receive‘, { // 接收消息的注册是在客户端，这里触发之
msg: data.msg, // 消息内容
user: data.user, // 发消息的用户
time: new Date().getTime() // 发消息的时间，用服务器时间，返回给客户端供渲染
});
});
socket.on(‘disconnect‘,function(data){
// 失联后的回调，没写……
});
}); // End of connection
9. Socket在客户端的事件注册与接收
刚才说的都是在服务端的事件注册和触发。
对应的在客户端也会有相应的事件触发和注册。
下面的代码就是写在Browser客户端里的JS了：
首先要在页面里引用socket的包包：socket.io.js
然后在JS里获取socket对象并缓存：
var socket = io.connect(‘/socket‘);
从URL里获取room的id，如果用户手动修改URL，则需响应错误：
var RoomId = Number(window.location.pathname.match(/\/chat\/(\d+)$/)[1]);
从Cookie里获取登录后的自己的用户名：// 用于在页面中渲染时区分于其他用户
var me = $.cookie("_nickname"); // 这不是必需的
下面才是重头戏：
socket.on("connect", function(){
socket.emit("load", RoomId); // Connect成功后触发load事件
// 这里就会执行注册在服务端的 load 事件回调里的代码了。
});
socket.on(‘startChat‘, function( data ){ // 这里注册的就是startChat
renderUsers( data.number, data.user ); // 渲染当前登录的用户，渲染逻辑这里不贴了
});
socket.on("peopleinchat", function(data){ // 这里注册peopleinchat
var howManyPeople = data.number;
if( howManyPeople == 0 ){
makePopAlert(‘No one here...‘, 0, ‘Ok‘); // 调用自己写的一个带样式的弹窗组件
}else if( howManyPeople == 1 ){
renderUsers( 1, data.user ); // 渲染用户
}else if( howManyPeople == 2 ){
renderUsers( 2, data.user );
}else if( howManyPeople == 3 ){
renderUsers( 3, data.user );
}else{ ....
// Too many people
}
});
socket.on("receive", function(data){ // 监听收到消息后的处理
renderMsg(data); // 渲染消息的方法，自己定义，这里不贴了
});
至于发送消息，在页面里的[发送]按钮上绑定Click事件，
并触发 socket.emit(‘msg‘, msgData); // msgData根据服务端所需的各个属性自己组装
10. 小结
以上是使用Socket实现的最简单的实时通信流程。
基本思路就是在服务端和客户端分别引入Socket，
并按业务逻辑在不同方向监听事件，在对应方向触发之。
要完善实时通信的功能，还有很多可以继续写的。
这里不写了。。。
标签：
原文地址：http://www.cnblogs.com/alex1128/p/5336575.html
