Javascript socket.io，带角度不'；不要立即显示消息_Javascript_Angularjs_Node.js_Socket.io

Javascript socket.io，带角度不'；不要立即显示消息

javascript angularjs node.js socket.io

Javascript socket.io，带角度不'；不要立即显示消息,javascript,angularjs,node.js,socket.io,Javascript,Angularjs,Node.js,Socket.io,我正在尝试使用socket.io和Angular创建Instance message应用程序（聊天）。我有两个文件：index.html和index.js，如下所示。聊天效果很好，当我按下“发送”按钮时，我在聊天窗口中看不到消息。我只在用鼠标光标按下输入文本字段时看到消息。。。我做错了什么此外，我还将标记视为文本的一部分。我希望这个标签是一个html标签，而不是一个文本字符串谢谢 index.html <html> <head> <title>

我正在尝试使用socket.io和Angular创建Instance message应用程序（聊天）。我有两个文件：index.html和index.js，如下所示。聊天效果很好，当我按下“发送”按钮时，我在聊天窗口中看不到消息。我只在用鼠标光标按下输入文本字段时看到消息。。。我做错了什么

此外，我还将标记

视为文本的一部分。我希望这个标签是一个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>

首先，消息延迟。查看聊天信息处理程序：

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

与

最后将聊天信息处理程序更改为：

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

这就可以了。

问题是，您正在使用

index.html

中的

socket.on

，它不在angularjs应用程序范围内，并且不会监视该方法调用

为了避免这样的问题，您可以这样使用

socket.on（'chat message'，函数（msg）{
$scope.$apply（函数（）{
...
}
});

或者更好地使用完全附加到

$scope

的方法，而您不需要调用其他方法

//在应用程序的顶级模块中
角度.module（'myApp'[
“btford.socket io”，
“myApp.MyCtrl”
]).
工厂（'mySocket'，函数（socketFactory）{
返回socketFactory（）；
}).
控制器（'MyCtrl'，函数（mySocket）{
// ...
});

检查

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

{{ 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);
});