在 Angular 應用中監聽 socket.io

Question

我希望將 socket.io 與我的 angular 應用程序集成。 我已經看到了一些關於如何創建服務的例子，這使得它可以在控制器上訪問。 我明白。 但我正在尋找一種方法，讓所有控制器都可以對來自 socket.io 的事件調用做出反應。

所以：

socket.on('用戶加入', function (data) {});

我可以在一個控制器中做到這一點，但我如何為所有人做到這一點？

Answer 1

您需要將套接字封裝在服務中，並根據需要將其注入 Angular 控制器。

讓我們創建一個套接字服務：

app.factory('socket', function ($rootScope) {
  var socket = io.connect();
  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);
          }
        });
      })
    }
  };
});

然后我們將注入一個控制器並與之交互（通過socket.io API）：

function AppCtrl($scope, socket) {
  socket.on('init', function (data) {
    $scope.name = data.name;
    $scope.users = data.users;
  });
}

您顯然可以自定義控制器以使用套接字服務執行您需要的操作。