Как передать данные из сервиса в контроллер в режиме реального времени?

Question

[Ler Den]

Хоче реализовать чат по примеру только с разделением функционала на Ангуляре.
HTML

<form name="publish" ng-submit="msgSend()">
    <input type="text" name="message">
    <input type="submit" value="Send">
</form>
<p >{{collection}}</p>

Как я вижу общую картину.
1.При отправке формы, срабатывает функция в контроллере, которая передает сервису введенный текст.
2. Затем в сервисе генерируем запрос к серверу и передаем ему текст пользователя.
3. На сервере получаем текст пользователя, записывем его в массив со всеми сообщениями (для теста пойдет и так).
4. На сервере генерируем ответ всем клиентам. Передаем им массив со всеми сообщениями
5. На сервисе ловим событие от сервера.
5. Сервис передает данные контроллеру.
6. Контроллер обновляет html и выводит сообщения.
У меня проблема с 5 и 6 этапами.
Получается, что в контроллере я получил один раз сообщение, которое на момент запуска undefined, и все. При последующих изменениях переменной tmp в сервисе, переменная $scope.collection не хочет обновляться и соответственно в хтмл ничего не выводится.

Как мне получать в режиме реального времени в контроллере данные из сервиса?

Контроллер

function chatController($scope, chatService) {
        // on submit call method from service
        $scope.msgSend = function() {
            var msg = document.forms.publish.message.value;
            chatService.send(msg);
        }
        // get message
        $scope.collection = chatService.get;
    }

Сервис

function chatService() {
        // open websocket connection
        var socket = io.connect('http://localhost:8080');
        // send msg to server
        function msgSend(msg) {
            socket.emit('message', msg);
        };
        function msgGet(msg) {
            return msg;
        };
        // catch messages from server in realtime
        var tmp;
        socket.on('message', function(msg) {
            tmp = msg;
        });
        // something like interface
        var methods = {
            send: msgSend,
            get: tmp
        };
        return methods;
    }

На сервере ничего интересного

io.on('connection', function(socket){
  //once server get message
  socket.on('message', function(msg){
     var collection = [];
    collection.push(msg);
    //send collection array to all users
    io.emit('message', collection);
  });
});

Answer 1

[Сергей Протько]

class ChatComponent {
   constructor(messages) {
       this.messages = messages;
       this.list = [];
   }

   $onInit() {
       this.messages.list().then(
          (list) => this.list = list;
       );

       this.messages.onNewMessage((message) => {
           this.list.push(message);
       });
   }
}

angular
  .module('app')
  .component('messageList', {
    controller: ChatComponent,
    templateUrl: 'chat/messages.html'
}

короч мораль - не делайте костылей. Передавайте вещи явно, можете через ивенты, можете еще как, можете наполнять список меседжей прямо из сервиса:

class MessagesListComponent {
}

module.component('messageList', {
    bindings: {
        messages: '='
    },
    controller: MessagesListComponent 
}