当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

AngularJS使用Socket.IO

发表于: 2014-08-30   作者:bijian1013   来源:转载   浏览:
摘要:         目前,web应用普遍被要求是实时web应用,即服务端的数据更新之后,应用能立即更新。以前使用的技术(例如polling)存在一些局限性,而且有时我们需要在客户端打开一个socket,然后进行通信。         Socket.IO(http://socket.io/)是一个非常优秀的库,它可以帮你实

        目前,web应用普遍被要求是实时web应用,即服务端的数据更新之后,应用能立即更新。以前使用的技术(例如polling)存在一些局限性,而且有时我们需要在客户端打开一个socket,然后进行通信。

        Socket.IO(http://socket.io/)是一个非常优秀的库,它可以帮你实现以上功能。它使用了非常简单的、基于事件的API,让你可以开发实时web应用。我们打算开发一个实时的匿名广播系统(类似于Twitter,只是我们的系统没有用户名),它可以向Socket.IO上的所有用户发送消息,并且自已也可以看到所有消息。系统不会存储任何东西,所以只有当用户处于活动状态时消息才是存活的,但是这个例子足以说明Socket.IO可以和AngularJS完美地集成到一起。

        稍后,我们将会把Socket.IO包装到一个很好的AngularJS服务中去,这样我们可以保证:

1.Socket.IO的事件将会在AngularJS生命周期内部进行通知并处理。

2.以后的集成测试会更加容易

app.js

var app = angular.module('myApp', []);

//我们把socket服务定义成了一个factory,这样它只会被实例化一次,而且在整个应用的作用域范围内就成为了一个单例
app.factory('socket', function($rootScope) {
	var socket = io.connection('http://localhost:8899');
	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);
					}
				});
			})
		}
	};
});

app.controller('MainCtrl', function($scope, socket) {
	$scope.message = '';
	$scope.messages = [];
	
	//当我们看到一条从服务端发送过来的新消息时
	socket.on('new:msg',function(message) {
		$scope.message.push(message);
	});
	
	//告诉服务端有一条新消息
	$scope.boradcast = function() {
		socket.emit('broadcast:msg', {message:$scope.message});
		$scope.message.push($scope.message);
		$scope.message = '';
	};
});

        我们只包装了我们所关心的两个函数,它们是Socket.IO API里面on event和broadcast event方法。除此之外还有很多方法,都可以使用类似的方式进行包装。

        控制器MainCtrl本身非常简单,它会监听socket连接上的一些事件,并且会监听用户是否按下了broadcast按钮,一旦按下就告诉服务器出现了一条新信息。它同时还会把消息添加到列表中,并立即显示给用户。

        我们将会使用一个很简单的index.html,其中会显示一个带有发送按钮的文本框以及一个消息列表。在这个例子中,我们不会跟踪谁发送了消息,或者他们何时发送了消息。

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
	<meta charset="utf-8"></meta>
	<title>Anonymous Broadcaster</title>
	<script src="node_modules/socket.io/index.js"></script>
	<script src="angular/angular.js"></script>
	<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
	<input type="text" ng-model="message"></input>
	<button ng-click="broadcast()">Broadcast</button>
	<ul>
		<li ng-repeat="msg in message">{{msg}}</li>
	</ul>
</body>
</html>

        最后就只剩下服务端了。这是一个NodeJS服务器,它知道如何为应用代码提供服务,并且还创建了一个模拟的Socket.IO服务器。

var app = require('express')(),
    server = require('http').createServer(app),
    io = require('socket.io').listen(server);

server.listen(8899);

app.get('/',function(req,res) {
	res.send/File(__dirname + '/index.html');
});
app.get('/app.js', function(req, res) {
	res.sendFile(__dirname + '/app.js');
});
io.sockets.on('connection', function(socket) {
	socket.emit('new:msg', 'Welcome to AnonBoard');
	socket.on('broadcast:msg', function(data) {
		//把新的消息通知给所有其他客户端(除自已外)
		socket.broadcast.emit('new:msg', data.message);
	});
});

        你可以很轻松地扩展它,用来处理更多信息和更加复杂的结构。这个例子打下了一个很好的基础,你可以利用它在你的客户端和服务端之间实现socket通信。

        这个应用非常简单,它没有做任何校验操作(例如消息是否为空),但是它带有AngularJS默认提供的HTML清理功能。它不会处理复杂的消息,但是它提供了一个可运行端到端Socket.IO实现,并且集成到了AngularJS中,你可以基于此来构建自已的应用。

AngularJS使用Socket.IO

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
刚学node.js,想着做点东西练练手。网上的东西多而杂,走了不少弯路,花了一天时间在调代码上。参考
原文 : Using nGrinder to perform load test for a socket.io app by Mavlarn nGrinder不仅可以用
AngularJS中的作用域有一个非常有层次和嵌套分明的结构。其中它们都有一个主要的$rootScope(也就说
ng-repeat可能是最有用的Angular指令了,它可以根据集合中的项目一次创建一组元素的多份拷贝。不管
AngularJS中的作用域有一个非常有层次和嵌套分明的结构。其中它们都有一个主要的$rootScope(也就说
背景 最近由于项目需要,需要有一个用户引导的功能在用户第一次登陆的时候,最初的考虑是使用Intro.
ng-repeat可能是最有用的Angular指令了,它可以根据集合中的项目一次创建一组元素的多份拷贝。不管
做一个Web应用,一般都有前台和后台,Node.js可以实现后台,利用jade模板引擎也可以生成一些简单的
每当看到前端程序员在脚本、样式、表单处理逻辑中苦苦挣扎的时候,我就在想,为什么不用Angular Js
参考:http://www.runoob.com/angularjs/angularjs-intro.html http://angularjs.cn/A00n AngularJs
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号