今天搭建个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 引用

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);// Configurationapp.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。

 

参考资料：

  (这个上面介绍的版本有点老，现在已经过时了，无法跑起来)

   上面有很多基础的demo，注意express这一节使用的是2.x的版本，3.x照着上面copy不好使。

  介绍了express 2.x 到 3.x的区别。