第9章-WebSocket、Socket.IO和DerbyJS的实时应用程序-9.2.Socket.IO和Express.js

大多数的实时Web应用程序中，服务器和客户端之间的通信发生在响应报文里，或者是对用户行为的响应，或者是从服务器获取数据更新的结果。

安装Socket.IO
$npm install socket.io@0.9.16 –save

package.json文件$npm install

{
  "name": "socket-express",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "express": "~4.0.0",
    "morgan": "~1.0.0",
    "cookie-parser": "~1.0.1",
    "body-parser": "~1.0.0",
    "debug": "~0.7.4",
    "jade": "~1.3.0",
    "socket.io": "0.9.16"
  }
}

在某种程度上，可以认为Socket.IO是另一个服务器，因为他处理的是socket连接，而不是标准的HTTP请求。

app.js文件
//1.导入依赖

var http = require('http');
var express = require('express');
var path = require('path');
var logger = require('morgan');
var bodyParser = require('body-parser');

//2.导入路由规则

var routes = require('./routes/index');

//3.创建服务器对象

var app = express();

// 4.设置视图引擎

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

//5.设置中间件

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);

//6.创建Socket.IO对象并实现监听端口建立连接

var server = http.createServer(app);
var io = require('socket.io').listen(server);

//7.Socket服务器的连接建立后，添加事件监听器

messageChange
io.sockets.on('connection', function (socket) {
  socket.on('messageChange', function (data) {
    console.log(data);
    socket.emit('receive', data.message.split('').reverse().join('') );//将字符串逆序
  });
});

//8.监听端口启动服务器

app.set('port', process.env.PORT || 3000);
server.listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

路由文件./routes/index

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
  res.render('index', { title: 'Socket.io + Express = <3' });
});

module.exports = router;

视图文件./views/layout.jade

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

视图文件./views/index.jade

extends layout

block content
  h1= title
  p Welcome to
    span.received-message #{title}
  input(type='text', class='message', placeholder='what is on your mind?', onkeyup='send(this)')
  script(src="/socket.io/socket.io.js")
  script.
    var socket = io.connect('http://localhost');
    socket.on('receive', function (message) {
      console.log('received %s', message);
      document.querySelector('.received-message').innerText = message;
    });
    var send = function(input) {
      console.log(input.value)
      var value = input.value;
      console.log('sending %s to server', value);
      socket.emit('messageChange', {message: value});
    }

默认情况下，WebSocket连接可以使用标准端口，HTTP用80，HTTPS用443