socket.io с Angular не отображается сообщение мгновенно

Я пытаюсь создать приложение сообщения instanse (чат) с помощью socket.io и Angular. У меня есть 2 файла: index.html и index.js, показанные ниже. чат отлично работает, если я нажму кнопку «Отправить», я не вижу сообщение в окне чата. Я только вижу сообщение как только я нажимаю текстовое поле ввода с курсором мыши ... Что я делаю неправильно?socket.io с Angular не отображается сообщение мгновенно

i дополнение, я также вижу тег < li> как часть текста. Я хочу, чтобы этот тег быть тег HTML, а не текстовая строка ...

Благодаря

index.html

<html> 
<head> 
    <title>My Chat</title> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="/socket.io/socket.io.js"></script> 
</head> 
<body> 
    <div ng-app="myApp" ng-controller="myCtrl"> 
    {{ message }} 
    <form > 
     <input autocomplete="off" ng-model="exampleText" type="text" /> 
     <button type='button' ng-click="submit()"> 
     Send 
     </button> 
    </form> 
    </div> 
    <script> 

    var app=angular.module("myApp", []); 
    var socket = io(); 
    app.controller("myCtrl", function($scope) { 
    $scope.message=''; 
    $scope.submit=function(){ 
     socket.emit('chat message', angular.copy($scope.exampleText)); 
     $scope.exampleText=''; 
     return false; 
    } 
    socket.on('chat message', function(msg){ 
     $scope.message=$scope.message+" <li> "+ msg; 
    }); 
    }); 

</script> 
</body> 
</html>

index.js

var express = require('express'); 
var app = express(); 
var http = require('http').Server(app); 
var io = require('socket.io')(http); 
app.use(express.static(__dirname + '/')); 
app.get('/', function(req, res){ 
    res.sendFile(__dirname + '/index.html'); 
}); 

io.on('connection', function(socket){ 
    console.log('a user connected'); 


    socket.on('chat message', function(msg){ 
     io.emit('chat message', msg); 
    }); 


    socket.on('disconnect', function(){ 
     console.log('user disconnected'); 
    }); 


}); 

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

источник

2016-06-04 Matoy

проверки https://github.com/btford/angular-socket-io –

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

socket.on('chat message', function(msg){ 
    $scope.message=$scope.message+" <li> "+ msg; 
});

- проблема здесь заключается в том, что сообщение обновление происходит вне сферы переваривать цикл. Попробуйте следующее:

socket.on('chat message', function(msg){ 
    $scope.$apply(function() { 
    $scope.message=$scope.message+" <li> "+ msg + "</li>"; 
    }); 
});

Далее, если вы хотите избавиться от метки «Ли» показ, вам нужно остановить строительство HTML в контроллере и отображать входящие сообщения непосредственно. Это может быть достигнуто путем создания «сообщения» массива сообщений. В макете HTML, заменить:

{{ message }}

<ul> 
    <li ng-repeat="message in messages">{{message}}</li> 
</ul>

затем заменить в контроллере

$scope.message='';

$scope.messages = [];

и, наконец, изменить обработчик сообщение чата до:

socket.on('chat message', function(msg){ 
    $scope.messages.push(msg); 
});

Это сделает трюк.

источник

2016-06-04 13:29:24

Проблема заключается в том, что вы используете socket.on от index.html, который находится за пределами области действия angularjs, и он не наблюдает за вызовами метода.

Чтобы избежать таких проблем, как, что вы можете использовать $scope.$apply как этого

socket.on('chat message', function(msg) { 
    $scope.$apply(function() { 
    ... 
    } 
});

Или лучшее использование angularjs component for socket.io, который полностью прикреплен к $scope и не вызывать дополнительные методы

// in the top-level module of the app 
angular.module('myApp', [ 
    'btford.socket-io', 
    'myApp.MyCtrl' 
]). 
factory('mySocket', function (socketFactory) { 
    return socketFactory(); 
}). 
controller('MyCtrl', function (mySocket) { 
    // ... 
});

источник

2016-06-04 13:44:58 gevorg

socket.io с Angular не отображается сообщение мгновенно

ответ

Смежные вопросы