侯体宗的博客 AngularJS使用Socket.IO

石可破，丹可磨

AngularJS使用Socket.IO

前端  /  管理员 发布于 2020-03-08 13:33:15   18

        目前，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实现分页功能
    下一条：
    AngularJS中操作Cookies

    • 昵称：

    邮箱：

    0条评论
    Top

    Auther ·HouTiZong© 2009-2020 zongscan.com 版权所有ICP证: 粤ICP备20027696号 PHP交流群 也可以扫右边的二维码

    侯体宗的博客