第十二天 长连接(net和socket.io)

1. Node.js Net 模块(终端交互)

Node.js Net 模块提供了一些用于底层的网络通信的小工具，包含了创建服务器/客户端的方法,我们可以通过以下方式引入该模块：

    var net = require("net")

实例
创建 server.js 文件，代码如下所示：

var net = require('net');
var server = net.createServer(function(connection) { 
   console.log('client connected');
   connection.on('end', function() {
      console.log('客户端关闭连接');
   });
   connection.write('Hello World!\r\n');
   connection.pipe(connection);
});
server.listen(8080, function() { 
  console.log('server is listening');
});

执行以上服务端代码：

$ node server.js
server is listening   # 服务已创建并监听 8080 端口

新开一个窗口，创建 client.js 文件，代码如下所示：

var net = require('net');
var client = net.connect({port: 8080}, function() {
   console.log('连接到服务器！');  
});
client.on('data', function(data) {
   console.log(data.toString());
   client.end();
});
client.on('end', function() { 
   console.log('断开与服务器的连接');
});

执行以上客户端的代码：

连接到服务器！
Hello World!

断开与服务器的连接

---

2. WebSocket

谈到Web实时推送，就不得不说WebSocket。在WebSocket出现之前，很多网站为了实现实时推送技术，通常采用的方案是轮询 (Polling)和Comet技术，Comet又可细分为两种实现方式，一种是长轮询机制，一种称为流技术，这两种方式实际上是对轮询技术的改进，这些 方案带来很明显的缺点，需要由浏览器对服务器发出HTTP request，大量消耗服务器带宽和资源。面对这种状况，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽并实现真正意义上的实 时推送。

WebSocket协议本质上是一个基于TCP的协议，它由通信协议和编程API组成，WebSocket能够在浏览器和服务器之间建立双向连接， 以基于事件的方式，赋予浏览器实时通信能力。既然是双向通信，就意味着服务器端和客户端可以同时发送并响应请求，而不再像HTTP的请求和响应。

socket.io模块实现WebSocket(web实时交互)

Socket.IO是一个开源的WebSocket库，它通过Node.js实现WebSocket服务端，同时也提供客户端JS库。Socket.IO支持以事件为基础的实时双向通讯，它可以工作在任何平台、浏览器或移动设备。

Socket.IO支持4种协议：WebSocket、htmlfile、xhr-polling、jsonp-polling，它会自动根据浏览 器选择适合的通讯方式，从而让开发者可以聚焦到功能的实现而不是平台的兼容性，同时Socket.IO具有不错的稳定性和性能。

搭建WebSocket服务端

• 先进入到你的工作目录,新建一个名为 package.json的文件，内容如下：

  {
    "name": "realtime-server",
    "version": "0.0.1",
    "description": "my first realtime server",
    "dependencies": {}
  }
  

• 接下来使用npm命令安装express和socket.io

  npm install --save express
  npm install --save socket.io
  

• 接下来可以开始编写服务端的代码了，新建一个文件：index.js

  var app = require('express')();
  var http = require('http').Server(app);
  var io = require('socket.io')(http);
  
  app.get('/', function(req, res){
      res.send('<h1>Welcome Realtime Server</h1>');
  });
  
  //在线用户
  var onlineUsers = {};
  //当前在线人数
  var onlineCount = 0;
  
  io.on('connection', function(socket){
      console.log('a user connected');
      
      //监听新用户加入
      socket.on('login', function(obj){
          ...
          
          //向所有客户端广播用户加入
          io.emit('login', {onlineUsers:onlineUsers, onlineCount:onlineCount, user:obj});
          console.log(obj.username+'加入了聊天室');
      });
      
      //监听用户退出
      socket.on('disconnect', function(){
          //将退出的用户从在线列表中删除
          if(onlineUsers.hasOwnProperty(socket.name)) {
              ...
              
              //向所有客户端广播用户退出
              io.emit('logout', {onlineUsers:onlineUsers, onlineCount:onlineCount, user:obj});
              console.log(obj.username+'退出了聊天室');
          }
      });
      
      //监听用户发布聊天内容
      socket.on('message', function(obj){
          //向所有客户端广播发布的消息
          io.emit('message', obj);
          console.log(obj.username+'说：'+obj.content);
      });
    
  });
  
  http.listen(3000, function(){
      console.log('listening on *:3000');
  });
  

  命令行运行node index.js，如果一切顺利，你应该会看到返回的listening on *:3000字样，这说明服务已经成功搭建了。此时浏览器中打开http://localhost:3000应该可以看到正常的欢迎页面。

• 客户端，创建html代码

  引入socket.io.js文件
  编写客户端连接服务器的js代码
  部分代码如下：

  //连接websocket后端服务器
  this.socket = io.connect('ws://172.16.0.254:3000');
  
  //告诉服务器端有用户登录
  this.socket.emit('login', {userid:this.userid, username:this.username});
  
  //监听新用户登录
  this.socket.on('login', function(o){
      console.log(o);
      //处理
      ...
  });
  
  //监听用户退出
  this.socket.on('logout', function(o){
      console.log(o);
      //处理
      ...
  });
  
  //监听消息发送
  this.socket.on('message', function(obj){
      console.log(obj);
      //处理消息
      ...
  });