Socket.IO文档(1)

Get Started: Chat application

根据指南，我们来创建一个聊天应用。

Introduction

使用流行的技术栈（例如PHP）去写一个聊天应用传统意义上是比较难的。这样涉及到了服务器的轮询，跟踪时间戳，而且应该是比较慢的。
Socket解决了大多数的实时聊天方案，在客户端和服务端提供实时的双向通道。这就意味着服务端可以向客户端推送消息。当你发送一条消息，服务端可以获得然后推送到其他连接的客户端。

The web framework

第一步就是创建一个html页面，提供表单和消息列表。我们准备使用node的web框架express。首先创建package.json配置文件。

{
    "name" : "socket-chat-example",
    "version" : "0.0.1",
    "description" : "my first socket.io app",
    "dependencies" : {}
}

然后安装express:

npm install express --save-dev

express安装后，我们在当前目录下创建一个index.js文件设置我们的应用。

var app = require('express')()
var http = require('http').Server(app)

app.get('/', function(req, res) {
    res.send('<h1>hello world</h1>')
})

http.listen(3000, function() {
    console.log('listening on 3000')
})

如上：express初始化一个应用程序是可以提供给http服务的函数处理程序；我们定义了一个路由当我们进入主目录时被调用；我们创建了一个监听3000端口的http服务。
我们执行node index.js可以看到：

打开浏览器，输入http://localhost:3000可以看到：

Serving HTML

目前，我们准备在index.js文件中调用res.send()发送一个html字符串。如果我们把整个html字符串都放在里面，那样看起来会很混乱。那么，我们准备创建一个index.html文件，然后发送。

//这里我们通过sendFile这个方法
app.get('/', function(req, res){
    res.sendFile(__dirname + '/index.html');
});
``
创建index.html文件：

<!doctype html>
<html>
<head>

<title>Socket.IO chat</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { font: 13px Helvetica, Arial; }
  form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
  form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
  form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
  #messages { list-style-type: none; margin: 0; padding: 0; }
  #messages li { padding: 5px 10px; }
  #messages li:nth-child(odd) { background: #eee; }
</style>

</head>
<body>

<ul id="messages"></ul>
<form action="">
  <input id="m" autocomplete="off" /><button>Send</button>
</form>

</body>
</html>

然后重启服务，打开浏览器可以看到如下：

![clipboard.png](/img/bVXQoz)

##### **Integration Socket.IO**
Socke.IO有两部分组成：

服务端通过node模块socket.io集成
客户端通过socket.io-client库加载

在开发期间，socket.io会自动的服务客户端，所以目前我们只要安装该模块：

npm install socket.io --save-dev

然后重新修改index.js：

var app = require('express')()
var http = require('http').Server(app)
var io = require('socket.io')(http)

app.get('/', function(req, res) {

res.sendFile(__dirname + '/index.html')

})

io.on('connection', function(req, res) {

console.log('a user connected')

})

http.listen(3000, function() {

console.log('listening on 3000')

})

如上，可以看到传入http服务初始化一个socket.io实例，然后通过connection事件监听新连接。
然后再修改以下index.html文件，在</body>后插入以下代码：

如上就是加载socket.io-client的全部内容，它可以暴露一个全局的io，然后进行连接。

注意上面，当调用io()的时候并没有特别指定任何url， 因此它默试图连接到服务页面的主机。
如果你重新加载服务和网站，你可以看到控制台中打出"a user connected"，当你重新开几个网页的时候也可以看到控制台中打印出"a user connected"。
每一个socket还可以触发一个disconnect事件：

io.on('connection', function(socket){
console.log('a user connected');
socket.on('disconnect', function(){

console.log('user disconnected');

});
});

重新启动，然后打开链接后刷新，可以看到如下：

![clipboard.png](/img/bVXQIk)

##### **Emitting events**
Socket.IO背后的思想是你可以发送和接受任何你想要的事件，且伴随着你想要的数据。任何可以被编码成JSON的对象和二进制数据都可以。
接下来，当用户输入消息时，服务器通过一个chat message事件获得。修改页面脚本文件：

var socket = io();
$('form').submit(function(){
  socket.emit('chat message', $('#m').val());
  $('#m').val('');
  return false;
});

});
</script>

然后修改下index.js文件：

io.on('connection', function(socket){
socket.on('chat message', function(msg){

console.log('message: ' + msg);

});
});


##### **Broadcasting**
下一个目标就是将事件从服务器发送到其他用户。为了将使劲按发送给每个用户，Socket.IO提供给我们一个**io.emit：**

io.emit('some event', {for : "everyone"})

如果你想发送消息给每个用户除了当前用户。这里提供了一个**broadcast**：

io.on('connection', function(socket) {

socket.broadcast.emit('hi')

})

在这种情况下，为了简单起见我们将消息发送给每个人，包括发送者。