AngularJs 和套接字服务器答案

【问题标题】：AngularJs and a socket serverAngularJs 和套接字服务器
【发布时间】：2015-05-07 21:04:00
【问题描述】：

我即将设置我的node.js / socket.io 服务器，但由于这是我第一次使用 Angular，我有几个问题。

问：是否有任何可用于 Angular 的模块使套接字连接/通信更容易，还是我必须构建自己的模块？

问：由于 Angular 的two way databinding，在制作套接字服务器时我应该注意什么？

我一直在阅读有关使用 Angular 和 Node 构建简单聊天应用程序的博客，但是我正在寻找更全局的套接字使用，因为它将在我的应用程序的每个页面上使用。

【问题讨论】：

AngularJS 是一个基于前端的应用程序，非常适合单页应用程序。 node.js 是一个基于后端的应用程序。与 socket.io 交互并不是处理接口的好方法（让你的环境保持原子性）。 HTTP 和 RESTful 怎么样？
@lin 这纯粹是为了聊天和其他即时消息之类的功能。我已经运行了一个 Node RESTful api 来运行我的数据库连接调用'

标签： javascript angularjs node.js sockets

【解决方案1】：

当然

@btford 有一个众所周知和流行的library。您只需将库包含到您的项目中并创建一个工厂，为您的项目返回 addListener、removeListener、removeAllListeners、emit.. 等助手。

angular.module('myApp', [
  'btford.socket-io',
  'myApp.MyCtrl'
]).
factory('mySocket', function (socketFactory) {
  return socketFactory();
});

示例

HTML5 Rocks 上还有一个不错的网络教程，其中使用 Node.js (Express) 和 Angular.js 构建了一个简单的应用程序，它们通过 Socket.io 双向通信。来源可在Github 获得。

基础知识（来自tutsplus 的示例）

基本上，只需制作一个带有回调的简单 Node.js 侦听器：

var io = require('socket.io')(8080);

io.sockets.on('connection', function (socket) {
    socket.on('echo', function (data) {
        socket.emit('echo', data);
    });

    socket.on('echo-ack', function (data, callback) {
        callback(data);
    });
});

.. 将脚本包含到您的前端应用中..

<script src="'angular.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="angular-socket.js"></script>
<div ng-controller="Ctrl">
    <input ng-model="dataToSend">
    <button ng-click="emitBasic()">Send</button>
    <button ng-click="emitACK()">Send (ACK)</button>
    <div>Server Response: {{ serverResponse }}</div>
    <div>Server Response (ACK): {{ serverResponseACK }}</div>
</div>

.. 包含模块..

var module = angular.module('socket.io', []);



app.controller('Ctrl', function Ctrl($scope, $socket) {
   $socket.on('echo', function (data) {
      $scope.serverResponse = data;
   });
   // ………
});

【讨论】：

【解决方案2】：

是否有任何可用于 Angular 的模块使套接字连接/通信更容易，或者我必须构建自己的模块？

不确定您可以使用哪些模块，但无论您使用什么，都将其封装到自己的服务中，以便数据访问与应用程序逻辑和 UI 完全分离

由于 Angular 的双向数据绑定，在制作套接字服务器时我应该注意什么？

只要你做 aboce，你就不用担心双向绑定。在您的控制器（将范围绑定到视图）中，使用服务获取数据并更新范围以正确更新 UI。

【讨论】：