`

AngularJS使用Socket.IO

JavaScriptAngularJSSocket.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与服务端协作及登录
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics