angular-socket-io

// First, ensure AngularJS and the Socket.IO client library are loaded in your HTML: // <script src="path/to/angular.min.js"></script> // <script src="/socket.io/socket.io.js"></script> // <script src="path/to/bower_components/angular-socket-io/socket.js"></script> // Define your main AngularJS module and add 'btford.socket-io' as a dependency angular.module('myApp', [ 'btford.socket-io', 'myApp.MyCtrl' // Assuming you have a controller named MyCtrl ]) .factory('mySocket', function (socketFactory) { // Instantiate a socket. This can be configured with 'ioSocket' for custom connections. var mySocket = socketFactory(); // Optionally, forward socket events to AngularJS's event system. // This makes 'error' events available via $scope.$on('socket:error', ...) mySocket.forward('error'); // Forward multiple events, here 'connect' and 'disconnect' to $rootScope by default (null scope) mySocket.forward(['connect', 'disconnect'], null); return mySocket; }) .controller('MyCtrl', function ($scope, mySocket) { // Use the injected socket instance $scope.messages = []; $scope.inputMessage = ''; // Listen for a custom 'message' event from the server mySocket.on('message', function (data) { $scope.messages.push(data); }); // Function to send a message to the server $scope.sendMessage = function () { if ($scope.inputMessage) { mySocket.emit('sendMessage', { text: $scope.inputMessage, timestamp: new Date() }); $scope.inputMessage = ''; // Clear input after sending } }; // Listen for forwarded socket error events within this specific scope $scope.$on('socket:error', function (ev, data) { console.error('Socket Error:', data); $scope.messages.push({ text: `Error: ${data.message || 'Unknown error'}`, type: 'error' }); }); // Example of emitting an event when the controller initializes mySocket.emit('joinRoom', { room: 'general' }); });