在 Angular 应用中监听 socket.io

Question

I'm looking to integrate socket.io with my angular app. I've seen some examples of how to create a service, which makes it accessible on the controller. Which I understand. But I'm looking for a way that all the controllers can react to event calls from socket.io.

So:

socket.on('user joined', function (data) {});

I can do that in one controller but how do I do it for all?

Answer 1

You'll want to encapsulate your socket in a service and inject it into Angular controllers as needed .

Let's make a socket service:

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);
          }
        });
      })
    }
  };
});

Then we'll inject into a controller and interact with it (through the socket.io API):

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

You can obviously customize the controller to do what you need to with the socket service.