本文共 2807 字，大约阅读时间需要 9 分钟。
.io在线聊天室由发表在
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在这里下载安装即可：
- 文本编辑器可以是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.jsvar 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：
-
-
What's your nickname?
可以看到这个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便可以！
至此，一个简单的聊天应用已经可以完工啦！我们能做的还有很多，比如用户正在输入、用户离开了聊天室，聊天室人数统计等等。这些在参考代码中已经有了完整的实现！请戳！
更多文章请访问
