玩转NODE.JS（四）-搭建简单的聊天室的代码
Nodejs好久没有跟进了，最近想用它搞一个聊天室，然后便偶遇了socket.io这个东东，说是可以用它来简单的实现实时双向的基于事件的通讯机制。我便看了一些个教程使用它来搭建一个超级简单的聊天室。
初始化项目
在电脑里新建一个文件夹，叫做“chatroom”，然后使用npm进行初始化：
$npminit
然后根据提示以及相关信息一步一步输入，当然也可以一路回车下去，之后会在项目里生成一个package.json文件，里面的信息如下：
$catpackage.json
{
"name":"chatroom",
"version":"1.0.0",
"description":"aroomwhichletspeoplechat",
"main":"index.js",
"scripts":{
"test":"nothing"
},
"author":"voidy",
"license":"ISC",
}
这个文件描述了项目的相关信息。
安装socket.io
接下来，安装socket.io：
$npminstallsocket.io--save
安装Socket.IO的时候，--save参数用于保存模块依赖信息到package.json文件，安装完后，打开package.json文件会看到里面多了一项内容：
"dependencies":{
"socket.io":"^1.2.1"
}
同时Socket.IO安装在了node_modules文件夹下。
实现聊天-服务器端
首先我们来编写服务器端程序，新建文件“index.js”，在里面导入如下模块：
varhttp=require('http');
varsocketio=require('socket.io');
varfs=require('fs');
第一行是导入http模块，先前我们已经见过了，用于创建httpserver。
第二行是导入socket.io模块，实现实时聊天必备的，不再赘述。
第三行是导入fs模块，用于读取文件。具体的一会你就会了解到。
通过http模块创建app，在刚刚的代码中加入如下语句：
varapp=http.createServer(function(req,res){
fs.readFile(__dirname+'/index.html',function(err,data){
if(err){
res.writeHead(500);
returnres.end('Errorloadingindex.html');
}
res.writeHead(200);
res.write(data);
res.end();
});
}).listen(8888);
fs.readFile（）方法用于读取文件，在这里读取的是index.html文件，也就是一会即将要编写的前端聊天室的展示页面。
第8行是返回请求的状态码，第9行是返回读取到的内容给浏览器。然后这个httpserver使用listen方法监听8888端口。
接下来，就是使用socket.io来实现聊天的事件了。在刚刚的index.js文件的httpserver下面接着创建socket.io对象。
vario=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("Serverisrunningathttp://localhost:8888")
至此，服务器端编码完成。
实现聊天-客户端
首先实现界面部分，仅仅有显示消息记录以及消息发送框，代码如下：
<html>
<head>
<metacharset="utf-8">
<title>Socket.IOchat</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{font:13pxHelvetica,Arial;}
#form{background:#000;padding:3px;position:fixed;bottom:0;width:100%;}
#forminput{border:0;padding:10px;width:90%;margin-right:.5%;}
#formbutton{width:9%;background:rgb(130,224,255);border:none;padding:10px;}
#messages{list-style-type:none;margin:0;padding:0;}
#messagesli{padding:5px10px;}
#messagesli:nth-child(odd){background:#eee;}
</style>
<!--引入socket.io库和jQuery库-->
<scriptsrc="https://cdn.socket.io/socket.io-1.2.1.js"></script>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.js"></script>
</head>
<body>
<!--显示消息记录-->
<ulid="messages"></ul>
<!--消息发送框-->
<divid="form">
<inputid="m"autocomplete="off"/><buttonid="send">Send</button>
</div>
</body>
</html>
然后需要在里面加上JS来实现与服务器端的通信，将服务器端获取的数据展示到客户端，主要代码如下：
<script>
//连接到Socket.IO服务器
varsocket=io.connect();
$(function(){
//绑定发按钮发送消息的事件
$('#send').on('click',function(){
vardata=$('#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>
此时，可以执行：
$nodeindex.js
然后在浏览器打开localhost:8888查看效果。
至此，一个简陋的聊天室就实现了，有兴趣的朋友可以在此基础上进行扩展，实现功能更为复杂的聊天室。
项目源代码：源码下载
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。