socket.io在线聊天室
socket.io在线聊天室由David发表在天码营
socket.io是一个JavaScript库，用来建立实时的Web App。socket.io可以通过npm安装到Node.js的应用中，同时浏览器和服务器拥有同样的API接口。
你还在思考socket.io是如何做到实时推送的么？它会利用HTML5的新特性websocket协议与服务器建立TCP连接，对于不支持websocket的浏览器使用Polling作为Fallback。
效果图
废话少说，我们来做一个简单的聊天室吧！先看图：
打开浏览器后，我们输入一个昵称来继续：
此后便可以开始聊天啦：
准备工作
你需要安装Node.js，需要一个文本编辑器。
Node.js是一个JavaScript的运行时。就是通过它我们可以在服务器端运行JavaScript代码~
- Node.js在这里下载安装即可： http://nodejs.org
- 文本编辑器可以是UltraEdit、Editplus、Visual Studio、XCode、Ellipse、Webstorm等等。你喜欢就好，如果你还没有选好，我推荐Webstorm或者Vim！
项目框架
首先，你需要创建一个项目。项目就是包含你需要的文件的一个目录！所以就是先创建一个目录，比如叫chatroom。
然后，安装我们需要的工具。进入chatroom/目录，然后安装socket.io和express：
npm install -S socket.io express
这时，你应该已经拥有node_modules目录了，它里面安装了上述两个工具。然后创建这样一些文件和目录：
├── index.js
├── node_modules
└── public
├── index.html
└── main.js
public目录下的两个文件是给浏览器用的，而index.js是我们的服务器。如果你还不知道这些文件里写些什么，那么留空就好。
静态页面
socket.io的服务器代码只包含一个文件index.js。首先来写一个静态文件的服务器，这样用户从浏览器访问时可以拿到一个HTML（index.html）。
// file: index.js
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
var server = require('http').createServer(app);
server.listen(3000, function () {
console.log('Server listening at port %d', 3000);
});
上述代码中，首先引入了express.js（这是一个简单的Web服务器），然后让它来serve public下的静态文件。然后用http模块创建一个服务器，并监听3000端口。为了看到效果，现在来编写一个index.html：
<html>
<head><meta charset="UTF-8"></head>
<body>
<ul class="pages">
<li class="chat page">
<div class="chatArea">
<ul class="messages"></ul>
</div>
<input class="inputMessage" placeholder="Type here..."/>
</li>
<li class="login page">
<div class="form">
<h3 class="title">What's your nickname?</h3>
<input class="usernameInput" type="text" maxlength="14" />
</div>
</li>
</ul>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/main.js"></script>
</body>
</html>
可以看到这个HTML中写了两个页面.login.page和.chat.page，我们会在main.js中合适地显示其中一个，并隐藏另外一个。同时引入了jquery、socket.io和main.js（你的main.js现在应该是空的）。
然后运行node index.js，在浏览器中打开localhost:3000，你应该能看到这样的页面：
看到这里你也许想说页面太丑了吧！说好的聊天室呢？页面丑当然是因为没有样式啦，自行编写！或者直接从本文右上角的“参考代码”中拷贝~
socket.io服务器
上面的server是用app来初始化的，同时我们希望这个server可以响应推送信息，只需要用它创建一个socket.io对象：
var io = require('socket.io')(server);
然后，当有浏览器连接到socket.io时，监听浏览器的两个请求：
- 加入聊天，此时应该给一个用户名作为参数。我们把这个用户名绑定到当前连接的socket上。
- 发送消息，此时应该给一个消息内容。我们从当前socket上拿出用户名，与消息内容一同广播给所有人。
io.on('connection', function (socket) {
// 请求名称叫 add user
socket.on('add user', function (username) {
socket.username = username;
});
// 请求名称叫 new message
socket.on('new message', function (data) {
// 发送给客户端的广播也叫 new message
socket.broadcast.emit('new message', {
username: socket.username,
message: data
});
});
});
这么简单！真的可以用吗？相信我！
你要相信Node.js和socket.io都是追求极致简单的。
socket.io客户端
上面的服务器监听了两个请求，我们现在需要在客户端中发送这两个请求~ 当然是编写main.js，还记得吗？main.js已经被引入到了index.html中！
// file: main.js
$(function(){
var socket = io();
// 接收`new message`广播
socket.on('new message', function (data) {
addChatMessage(data);
});
// 发送消息的函数
function sendMessage (str) {
socket.emit('new message', str);
}
}
});
- 你需要自己实现
addChatMessage函数来处理新消息广播，data就是别人发的信息文本字符串~ - 你需要发送消息（比如用户按下回车）时，调用
sendMessage便可以！
至此，一个简单的聊天应用已经可以完工啦！我们能做的还有很多，比如用户正在输入、用户离开了聊天室，聊天室人数统计等等。这些在参考代码中已经有了完整的实现！请戳此处《参考代码》！
更多文章请访问天码营网站
