Question

到目前为止，我为使用Angular和Socket.io的聊天应用程序开发了以下代码。我似乎无法解决的关键部分是＆＃34; nickWrap＆＃34;。它包含一条消息＆＃39;输入昵称＆＃39;，一个输入文本框和一个提交按钮。如果昵称已存在，则将昵称传递给服务器，在该服务器中检查数组。如果没有，那么它应该回馈成功，然后我应该禁用表单并显示另一个div内容。但似乎在我收到成功消息之后，我必须再次在输入文本框中键入内容，然后才会禁用它。此外，禁用此表单后联机用户列表并不总是在使用ng-repeat选择时正确显示。总有一个空的空间。此外，当另一个用户连接时，现有用户无法在选择列表中动态查看新用户，而新用户可以看到旧用户。如果任何一个用户断开连接，则其他用户的客户端的选择列表也不动态更新列表。我对Angular，nodejs，socket.io以及所有这些

都很陌生

客户代码是：

<!doctype html>
<html>
    <head>
        <title>chat</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>

        <script src="/socket.io/socket.io.js"></script>
        </script>
        <!--<script src="app.js"></script>-->
        <script>
            var app = angular.module("myApp", []);
            var socket = io();
            var storedName;
            app.controller("myCtrl", function($scope) {
                $scope.ok=false;
                $scope.chatOK=false;
                $scope.myFunc = function () {
                    socket.emit('new user',$scope.nickname,function(data){
                        if(data){
                            alert('You picked good nickname');
                            $scope.ok=true;
                        }
                        else
                        {
                            alert('Pick a different Nickname');
                            $scope.ok=false;
                        }
                    });
                    //storedName=$scope.nickname;
                    $scope.nickname="";
                }
                $scope.sendRequest=function(){
                    alert('Chat Request sent to '+$scope.selector+' !');
                    $scope.chatOK=true;
                }
                socket.on('usernames',function(data){
                    $scope.names=data;
                    alert($scope.names);
                });
            });
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <div id="nickWrap">
            <span>Enter NickName:</span>
            <div>
                <form ng-submit="myFunc()">
                    <input type="text" placeholder="random nickname" ng-model="nickname" ng-disabled="ok">
                    <input type="submit" ng-disabled="ok">
                </form>
            </div>
            <p>
            <div id="chatWrap" ng-show="ok">
                <select name="sometext" size="20" style="width:200px" ng-model="selector">
                    <option ng-repeat="namelist in names">{{namelist}}</option>
                </select><br/>
                <Strong>LIST OF ONLINE USERS</Strong>
            </div>
        </div>
        <div id="requestWrap" ng-show="selector">
            <form ng-submit="sendRequest()">
                <input type="submit" value="Send Chat Request to {{selector}}"/>
            </form>
        </div>
        <div id="messageWrap" ng-show="chatOK">
            MESSAGES WILL APPEAR HERE SOON!!!!!!
        </div>
    </body>
</html>

服务器代码是：

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var nicknames=[];

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});
app.post('/log', function(req, res){
  console.log('someone connected');
});

io.on('connection', function(socket){
    console.log('a user '+socket.id+' connected');
    socket.on('disconnect', function(){
      console.log('user '+socket.id+' disconnected');
      //if(!socket.nickname) return;
      nicknames.splice(nicknames.indexOf(socket.nickname),1);
      socket.emit('usernames',nicknames);
      //updateNames();
    });
    socket.on('chat message', function(msg){
      console.log('message from user '+socket.id+' : ' + msg);
    });
    socket.on('new user',function(data, callback){
      console.log(data);
      if(nicknames.indexOf(data)!=-1){
        callback(false);
      }
      else{
        callback(true);
        socket.nickname=data;
        nicknames.push(data);
        //updateNames();
        socket.emit('usernames',nicknames);
      }
    });
    socket.on('chat message', function(msg){
      io.emit('chat message', msg);
    });
    //function updateNames(){
      //socket.emit('usernames',nicknames);
    //}
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

Answer 1

您的前两个问题（输入已禁用和ng-repeat）已链接。

在angularJS中，当你调用像socket.emit这样的服务时，你会超出angular的上下文并且$ scope不会更新。

设置变量后，需要强制调用$ scope。$ apply（）

socket.emit('new user',$scope.nickname,function(data){
  if(data){
    alert('You picked good nickname');
    $scope.ok=true;
  } else {
    alert('Pick a different Nickname');
    $scope.ok=false;
  }
  $scope.$apply();
});

Angular 1.6.9和socket.io聊天应用程序

1 个答案: