soket.io.js + angular.js + express.js(node.js)
soket.io.js + angular.js + express.js(node.js)
<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.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'} });
}
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。
soket.io.js + angular.js + express.js(node.js)的更多相关文章
- 现在学习 JavaScript 的哪种技术更好：Angular、jQuery 还是 Node.js？（转）
本文选自<开发者头条>1 月 7 日最受欢迎文章 Top 3,感谢作者 @WEB资源网 分享. 欢迎分享:http://toutiao.io/contribute 这是一个发布在 Quor ...
- io.js - 兼容 NPM 平台的 Node.js 新分支
io.js(JavaScript I/O)是兼容 NPM 平台的 Node.js 新分支,由 Node.js 的核心开发者在 Node.js 的基础上,引入更多的 ES6 特性,它的目的是提供更快的和 ...
- node.js day01学习笔记:认识node.js
Node.js(JavaScript,everywhere) 1.Node.js 介绍 1.1. 为什么要学习Node.js 企业需求 + 具有服务端开发经验更好 + front-end + back ...
- [Node.js] 01 - How to learn node.js
基本概念 链接:https://www.zhihu.com/question/47244505/answer/105026648 链接:How to decide when to use Node.j ...
- 前端（Node.js）（3）-- Node.js实战项目开发:“技术问答”
1.Web 与 Node.js 相关技术介绍 1.1.Web应用的基本组件 web应用的三大部分 brower(GUI)<==>webserver(business logic.data ...
- node.js学习（二）--Node.js控制台（REPL）&&Node.js的基础和语法
1.1.2 Node.js控制台(REPL) Node.js也有自己的虚拟的运行环境:REPL. 我们可以使用它来执行任何的Node.js或者javascript代码.还可以引入模块和使用文件系统. ...
- Edge.js：让.NET和Node.js代码比翼齐飞
通过Edge.js项目,你可以在一个进程中同时运行Node.js和.NET代码.在本文中,我将会论述这个项目背后的动机,并描述Edge.js提供的基本机制.随后将探讨一些Edge.js应用场景,它在这 ...
- Express入门( node.js Web应用框架 )
运用Express框架构建简单的NodeJS应用 Start 确认安装了NodeJS之后(最新的Node安装好后NPM也会自带安装了),npm可理解为nodejs的一个工具包.可通过查看版本来检测是 ...
- Node.js 学习（五）Node.js 事件循环
Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node.js 的每一个 API 都是异步的,并作为一个独立线程运行,使用异步函数调用,并处理并发. Node.j ...
- 深入浅出Node.js（一） - 初识Node.js
1.Node.js将Javascript解决不确定性所使用的事件驱动方式引入了进来,因为JS是一门事件驱动的语言,旨在能够对外界的事件作出响应; 2.Node.js中,所有的有关异步的操作,都在同步操 ...
随机推荐
- 计蒜客 作弊揭发者（string的应用）
鉴于我市拥堵的交通状况,市政交管部门经过听证决定在道路两侧安置自动停车收费系统.当车辆驶入车位,系统会通过配有的摄像头拍摄车辆画面,通过识别车牌上的数字.字母序列识别车牌,通过连接车管所车辆信息数据库 ...
- wcf系列5天速成——第一天 binding的使用(1)
原文:wcf系列5天速成--第一天 binding的使用(1) 作为WCF速成系列,只介绍些项目开发中常用到的实战知识. 学习wcf,还是对其中的几个术语要了解一下.wcf中有一个ABC的概念,就是 ...
- hdu(2062)-Subset sequence 组合数学
意甲冠军:查找集合{1,2,3...n}第一m一个排列子. 收集的线索所行的大小. 例两个元素的排列子集合按字典树排列是:{1},{1,2},{2},{2,1}: 解法:一个一个元素来确定,每次把剩余 ...
- 【百度地图API】情人节求爱大作战——添加标注功能
原文:[百度地图API]情人节求爱大作战--添加标注功能 任务描述: 2月2日是除夕,2月14立马来!即将到来的情人节,你想送TA一份什么礼物呢? 不如,在你们居住的地方,画个大大的桃心,表达你对TA ...
- ListView排序并隔色显示
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.C ...
- Java设计模式（八）观察者模式 迭代器模式
(十五)观察者模式 观察者模式,定义对象间一对多关系,一个对象状态发生改变,全部依赖于它的对象都收到通知而且自己主动更新,观察者与被观察者分开.比如邮件订阅.RSS订阅,假设有更新就会邮件通知你. i ...
- 第1章2节《MonkeyRunner源码剖析》概述:边界(原创)
天地会珠海分舵注:本来这一系列是准备出一本书的,详情请见早前博文“寻求合作伙伴编写<深入理解 MonkeyRunner>书籍“.但因为诸多原因,没有如愿.所以这里把草稿分享出来,所以错误在 ...
- PHP文件上传后缀名与文件类型对照表
ie 火狐 id 后缀名 php识别出的文件类型 0 gif image/gif 1 jpg image/jpeg 2 png image/png 3 bmp image/bmp 4 psd appl ...
- leetcode第14题--Longest Common Prefix
Problems:Write a function to find the longest common prefix string amongst an array of strings. 就是返回 ...
- PhpStorm创建Drupal模块项目开发教程
在PhpStorm开发工具中,创建Drupal开发项目有两种方式:整合Drupal到现有的项目中和直接创建一个新的Drupal模块. 接下来将展示这两种方式的具体操作! 整合Drupal到现有的项目 ...