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

Question

重复中的答案不是指在我的代码中使用的 angularjs 库，因为角度设置 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>

server.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 提供者的源代码，您只需要将它挂接到您的控制器中。所有功劳归于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');
    };
  }

})();