Angular 1.6.9 и чат-приложение socket.io
Следующий код, который я разработал для приложения чата с использованием Angular и Socket.io. Самая важная часть, которую я не могу исправить, - это "nickWrap". Он состоит из сообщения «Введите псевдоним», текстового поля для ввода и кнопки отправки. Псевдоним передается на сервер, где он проверяет массив, если псевдоним уже присутствует. Если нет, то он должен вернуть успех, тогда я должен отключить форму и показать другое содержимое 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.info('someone connected');
});
io.on('connection', function(socket){
console.info('a user '+socket.id+' connected');
socket.on('disconnect', function(){
console.info('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.info('message from user '+socket.id+' : ' + msg);
});
socket.on('new user',function(data, callback){
console.info(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.info('listening on *:3000');
});
Ответы 1
Ваши первые 2 проблемы (ввод отключен и 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();
});
Что ж, $ scope. $ Apply () работала для ng-disabled, но не для ng-repeat, хотя я использовал $ timeout вместо $ apply (). Для задачи select ng-repeat я использовал следующий <select name = "sometext" size = "20" style = "width: 200px" ng-model = "selector"> <option value = "" selected hidden> </ option> <option ng-repeat = "список имен в именах"> {{список имен}} </option> </select>