soket.io.js + angular.js + express.js(node.js)

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的区别。

 

 

 

标签: soket.io, angular.js, express.js