您的位置：首页 > Web前端 > Node.js

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

2013-10-24 22:31 357 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航