soket.io.js + angular.js + express.js(node.js)
今天搭建个soket.io.js + angular.js + express.js的环境， 采坑无数，特整理出来避免大家少走弯路。
采坑问题原因主要是因为各各.js不同的版本及调用方式引起的，上述几个流行的框架版本更新都很快，而网上google到的资料经常没有标注哪个版本，所以照着写不一定能解决你的问题，因此再搭建环境时要特别注意版本的兼容性及调用方式。
我的环境：
angularjs v1.0.6
express.js v3.4 (这里要注意 soket.io 对于express2.x 和 3.x的调用方式有差异)
soket.io v0.9.6
下面开始具体环境搭建demo， 建议搭建express前先熟悉node http model的方式，soket.ios上面有现成的例子，基本上很简单。
客户端
index.html
head 引用
<html ng-app="demo"><head> <script src="static/angular/angular.min.js"></script> <script src="static/angular/angular-resource.min.js"></script> <script src="/socket.io/socket.io.js"></script> <script src="static/app-js/app.js"></script> <script src="static/app-js/services.js"></script> <script src="static/app-js/controllers.js"></script> </head> <body> </body> </html>
angular.min.js， angular-resource.min.js 这两个路径根据自己项目路径来写
socket.io.js 这个默认路径不要动， socket.io 模块会处理这个路径并返回客户端所需要的socket.io.js 文件
app.js, services.js, controllers.js 这三个文件是需要自己写来处理自己应用逻辑的，具体职责参考angular文档，这里不做赘述, 直接上代码。
app.js
angular.module('demo', ['myApp']);
services.js 向angular中注入socket.io依赖
var app = angular.module('myApp', []); app.factory('socket', function ($rootScope) { var socket = io.connect(); return { on: function (eventName, callback) { socket.on(eventName, function () { var args = arguments; $rootScope.$apply(function () { callback.apply(socket, args); }); }); }, emit: function (eventName, data, callback) { socket.emit(eventName, data, function () { var args = arguments; $rootScope.$apply(function () { if (callback) { callback.apply(socket, args); } }); }) } }; });
controller.js 可以在controller里面直接使用socket对象了！目的达到
function SocketCtrl($scope, socket) { socket.on('client-rev', function (data) { $scope.server_data = data; }); socket.broadcast.emit('client-send', {data: {test:'test'} }); }
服务端
server.js
var express = require('express') ,util = require('util') ,path = require('path'); var app = express() , http = require('http') , server = http.createServer(app) , io = require('socket.io').listen(server); // Configuration app.configure(function(){ app.use(express.static(path.join(__dirname, 'web'))); //work with livereload app.use(express.bodyParser()); app.use(express.methodOverride()); app.use(app.router); app.enable('strit routing'); }); server.listen(config.SERVER_PORT); console.info(util.format("Express server listening on port %s in %s mode", config.SERVER_PORT, app.settings.env)); app.get('/', function (req, res) { res.sendfile(__dirname + '/index.html'); }); io.sockets.on('connection', function (socket) { socket.emit('client-rev', { hello: 'world' }); socket.on('client-send', function (data) { console.log(data); }); });
注意原来app.listen, 这里要改为server.listen。 我当时就是没注意这点，导致服务端一度无法接收到客户端发送的socket请求，原因是请求全被express接管了，没用通过socket.ios。
参考资料：
http://www.html5rocks.com/en/tutorials/frameworks/angular-websockets/ (这个上面介绍的版本有点老，现在已经过时了，无法跑起来)
http://socket.io/ 上面有很多基础的demo，注意express这一节使用的是2.x的版本，3.x照着上面copy不好使。
https://github.com/visionmedia/express/wiki/Migrating-from-2.x-to-3.x 介绍了express 2.x 到 3.x的区别。