玩转Node.js（四）-搭建简单的聊天室

[b]玩转Node.js（四）-搭建简单的聊天室[/b]

　　Nodejs好久没有跟进了，最近想用它搞一个聊天室，然后便偶遇了socket.io这个东东，说是可以用它来简单的实现实时双向的基于事件的通讯机制。我便看了一些个教程使用它来搭建一个超级简单的聊天室。

[b]初始化项目[/b]

　　在电脑里新建一个文件夹，叫做“chatroom”，然后使用npm进行初始化：

$ npm init

　　然后根据提示以及相关信息一步一步输入，当然也可以一路回车下去，之后会在项目里生成一个package.json文件，里面的信息如下：

$ cat package.json
{
"name": "chatroom",
"version": "1.0.0",
"description": "a room which lets people chat",
"main": "index.js",
"scripts": {
"test": "nothing"
},
"author": "voidy",
"license": "ISC",
}

　　这个文件描述了项目的相关信息。

[b]安装socket.io[/b]

　　接下来，安装socket.io：

$ npm install socket.io --save

　　安装Socket.IO的时候，--save参数用于保存模块依赖信息到

package.json

文件，安装完后，打开

package.json

文件会看到里面多了一项内容：

"dependencies": {
"socket.io": "^1.2.1"
}

　　同时Socket.IO安装在了node_modules文件夹下。

[b]实现聊天-服务器端[/b]

　　首先我们来编写服务器端程序，新建文件“index.js”，在里面导入如下模块：

var http = require('http');
var socketio = require('socket.io');
var fs = require('fs');

　　第一行是导入http模块，先前我们已经见过了，用于创建http server。

　　第二行是导入socket.io模块，实现实时聊天必备的，不再赘述。

　　第三行是导入fs模块，用于读取文件。具体的一会你就会了解到。

　　通过http模块创建app，在刚刚的代码中加入如下语句：

var app = http.createServer(function(req, res) {

fs.readFile(__dirname + '/index.html', function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
}
res.writeHead(200);
res.write(data);
res.end();
});
}).listen(8888);

　　fs.readFile（）方法用于读取文件，在这里读取的是index.html文件，也就是一会即将要编写的前端聊天室的展示页面。

　　第8行是返回请求的状态码，第9行是返回读取到的内容给浏览器。然后这个http server使用listen方法监听8888端口。

　　接下来，就是使用socket.io来实现聊天的事件了。在刚刚的index.js文件的http server下面接着创建socket.io对象。

var io = socketio(app);

　　然后监听connection事件，当浏览器连接到此Socket.IO服务时触发该事件：

io.on('connection', function (socket) {
// 监听浏览器端的chat事件
socket.on('chat', function (data) {
console.log(data);
io.emit('sendmsg', data);
});
});

　　第4行用于将信息输入到后台的显示器，第5行用于将内容发送给客户端，为了知道服务器是否启动，我在后面又加了如下一句：

console.log("Server is running at http://localhost:8888")[/code] 
　　至此，服务器端编码完成。

[b]实现聊天-客户端[/b]

　　首先实现界面部分，仅仅有显示消息记录以及消息发送框，代码如下：

<script>
// 连接到Socket.IO服务器
var socket = io.connect();

$(function() {
// 绑定发按钮发送消息的事件
$('#send').on('click', function() {
var data = $('#m').val();
// 创建chat事件并发送消息给服务器
// emit('event') 表示发送了一个event命令
// 使用io.on('event')接收对应事件的信息
// 所以客户端服务器端需要使用socket.on('chat')接收聊天信息
socket.emit('chat', { msg: data });
$('#m').val('');
});
});

$(function() {
// 接收消息并显示到消息记录框中
socket.on('sendmsg', function(msg) {
$('#messages').append($('<li>').text(msg.msg));
});
});
</script>


View Code
　　此时，可以执行：

$ node index.js


　　然后在浏览器打开localhost:8888查看效果。

　　至此，一个简陋的聊天室就实现了，有兴趣的朋友可以在此基础上进行扩展，实现功能更为复杂的聊天室。

　　项目代码在github上：https://github.com/Voidly/chatroom。

PS:本博客欢迎转发，但请注明博客地址及作者，因本人水平有限，若有不对之处，欢迎指出，谢谢~

　　博客地址：http://www.cnblogs.com/voidy/

　　博客新址：http://voidy.net

　　<。)#)))≦