{"id":17156,"library":"angular-socket-io","title":"AngularJS Socket.IO Integration","description":"The `angular-socket-io` package provides a Bower component designed to integrate Socket.IO with AngularJS applications. As of version 0.7.0, it is specifically built for AngularJS (version 1.x) and relies on the Bower package manager for installation, making it largely incompatible with modern JavaScript ecosystems using npm or Yarn, and contemporary Angular (2+). Its primary function is to wrap the Socket.IO client, ensuring that events are properly integrated into AngularJS's digest cycle. This allows developers to use Socket.IO's `on`, `emit`, `removeListener`, and `removeAllListeners` methods, alongside a unique `socket.forward` API that broadcasts Socket.IO events to AngularJS's `$scope` or `$rootScope` event system. The project appears to be unmaintained, with its last significant update aligning with the AngularJS era, thus lacking ongoing release cadence and support for current web development practices.","status":"abandoned","version":"0.7.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install angular-socket-io","lang":"bash","label":"npm"},{"cmd":"yarn add angular-socket-io","lang":"bash","label":"yarn"},{"cmd":"pnpm add angular-socket-io","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for Socket.IO communication, assumed to be globally available via a script tag.","package":"socket.io-client","optional":false},{"reason":"This library is an AngularJS (1.x) module and requires AngularJS to function.","package":"angular","optional":false}],"imports":[{"note":"This is the AngularJS module name that must be declared as a dependency in your application's `angular.module()` call. It is not an ES module or CommonJS import.","wrong":"import { btford.socket-io } from 'angular-socket-io'","symbol":"btford.socket-io","correct":"angular.module('myApp', ['btford.socket-io'])"},{"note":"The `socketFactory` is an AngularJS service provider, injected into other services, controllers, or factories within your AngularJS application's dependency injection system.","wrong":"const socketFactory = require('angular-socket-io').socketFactory","symbol":"socketFactory","correct":"angular.module('myApp').factory('mySocket', function (socketFactory) { /* ... */ })"},{"note":"A method on the `socket` instance created by `socketFactory`. It forwards Socket.IO events to AngularJS's `$scope` or `$rootScope` event system, allowing listening via `$scope.$on`.","symbol":"socket.forward","correct":"mySocket.forward('eventName', $scope)"}],"quickstart":{"code":"// First, ensure AngularJS and the Socket.IO client library are loaded in your HTML:\n// <script src=\"path/to/angular.min.js\"></script>\n// <script src=\"/socket.io/socket.io.js\"></script>\n// <script src=\"path/to/bower_components/angular-socket-io/socket.js\"></script>\n\n// Define your main AngularJS module and add 'btford.socket-io' as a dependency\nangular.module('myApp', [\n  'btford.socket-io',\n  'myApp.MyCtrl' // Assuming you have a controller named MyCtrl\n])\n.factory('mySocket', function (socketFactory) {\n  // Instantiate a socket. This can be configured with 'ioSocket' for custom connections.\n  var mySocket = socketFactory();\n\n  // Optionally, forward socket events to AngularJS's event system.\n  // This makes 'error' events available via $scope.$on('socket:error', ...)\n  mySocket.forward('error');\n  // Forward multiple events, here 'connect' and 'disconnect' to $rootScope by default (null scope)\n  mySocket.forward(['connect', 'disconnect'], null);\n\n  return mySocket;\n})\n.controller('MyCtrl', function ($scope, mySocket) {\n  // Use the injected socket instance\n  $scope.messages = [];\n  $scope.inputMessage = '';\n\n  // Listen for a custom 'message' event from the server\n  mySocket.on('message', function (data) {\n    $scope.messages.push(data);\n  });\n\n  // Function to send a message to the server\n  $scope.sendMessage = function () {\n    if ($scope.inputMessage) {\n      mySocket.emit('sendMessage', { text: $scope.inputMessage, timestamp: new Date() });\n      $scope.inputMessage = ''; // Clear input after sending\n    }\n  };\n\n  // Listen for forwarded socket error events within this specific scope\n  $scope.$on('socket:error', function (ev, data) {\n    console.error('Socket Error:', data);\n    $scope.messages.push({ text: `Error: ${data.message || 'Unknown error'}`, type: 'error' });\n  });\n\n  // Example of emitting an event when the controller initializes\n  mySocket.emit('joinRoom', { room: 'general' });\n});","lang":"javascript","description":"Demonstrates how to configure `angular-socket-io` as an AngularJS factory, instantiate a `socketFactory` instance, forward Socket.IO events to AngularJS scopes, and use the socket instance in a controller to send and receive messages."},"warnings":[{"fix":"For modern Angular, use `ngx-socket-io`. For other frameworks, use the official `socket.io-client` library directly. This package is not suitable for modern web development.","message":"The `angular-socket-io` package is built exclusively for AngularJS (1.x) and is fundamentally incompatible with modern Angular (2+), React, Vue, or other contemporary JavaScript frameworks. Attempting to use it in these environments will lead to module resolution failures and runtime errors due to its reliance on AngularJS's dependency injection system and global scope. This package also relies on Bower for dependency management, which is deprecated, making direct installation via npm or yarn problematic without specific configuration or shims.","severity":"breaking","affected_versions":"*"},{"fix":"Ensure `<script src=\"/socket.io/socket.io.js\"></script>` is included in your HTML *before* `angular-socket-io.js` and any of your application scripts that use it.","message":"This package requires the Socket.IO client library (`socket.io.js`) to be manually loaded in the browser, typically via a `<script>` tag. It assumes the global `io` object is available. If `socket.io.js` is not loaded before `angular-socket-io.js`, the `socketFactory` will fail to initialize, resulting in `TypeError` or `ReferenceError` related to `io` being undefined.","severity":"gotcha","affected_versions":"*"},{"fix":"Migrate to a modern framework and use `socket.io-client` directly or a framework-specific wrapper (e.g., `ngx-socket-io` for Angular). Consider this package for legacy AngularJS applications only.","message":"The entire package is considered deprecated and effectively abandoned due to its reliance on AngularJS (which is in long-term support but not actively developed for new features) and the Bower package manager. It does not support ESM, TypeScript, or modern build processes. There is no active maintenance, security updates, or new feature development.","severity":"deprecated","affected_versions":"*"},{"fix":"Ensure that any state changes within `$scope.$on` handlers are safely wrapped in `$scope.$apply()` if necessary (e.g., `if (!$scope.$$phase) $scope.$apply()`), or use `ng-model` bindings that trigger a digest. For high-frequency events, reconsider the event forwarding strategy or debounce updates.","message":"Event forwarding using `socket.forward` and `$scope.$on('socket:eventName', ...)` relies on AngularJS's digest cycle. If Socket.IO events fire rapidly or outside of Angular's control, changes to `$scope` properties within the `$on` handler might not update the UI immediately without manual calls to `$scope.$apply()` or `$rootScope.$apply()`, which can lead to performance issues or unexpected behavior. Overuse of `$apply()` can also lead to 'digest already in progress' errors.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Ensure `<script src=\"path/to/bower_components/angular-socket-io/socket.js\"></script>` is included in your HTML *after* AngularJS and *before* your main application scripts.","cause":"The `btford.socket-io` module definition file (`socket.js` from the bower component) was not loaded into the HTML.","error":"Error: [$injector:modulerr] Failed to instantiate module btford.socket-io"},{"fix":"Add `<script src=\"/socket.io/socket.io.js\"></script>` to your HTML, making sure it loads *before* `angular-socket-io.js`.","cause":"The Socket.IO client library (`socket.io.js`) was not loaded before `angular-socket-io` attempts to use the global `io` object.","error":"TypeError: io is not a function"},{"fix":"Verify that your `mySocket` factory is defined in an AngularJS module that is a dependency of the module where `mySocket` is being used, and that the file containing its definition is loaded correctly in your HTML.","cause":"The custom `mySocket` factory (or any other factory/service you create using `socketFactory`) was not properly defined, or the AngularJS module containing its definition was not loaded as a dependency in the module where `mySocket` is being injected.","error":"Error: [$injector:unpr] Unknown provider: mySocketProvider"}],"ecosystem":"npm","meta_description":null}