2016-06-04 12 views
0

Ich möchte eine Instant Messaging App mit Socket.IO und AngularJS erstellen.Wie benutze socket.io mit AngularJS?

Der Befehl var socket = io(); bricht das AngularJS-Skript ab. Wenn ich diese Zeile lösche, funktioniert die AngularJS-Bindung und {{ message }} zeigt den erwarteten Wert der Nachrichtenvariablen an.

jedoch unterhalb der Code die Zeichenfolge zeigt „{{Nachricht}}“ auf meiner Seite:

<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> 
</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)); 
     return false; 
    } 
    socket.on('chat message', function(msg){ 
     $scope=$scope.message+'<li>'+ msg; 
    }); 
    }); 
</script> 
</body> 
</html> 
+3

Sie haben es vermisst, 'socket.io' JavaScript-Dateien zu HTML hinzuzufügen, so dass' socket.emit' und 'socket.on' Fehler ausgeben –

Antwort

2

Als Krzystof Safjanowski in seinem Kommentar sagte, es sieht aus wie Sie vergessen das WebSocket-Skript enthalten Datei in Ihrem HTML. Wenn Sie in der Konsole Ihres Browsers (Ctrl+Shift+J in Chrome und Firefox) suchen, sollten Sie die relevanten Fehler sehen.