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

soket.io.js + angular.js + express.js(node.js)的更多相关文章

  1. 现在学习 JavaScript 的哪种技术更好:Angular、jQuery 还是 Node.js?(转)

    本文选自<开发者头条>1 月 7 日最受欢迎文章 Top 3,感谢作者 @WEB资源网 分享. 欢迎分享:http://toutiao.io/contribute 这是一个发布在 Quor ...

  2. io.js - 兼容 NPM 平台的 Node.js 新分支

    io.js(JavaScript I/O)是兼容 NPM 平台的 Node.js 新分支,由 Node.js 的核心开发者在 Node.js 的基础上,引入更多的 ES6 特性,它的目的是提供更快的和 ...

  3. node.js day01学习笔记:认识node.js

    Node.js(JavaScript,everywhere) 1.Node.js 介绍 1.1. 为什么要学习Node.js 企业需求 + 具有服务端开发经验更好 + front-end + back ...

  4. [Node.js] 01 - How to learn node.js

    基本概念 链接:https://www.zhihu.com/question/47244505/answer/105026648 链接:How to decide when to use Node.j ...

  5. 前端(Node.js)(3)-- Node.js实战项目开发:“技术问答”

    1.Web 与 Node.js 相关技术介绍 1.1.Web应用的基本组件 web应用的三大部分 brower(GUI)<==>webserver(business logic.data ...

  6. node.js学习(二)--Node.js控制台(REPL)&&Node.js的基础和语法

    1.1.2 Node.js控制台(REPL) Node.js也有自己的虚拟的运行环境:REPL. 我们可以使用它来执行任何的Node.js或者javascript代码.还可以引入模块和使用文件系统. ...

  7. Edge.js:让.NET和Node.js代码比翼齐飞

    通过Edge.js项目,你可以在一个进程中同时运行Node.js和.NET代码.在本文中,我将会论述这个项目背后的动机,并描述Edge.js提供的基本机制.随后将探讨一些Edge.js应用场景,它在这 ...

  8. Express入门( node.js Web应用框架 )

    运用Express框架构建简单的NodeJS应用 Start  确认安装了NodeJS之后(最新的Node安装好后NPM也会自带安装了),npm可理解为nodejs的一个工具包.可通过查看版本来检测是 ...

  9. Node.js 学习(五)Node.js 事件循环

    Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node.js 的每一个 API 都是异步的,并作为一个独立线程运行,使用异步函数调用,并处理并发. Node.j ...

  10. 深入浅出Node.js(一) - 初识Node.js

    1.Node.js将Javascript解决不确定性所使用的事件驱动方式引入了进来,因为JS是一门事件驱动的语言,旨在能够对外界的事件作出响应; 2.Node.js中,所有的有关异步的操作,都在同步操 ...

随机推荐

  1. 求和问题(DFS)

    输入: n=4 a={1,2,4,7} k=13 输出: YES 输入: n=4 a={1,2,4,7} k=13 输出: NO 选出若干数,使它们的和恰好为k #include <stdio. ...

  2. Linq的Distinct太不给力了[转]

    假设我们有一个类:Product public class Product { public string Id { get; set; } public string Name { get; set ...

  3. unity脚本运行顺序具体的解释

    unity脚本自带函数执行顺序例如以下:将以下脚本挂在随意物体执行就可以得到 Awake ->OnEable-> Start ->-> FixedUpdate-> Upd ...

  4. Android两个注意事项.深入了解Intent和IntentFilter(两)

    深入理解Intent和IntentFiler(二) 转载请表明出处:http://blog.csdn.net/u012637501(嵌入式_小J的天空)     在上一篇文章中,我们比較具体学习了&q ...

  5. Oracle 11g password过期被锁定报道 ORA-28000 the account is locked

    一.触发这个错误的原因及相关因素 是因为oracle11g中默认在default概要文件里设置了"PASSWORD_LIFE_TIME=180天"所导致.在Oracle 11g中是 ...

  6. MSSQL Server 2008 数据库安装失败

    1.Reporting Services目录临时数据库文件存在 出现这种问题的原因,是由于以前安装的SQL Server2008文件并没有卸载或删除干净造成      解决的办法如下:      找到 ...

  7. 为WebBrowser的WEB页的Document注册事件的问题

    原文:为WebBrowser的WEB页的Document注册事件的问题 当使用WebBrowser,并对其装载的Web页建立Document的事件后,WebBrowser里的页面元素都变得难于操作了, ...

  8. Oracle OS认证和口令文件认证方法

    OS认证 1.在SQLNET.ORA(位于$ORACLE_HOME/NETWORK/ADMIN文件夹中)文件里,使用vi编辑,凝视掉#SQLNET.AUTHENTICATION_SERVICES = ...

  9. poj 2513 Colored Sticks(欧拉路径+并检查集合+特里)

    题目链接:poj 2513 Colored Sticks 题目大意:有N个木棍,每根木棍两端被涂上颜色.如今给定每一个木棍两端的颜色.不同木棍之间拼接须要颜色同样的 端才干够.问最后是否能将N个木棍拼 ...

  10. 【Heritrix基础教程2】Heritrix基本介绍

    1.版本号说明 (1)最新的版本号:3.3.0 (2)最新release版本号:3.2.0 (3)重要历史版本号:1.14.4 3.1.0及之前的版本号:http://sourceforge.net/ ...