angularjs - 如何使用 angular-socket-io 库设置 socket.io 服务器？

Question

重复中的答案并不是指我的代码中使用的 angularjs 库，因为 Angular 设置 angular-socket-io 的方式与重复中提供的答案不相似!

刚开始在socket.io上工作，我第一次发现angular-socket-io库可以在客户端工作，但它看起来有点复杂，我只想使用Angular-socket库从服务器向客户端发送消息，但它不知道下面的代码中实现了什么错误？

index.html

<script src="bower_components/socket.io-client/socket.io.js"></script>
<script src="bower_components/angular-socket-io/socket.js"></script>

服务器.js

 var express = require('express');
    var app = express();
    var server = require('http').createServer(app);
    var io = require('socket.io')(server);

    io.on('connection', function(client) {
        console.log('Client connected...');
       io.emit('message', message);
    });


server.listen(3000);

angularSOcketFactory.js

angular.module('loggingApp').factory('mySocket', function (socketFactory) {
    'use strict';
    return socketFactory();
});

AngularCtrl.js

 $scope.$on('socket:someEvent', function (ev, data) {
      $scope.theData = data;
    });

Answer 1

有一个excellent tutorial关于如何为 Angular 创建自己的 socket.io 提供程序。

我已经在我的 AngularJS 应用程序中成功使用了它，我还有一个 completed version该要点的来源。它是为 Browserify 设置的，但您可以通过删除文件顶部的两个 require(''); 语句来撤消该设置。

这是 Socket.io 提供程序的源代码，您只需将其挂接到您的 Controller 中即可。所有功劳归Maciej Sopylo使用这种方法发布教程。

(function () {
  'use strict';

  var angular = require('angular');
  var io = require('socket.io-client');

  angular
    .module('socket.io', [])
    .provider('$socket', $socketProvider);

  /* @ngInject */
  function $socketProvider() {
    var ioUrl = '';
    var ioConfig = {};

    // Private Function to assign properties to ioConfig
    function setOption(name, value, type) {
      if (typeof value !== type)
        throw new TypeError('\'' + name + '\' must be of type \'' + type + '\'');
      else
        ioConfig[name] = value;
    }

    this.$get = function $socketFactory($rootScope) {
      var socket = io(ioUrl, ioConfig);

      return {
        on: function on(event, callback) {
          socket.on(event, function() {
            var resData = arguments;

            $rootScope.$apply(function() {
              callback.apply(socket, resData);
            });
          });
        },
        off: function off(event, callback) {
          if (typeof callback === 'function')
            socket.removeListener(event, callback);
          else
            socket.removeAllListeners(event);
        },
        emit: function emit(event, data, callback) {
          if (typeof callback === 'function') {
            socket.emit(event, data, function() {
              callback.apply(socket, arguments);
            });
          }
          else
            socket.emit(event, data);
        }
      };
    };

    this.setConnectionUrl = function setConnectionUrl(url) {
      if (typeof url === 'string')
        ioUrl = url;
      else
        throw new TypeError('url must be of type string');
    };

    this.setPath = function setPath(value) {
      setOption('path', value, 'string');
    };

    this.setConnectTimeout = function setConnectTimeout(value) {
      setOption('connect timeout', value, 'number');
    };

    this.setTryMultipleTransports = function setTryMultipleTransports(value) {
      setOption('try multiple transports', value, 'boolean');
    };

    this.setReconnect = function setReconnect(value) {
      setOption('reconnect', value, 'boolean');
    };

    this.setReconnectionDelay = function setReconnectionDelay(value) {
      setOptions('reconnection delay', value, 'number');
    };

    this.setReconnectionLimit = function setReconnectionLimit(value) {
      setOptions('max reconnection attempts', value, 'number');
    };

    this.setSyncDisconnectOnUnload = function setSyncDisconnectOnUnload(value) {
      setOptions('sync disconnect on unload', value, 'boolean');
    };

    this.setAutoConnect = function setAutoConnect(value) {
      setOptions('auto connect', value, 'boolean');
    };

    this.setFlashPolicyPort = function setFlashPolicyPort(value) {
      setOptions('flash policy port', value, 'number');
    };

    this.setForceNewConnection = function setForceNewConnection(value) {
      setOptions('force new connection', value, 'boolean');
    };
  }

})();