javascript - AngularJs 和套接字服务器

Question

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

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

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

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

Answer 1

当然

有一种众所周知和流行的 library来自@btford。你只需要将库包含到你的项目中，并创建一个工厂来返回你的助手，如 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;
   });
   // ………
});