第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