AngularJS Socket.io工厂代码报错无法修复，求技术解决方案

我帮你排查了这段Socket.io工厂代码，发现了几个关键问题，咱们一步步来解决：

1. 拼写错误：$rootscope → $rootScope #

AngularJS的内置服务是大小写敏感的，你代码里把$rootScope写成了小写的$rootscope，这会直接导致Angular找不到这个服务，抛出依赖注入错误。

2. 确保Socket.io客户端已正确引入 #

如果你的页面里没加载Socket.io的客户端脚本，io对象会不存在，执行io.connect()时会报错。要在AngularJS脚本之前引入：

<script src="/socket.io/socket.io.js"></script>
<script src="angular.min.js"></script>

（如果Socket.io服务器不在同域名下，要指定完整的客户端脚本地址，比如http://your-server:3000/socket.io/socket.io.js）

3. 可选但推荐：显式依赖注入（避免压缩问题） #

如果你的项目开启了严格模式（使用ng-strict-di），或者后续要压缩代码，最好用数组语法显式注入$rootScope，防止压缩时参数名被替换导致依赖丢失。

修复后的完整工厂代码 #

angular.module('myApp')
 .factory('socketFac', ['$rootScope', function($rootScope) {
  // 先检查Socket.io客户端是否加载，提前抛出明确错误
  if (typeof io === 'undefined') {
    throw new Error('Socket.io client library is not loaded!');
  }

  // 如果需要连接到指定服务器，在这里传入地址，比如io.connect('http://localhost:3000')
  var socket = io.connect();

  return {
    on: function (eventName, callback) {
      socket.on(eventName, function () {
        var args = arguments;
        // 用$apply把Socket.io的回调纳入Angular的消化周期
        $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);
          }
        });
      });
    }
  };
 }]);

控制器中使用示例 #

angular.module('myApp')
 .controller('ChatController', ['socketFac', function(socketFac) {
  // 监听服务器推送的消息
  socketFac.on('newMessage', function(message) {
    console.log('收到新消息：', message);
    // 这里的操作会自动触发Angular视图更新
  });

  // 向服务器发送消息
  socketFac.emit('sendMessage', {text: 'Hello Socket.io!'}, function(response) {
    console.log('服务器响应：', response);
  });
 }]);

如果修复后还是有问题，可以检查：

• Socket.io服务器是否正常运行，端口是否正确
• 客户端连接的地址是否和服务器匹配（默认是当前域名，不同域名需要配置CORS）
• 浏览器控制台的具体报错信息，比如是否有跨域问题或者连接超时

内容的提问来源于stack exchange，提问作者Erim Varış