1

I am about to set my node.js / socket.io server up but since this is my first time using angular, I have a few questions.

Q: Are there any modules available with angular that makes socket connection / communication easier or would I have to build my own module?

Q: Is there something I should be aware about when making the socket server because of angular's two way databinding?

I have been reading up on blogs building a simple chat application using Angular and Node however I am looking for a more global use of a socket since it is going to be used on every page in my application.

2
  • AngularJS is a frontend based application and very good for single page applications. node.js is a backend based application. Interacting with socket.io is not a good way to handle a interface (keep your environments atomar). What about HTTP & RESTful? Commented May 7, 2015 at 12:41
  • @lin This is purely for chat and other instant messaging like functions. i already have a Node RESTful api running that runs my database connection calls' Commented May 7, 2015 at 12:54

2 Answers 2

3

Sure

There is kinda well known and popular library from @btford. You just need to include the library into your project and make a factory that returns you helpers like addListener, removeListener, removeAllListeners, emit.. for your project.

angular.module('myApp', [
  'btford.socket-io',
  'myApp.MyCtrl'
]).
factory('mySocket', function (socketFactory) {
  return socketFactory();
});


Sample

There is also a nice webtutorial on HTML5 Rocks where is built a simple app with Node.js (Express) and Angular.js and they communicate between each other via Socket.io in both directions. Sources are available on Github.


Basics (sample from tutsplus)

Basically, just make a simple Node.js listener with callback:

var io = require('socket.io')(8080);

io.sockets.on('connection', function (socket) {
    socket.on('echo', function (data) {
        socket.emit('echo', data);
    });

    socket.on('echo-ack', function (data, callback) {
        callback(data);
    });
});

.. include the scripts to your frontend app ..

<script src="'angular.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="angular-socket.js"></script>
<div ng-controller="Ctrl">
    <input ng-model="dataToSend">
    <button ng-click="emitBasic()">Send</button>
    <button ng-click="emitACK()">Send (ACK)</button>
    <div>Server Response: {{ serverResponse }}</div>
    <div>Server Response (ACK): {{ serverResponseACK }}</div>
</div>

.. include the module ..

var module = angular.module('socket.io', []);



app.controller('Ctrl', function Ctrl($scope, $socket) {
   $socket.on('echo', function (data) {
      $scope.serverResponse = data;
   });
   // ………
});
Sign up to request clarification or add additional context in comments.

Comments

1

Are there any modules available with angular that makes socket connection / communication easier or would i have to build my own module?

Not sure what modules you could use but whatever you use, encapsulate it into it's own service so that the data access is cleanly separated from application logic and UI

is there something I should be aware about when making the socket server because of angular's two way databinding?

As long as you do the aboce, you've nothing to worry about two way binding. In your controllers (which bind the scope to the view), use the service to get data and update scope to correctly update UI.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.