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不好使。

你可能感兴趣的:(Angular)