---

最初的打算是对应着官网进行自己的学习和翻译，可是才使用socket.io官网开始的代码写出来demo，发现网站已改版。那么就按照新的官网进行学习了。

开始：聊天应用

这个教程中我们将会创建一个基本的聊天应用。由于它基本上不需要nodejs与socke.io的先前准备知识，因此这个教程能被各个水平段的用户看得懂。

介绍

使用传统的Web开发工具开发一款聊天应用时很困难的，比如LAMP(PHP)。困难之处在于轮询服务器的变化、跟踪时间戳，并且消息的发送接收比较慢。 Sockets是被认为最适合及时聊天系统的架构、在服务器与客户端之间进行双向通信的解决方案。 这意味着服务器可以主动推送消息到客户端。不论合适你发出聊天消息，服务器都能获知并且推送到其他在线的用户。

网站构架

第一步是创建用于消息与表单处理的服务器。服务端，我们将用nodejs的一个web框架express。开始之前，要确保nodejs已安装。

首先，创建一个名为‘chat-example’的空文件夹。在文件夹中创建‘package.json’的文件，用于描述我们的项目：

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

为了项目所依赖的模块比较容易填写在‘dependencies’，我们将使用‘npm install --save’的命令：

    npm install --save express  

现在‘express’已经安装，我们可以在根目录创建'index.js'文件来开始我们的项目创建：

    var app = require('express')();  
    var http = require('http').server(app);  
      
    app.get('/',function(req,res){  
        res.send('<\h1>Hello world');  
    });  
      
    http.listen(3000,function(){  
        console.log('listening on 3000');  
    });  

解释如下：

1，‘Express’初始化赋予变量‘app’作为方法应用于HTTP服务（第二行）； 2，定义一个路由方法‘/’用做我们访问网站首页的返回结果； 3，让http服务器监听3000端口。

服务端的HTML

到目前为止，在index.js中我们用‘res.send’方法传递HTML字符串。如果这样放整个应用的HTML的话，代码会显得杂乱。因此，我们创建一个‘index.html’文件来解决。

我们用‘sendfile’来重构路由：

    app.get('/',function(req,res){  
        res.sendfile('index.html');  
    });  

‘index.html’代码如下：

  
<\html>  
  <\head>  
    <\title>Socket.IO chat  
    <\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; }  
      
    
  <\body>  
    <\ul id="messages">  
    <\form action="">  
      <\input id="m" autocomplete="off" /><\button>Send  
      
    
  



### Socket.io综述


Socket.io由两部分组成：

1，一个整合或者在node.js HTTP架构的服务器：socket.io
2，一个用于浏览器加载的客服端的库:socket.io-client
在开发过程中，socket.io自动连接客户端，但是我们必须要安装socket.io的模块:

    npm install --save socket.io  


这样socket.io就会安装并且会在‘package.json’添加对它的依赖。改变‘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('index.html');  
});  
  
io.on('connection',function(socket){  
    console.log('a user connected');  
});  
  
http.listen(3000,function(){  
    console.log('listening on 3000');  
});  


我通过传递一个'http'对象初始化一个‘socket.io’的实例。然后我监听socket的‘connection’事件并且输出到面板。

在‘index.html’中增加下面的代码到‘</\body>’前：

      
      


这样页面将会加载到'socket.io-client'(暴漏‘io’给全局并连接)。
注意，当我调用'io()'的时候，我并没有制定任何URL，因为这样它将会默认的去尝试链接主机的首页。
每个socket将会有一个独特的‘disconnect’事件：

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


发射事件

Socket.io的核心是你能发射和接收任何事件，包括带数据的事件。任何对象可以被编码成JSON，二进制也是支持的。

让我们做下面的事情：用户输入信息，服务器通过‘chat message’得到它。‘index.html’中‘script’的js代码改为如下:
<\script src="/socket.io/socket.io.js"></\script>

    <\script src="jquery的CDN地址"></\script>

    <\script>

        var socket = io();

        $('form').submit(function(){

            socket.emit('chat message',$('#m').val());

            $('#m').val();

            return false;

        });

    </\script>



考虑到国内墙的环境，可以安装jquery模块或者引入本地jQuery.

index.js中‘socket’的代码如下：

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');  
});  


这样的情况下，我们可以发送信息给任何人包括自己：

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


在客户端，我们可以捕获chat message事件。整个客户端的代码js代码如下：
    var socket = io();

    $('form').submit(function(){

     <\span style="white-space:pre">   </\span>socket.emit('chat message',$('#m').val());

        $('#m').val('');

        return false;

      });

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

        $('#messages').append($('<\li>').text(msg));

      })



整个聊天应用只需要20行代码就实现了。

作业：

有几个想法可以改善这个聊天应用：

1,有人进入或者离开聊天室的时候通知所有的用户；

2，增加用户昵称；

3，增加‘用户正在输入’的功能；

4，显示在线用户；

5，增加私信；

6，分享你的改进。

你可以在github上得到这个示例的代码。