`

AngularJS使用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中,你可以基于此来构建自已的应用。

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics