今天搭建個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的區別。