Question

我正在尝试使用NodeJS, Express, and Socket.IO制作我在Code School上完成的聊天应用程序。除了他们使用jQuery的地方，我想使用AngularJS。

我遇到的问题是我的$scope.model由我的服务器发出的'join'事件更新，客户端侦听此事件并更新$scope.model ...但是这个改变不会像它应该的那样自动影响DOM。

的index.html

  <body ng-app="chatApp" ng-controller="ChatCtrl">

    <header class="container">
      <h1 class="page-header">Chatt App</h1>
    </header>

    <div class="container">
      <div class="col-xs-3">

        <ul class="list-unstyled">
          <li ng-repeat="user in model.onlineUsers">{{user}}</li>
        </ul>

      </div>

      <div class="col-xs-9">
        <button class="btn btn-primary" ng-click="add()">Tester</button>
      </div>
    </div>

    <!-- Vendors -->
    <script src="vendors/jquery-1.11.3.min.js"></script>
    <script src="vendors/angular.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>

    <!-- app.js -->
    <script>
      angular.module('chatApp', [])

      .controller('ChatCtrl', ['$scope', '$http', function($scope, $http) {

        $scope.model = {
          onlineUsers: ['test'],
        };

        var socket = io.connect();

        socket.on('connect', function(data) {

          var nickname = prompt("What's your name?");
          socket.emit('join', nickname);

        });

        socket.on('join', function(onlineUsers) {

          $scope.model.onlineUsers = onlineUsers;
          console.log('model changed!');
        });

        $scope.add = function() {
          var newUser = 'tester1';

          $scope.model.onlineUsers.push(newUser);
        };

      }]);
    </script>
  </body>

Node.js的

var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);

var onlineUsers = [];
// sets root
app.use(express.static(__dirname + '/public/src'));

io.on('connect', function(client) {

  client.on('join', function(data) {

    if(data === null) {
      data = 'Nameless';
    }

    onlineUsers.push(data);
    console.log(onlineUsers);

    client.broadcast.emit('join', onlineUsers);
    client.emit('join', onlineUsers);
  });

});

server.listen(8080, function() {
  console.log('Running at 8080');
});

我创建了一个测试按钮，将另一个项目添加到$scope.model.onlineUsers，最后，DOM更新。

除了socket.io之外，还有一个更好的地方可以放置我的controller听取事件，但我也使用了.run(function() {});，但这不会让我注入{{1}由于某种原因，所以我不确定在Angular项目中将服务器的代码放在何处。

使用Socket.IO和AngularJS制作聊天应用程序

0 个答案: