How to properly make a service \ factory with socket.io so that each directive receives its own data?

F

Fedor2015-01-21 18:32:14

Angular

Fedor, 2015-01-21 18:32:14

Hello everyone, we have
main.js

angular.module('app',['btford.socket-io'])
    .factory('socket', function (socketFactory) {
        var myIoSocket = io.connect('http://localhost');

        var mySocket = socketFactory({
            ioSocket: myIoSocket
        });

        return mySocket;
    })
    .directive('myDir',function(){

        return {
            restrict: 'E',
            scope:{
                marker:'@'
            },
            template: '<p ng-bind="marker"></p><ul><li ng-repeat="item in ItemList"><div ng-bind="item"></div></li></ul>',
            controller:function($scope, socket){

                socket.emit('joinRoom', $scope.marker );

                socket.on('updateEvent',function(data){
                    $scope.ItemList= data;
                });

            }
        };
    })

    .controller('main',function($scope, $http){

        $http.get('localhost/api/getList')
            .success(function(data){
                $scope.markerlist = data;

            });
    });

index.html

<html lang="en">
    <body  ng-app="app">

        <div ng-controller='main' class="main">
            <div ng-repeat='marker in markerlist'>
                <my-dir marker='{{marker}}'></my-dir>
            </div>
        </div>
    </body>
        <script src="./libs/socket.io-client/socket.io.js"></script>
        <script src="./libs/angular/angular.min.js"></script>
        <script src="./libs/angular-socket-io/socket.min.js"></script>
        <script src="./js/main.js"></script>
    </html>

how it should work:
1) open the page
2) get the initial data via http
3) directives are drawn
4) each directive connects to its own room and waits for messages from the server
5) the server generates a message
6) the directive receives this message only from its room where it connected and changes the data in only its scope,
but in the implementation above, when generating a message, the data receives all directives, i.e. if a message was generated for the room marker1, this message will be received by all directives: marker1 and marker2 and marker3, and the information will be the same everywhere
, I suppose this is due to the fact that each directive listens to messages without linking to the room? How to fix it?
maybe I didn't make the factory right? Or in the directive it is necessary to change the logic?

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

V

vsvladimir, 2015-01-21
@Filoret256

Here's an option that might help:

var myIoSocket = io.connect('http://localhost', {'force new connection': true});

S

Sergey, 2015-01-21
Protko @Fesor

You make a $connections service with a $get method or something like that. If there is no such connection, it will be created, if there is, it will be given ready.
In your case, I would also introduce a room manager, so that it would contain all the logic for joining a specific group, etc. in order to separate this matter from directives as much as possible. That is, in the directive, you simply ask "give me access to such and such a room" and that's it. No emits and generally work with sockets inside directives.
And don't initialize anything inside the factory.