-3
app.js
'use strict';
/* App Module */
var springChat = angular.module('springChat', ['springChat.controllers',
'springChat.services',
'springChat.directives']);
contrillers.js
'use strict';
/* Controllers */
angular.module('springChat.controllers', ['toaster'])
\t .controller('ChatController', ['$scope', '$location', '$interval', 'toaster', 'ChatSocket', function($scope, $location, $interval, toaster, chatSocket) {
\t \t
\t \t var typing = undefined;
\t \t
\t \t $scope.from = '';
\t \t $scope.sendTo = 'everyone';
\t \t $scope.participants = [];
\t \t $scope.messages = [];
\t \t $scope.newMessage = '';
\t \t
\t \t $scope.sendMessage = function() {
\t \t \t var destination = "/app/chat";
\t \t \t
\t \t \t if($scope.sendTo != "everyone") {
\t \t \t \t destination = "/app/private." + $scope.sendTo;
\t \t \t \t $scope.messages.unshift({message: $scope.newMessage, from: 'you', priv: true, to: $scope.sendTo});
\t \t \t }
\t \t \t
\t \t \t chatSocket.send(destination, {}, JSON.stringify({message: $scope.newMessage}));
\t \t \t $scope.newMessage = '';
\t \t };
\t \t
\t \t $scope.startTyping = function() {
\t \t \t // Don't send notification if we are still typing or we are typing a private message
\t if (angular.isDefined(typing) || $scope.sendTo != "everyone") return;
\t
\t typing = $interval(function() {
\t $scope.stopTyping();
\t }, 500);
\t
\t chatSocket.send("/topic/chat.typing", {}, JSON.stringify({from: $scope.from, typing: true}));
\t \t };
\t \t
\t \t $scope.stopTyping = function() {
\t \t \t if (angular.isDefined(typing)) {
\t \t $interval.cancel(typing);
\t \t typing = undefined;
\t \t
\t \t chatSocket.send("/topic/chat.typing", {}, JSON.stringify({from: $scope.from, typing: false}));
\t \t \t }
\t \t };
\t \t
\t \t $scope.privateSending = function(from) {
\t \t \t \t $scope.sendTo = (from != $scope.sendTo) ? from : 'everyone';
\t \t };
\t \t \t
\t \t var initStompClient = function() {
\t \t \t chatSocket.init('/ws');
\t \t \t
\t \t \t chatSocket.connect(function(frame) {
\t \t \t \t
\t \t \t \t $scope.from = frame.headers['user-name'];
\t \t \t \t chatSocket.subscribe("/app/participants", function(message) {
\t \t \t \t \t $scope.participants = JSON.parse(message.body);
\t \t \t \t });
\t \t \t \t
\t \t \t \t chatSocket.subscribe("/topic/chat.login", function(message) {
\t \t \t \t \t $scope.participants.unshift({from: JSON.parse(message.body).from, typing : false});
\t \t \t \t });
\t \t \t
\t \t \t \t chatSocket.subscribe("/topic/chat.logout", function(message) {
\t \t \t \t \t var from = JSON.parse(message.body).from;
\t \t \t \t \t for(var index in $scope.participants) {
\t \t \t \t \t \t if($scope.participants[index].from == from) {
\t \t \t \t \t \t \t $scope.participants.splice(index, 1);
\t \t \t \t \t \t }
\t \t \t \t \t }
\t \t });
\t \t \t
\t \t \t \t chatSocket.subscribe("/topic/chat.typing", function(message) {
\t \t \t \t \t var parsed = JSON.parse(message.body);
\t \t \t \t \t if(parsed.from == $scope.from) return;
\t \t \t \t \t \t \t \t \t
\t \t \t \t \t for(var index in $scope.participants) {
\t \t \t \t \t \t var participant = $scope.participants[index];
\t \t \t \t \t \t
\t \t \t \t \t \t if(participant.from == parsed.from) {
\t \t \t \t \t \t \t $scope.participants[index].typing = parsed.typing;
\t \t \t \t \t \t }
\t \t \t \t \t }
\t \t \t \t });
\t \t \t
\t \t \t \t chatSocket.subscribe("/topic/message", function(message) {
\t \t \t \t \t $scope.messages.unshift(JSON.parse(message.body));
\t \t });
\t \t \t \t
\t \t \t \t chatSocket.subscribe("/user/exchange/amq.direct/message", function(message) {
\t \t \t \t \t var parsed = JSON.parse(message.body);
\t \t \t \t \t parsed.priv = true;
\t \t \t \t \t $scope.messages.unshift(parsed);
\t \t });
\t \t \t \t
\t \t \t \t chatSocket.subscribe("/user/exchange/amq.direct/errors", function(message) {
\t \t \t \t \t toaster.pop('error', "Error", message.body);
\t \t });
\t \t
\t \t \t }, function(error) {
\t \t \t \t toaster.pop('error', 'Error', 'Connection error ' + error);
\t \t \t \t
\t \t });
\t \t };
\t \t
\t \t initStompClient();
\t }]);
\t
services.js
'use strict';
/* Services */
angular.module('springChat.services', [])
\t .factory('ChatSocket', ['$rootScope', function($rootScope) {
\t \t \t var stompClient;
\t \t \t
\t \t \t var wrappedSocket = {
\t \t \t \t \t
\t \t \t \t \t init: function(url) {
\t \t \t \t \t \t stompClient = Stomp.over(new SockJS(url));
\t \t \t \t \t },
\t \t \t \t \t connect: function(successCallback, errorCallback) {
\t \t \t \t \t \t
\t \t \t \t \t \t stompClient.connect({}, function(frame) {
\t \t \t \t \t \t \t $rootScope.$apply(function() {
\t \t \t \t \t \t \t \t successCallback(frame);
\t \t \t \t \t \t \t });
\t \t \t \t \t \t }, function(error) {
\t \t \t \t \t \t \t $rootScope.$apply(function(){
\t \t \t \t \t \t \t \t errorCallback(error);
\t \t \t \t \t \t \t });
\t \t \t \t });
\t \t \t \t \t },
\t \t \t \t \t subscribe : function(destination, callback) {
\t \t \t \t \t \t stompClient.subscribe(destination, function(message) {
\t \t \t \t \t \t \t $rootScope.$apply(function(){
\t \t \t \t \t \t \t \t callback(message);
\t \t \t \t \t \t \t });
\t \t \t \t }); \t
\t \t \t \t \t },
\t \t \t \t \t send: function(destination, headers, object) {
\t \t \t \t \t \t stompClient.send(destination, headers, object);
\t \t \t \t \t }
\t \t \t }
\t \t \t
\t \t \t return wrappedSocket;
\t \t
\t }]);
directives.js
/* Directives */
angular.module('springChat.directives', [])
\t .directive('printMessage', function() {
\t return {
\t \t restrict: 'A',
\t template: '<span ng-show="message.priv">[private] </span><strong>{{message.from}}<span ng-show="message.to"> -> {{message.to}}</span>:</strong> {{message.message}}<br/>'
\t
\t };
});<html lang="en" ng-app="springChat">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Chat WebSocket</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<spring:url value="/resources/common/js/sockjs-0.3.4.js" var="js1" />
\t <spring:url value="/resources/common/js/stomp.js" var="js2" />
\t <spring:url value="/resources/common/js/chat.js" var="js3" />
\t <spring:url value="/resources/common/js/app.js" var="js4" />
\t <spring:url value="/resources/common/js/controllers.js" var="js5" />
\t <spring:url value="/resources/common/js/directives.js" var="js6" />
\t <spring:url value="/resources/common/js/jquery-3.0.0.min.js" var="js7" />
\t <spring:url value="/resources/common/js/angular-animate.min.js" var="js9" />
\t <spring:url value="/resources/common/js/toaster.js" var="js10" />
\t <spring:url value="/resources/common/js/scrollglue.js" var="js11" />
\t <spring:url value="/resources/common/js/sockjs.min.js" var="js12" />
\t <spring:url value="/resources/common/js/stomp.min.js" var="js13" />
\t
\t <spring:url value="/resources/common/css/pages/bootstrap.min.css" var="css1" />
\t <spring:url value="/resources/common/css/flat-ui.css" var="css2" />
\t <spring:url value="/resources/common/css/toaster.css" var="css3" />
\t <spring:url value="/resources/common/css/bootstrap.min.css" var="cs" />
\t <spring:url value="/resources/common/css/chat.css" var="css4" />
\t
\t <script src="${js}"></script>
\t <script src="${js1}"></script>
\t <script src="${js2}"></script>
\t <script src="${js3}"></script> \t
\t <script src="${js4}"></script>
\t <script src="${js5}"></script>
\t <script src="${js6}"></script>
\t <script src="${js7}"></script>
\t <script src="${js8}"></script>
\t <script src="${js9}"></script> \t
\t <script src="${js10}"></script>
\t <script src="${js11}"></script>
\t <script src="${js12}"></script>
\t <script src="${js13}"></script>
\t
\t <link href="${cs}" rel="stylesheet">
\t <link href="${css1}" rel="stylesheet">
\t <link href="${css2}" rel="stylesheet">
\t <link href="${css3}" rel="stylesheet">
\t <link href="${css4}" rel="stylesheet">
\t
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var typing = false;
var timeout = undefined;
var typingDelayMillis = 500;
var user = document.getElementById('from').textContent;
function timeoutFunction() {
typing = false;
$.ajax({
type: "GET",
url: "typing",
data : {
\t user_name: user
\t \t \t \t },
\t \t \t \t datatype: 'json',
\t \t \t \t
\t \t \t \t success : function(user_name) {
\t \t \t \t \t $('#typing').html("");
\t \t \t \t }
\t \t \t });
}
var delay = (function() {
var timer = 0;
return function(callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
});
$('#text').keyup(function(e) {
if (typing === false && $("#text").is(":focus")) {
delay(function() {
timeoutFunction();
}, typingDelayMillis);
typing = true;
$.ajax({
type: "GET",
url: "typing",
data : {
\t user_name:user
\t \t \t \t },
\t \t \t \t datatype: 'json',
\t \t \t \t success : function(user_name) {
\t \t \t \t \t $('#typing').html(user_name);
\t \t \t \t }
\t \t \t });
}
});
$('#text').on("blur", function() {
clearTimeout(timeout);
timeout = setTimeout(timeoutFunction, typingDelayMillis);
})
});
/* var typingTimer;
var doneTypingInterval = 10;
var finaldoneTypingInterval = 500;
var oldData = $("#typing").html();
$(document).ready(function() {
\t var typingTimer;
\t var doneTypingInterval = 10;
\t var finaldoneTypingInterval = 500;
\t var oldData = $("#typing").html();
\t
$('#text').keydown(function() {
clearTimeout(typingTimer);
if ($('#text').val()) {
typingTimer = setTimeout(function() {
$("#typing").html('Typing...');
}, doneTypingInterval);
}
});
});
$(document).ready(function() {
\t var typingTimer;
\t var doneTypingInterval = 10;
\t var finaldoneTypingInterval = 500;
\t var oldData = $("#typing").html();
\t $('#text').keyup(function() {
clearTimeout(typingTimer);
typingTimer = setTimeout(function() {
$("#typing").html(oldData);
}, finaldoneTypingInterval);
});
});*/
/* var timer = 0;
function reduceTimer(){
timer = timer - 1;
isTyping(true);
}
function isTyping(val){
if(val == 'true'){
var user= document.getElementById('from').textContent;
document.getElementById('typing').innerHTML = (user + " is typing...");
}else{
if(timer <= 0){
document.getElementById('typing').innerHTML = "";
}else{
setTimeout("reduceTimer();",500);
}
}
}*/
</script>
</head>
<body onload="disconnect()">
<div class="container" ng-controller="ChatController">
\t \t \t <div class="row">
\t \t \t \t <nav class="navbar navbar-inverse navbar-embossed" role="navigation">
\t \t <div class="collapse navbar-collapse" id="navbar-collapse-01"> \t \t
\t \t <h3>Welcome <i id="from" class="username" value="${username}">${username}</i>
\t \t <ul class="nav navbar-nav navbar-right"> \t \t
\t \t <li class="dropdown-toggle"><a id="connect" onclick="connect();">CONNECT</a></li>
\t \t <li class="dropdown-toggle"><a id="disconnect" style="visibility: hidden" onclick="disconnect();">DISCONNECT</a></li>
\t \t </ul></h3>
\t \t </div><!-- /.navbar-collapse -->
\t \t </nav><!-- /navbar -->
\t \t \t </div>
\t <div class="row">
\t \t <div class="col-xs-4">
\t \t \t <h4>Participants</h4>
\t \t \t <div id="list" class="share"> \t \t \t \t \t \t
\t \t \t \t <ul ng-repeat="participant in participants">
\t \t \t \t <small print-message></small>
\t \t \t <a href=""><p id="participant">${user}</p></a>
\t \t \t \t \t <li> \t \t \t \t \t
\t \t \t \t \t \t <span class="input-icon fui-new" ng-show="participant.typing"></span>
\t \t \t \t \t \t <span class="input-icon fui-user" ng-show="!participant.typing"></span>
\t \t \t \t \t \t <a href="" ng-click="privateSending(participant.from)"></a>
\t \t \t \t \t </li>
\t \t \t \t </ul>
\t \t \t \t \t </div>
\t \t </div>
\t \t <div class="col-xs-8 chat-box">
\t \t \t <h4>Messages</h4>
\t \t \t <div id="scroll" style="height:400px;width:975px;border:solid 2px white;overflow:scroll;overflow-x:hidden;overflow-y:scroll;">
\t \t \t \t \t <small print-message></small>
\t \t \t <p id="response"></p>
\t \t \t <div id="chatArea" style="width: 600px; height: 300px; overflow: auto">
\t \t \t \t </div>
\t \t </div>
\t </div>
<!-- <div class="row">
\t \t \t <div class="form-group">
\t \t \t <span><small>You will send this message to <strong>{{sendTo}}</strong> (click a participant name to send a private message)</small></span>
\t \t \t \t <input id="newMessageInput" type="text" class="form-control" placeholder="Write your message and hit enter..." ng-model="newMessage" ng-keyup="$event.keyCode == 13 ? sendMessage() : startTyping()"/>
\t \t \t \t </div> -->
\t </div>
\t
\t \t <div id="conversationDiv">
\t \t <p class="content"></p>
\t \t <div id="typing"></div>
\t \t <span><small>You will send this message to <strong>{{sendTo}}</strong> (click a participant name to send a private message)</small></span>
\t \t \t <input type="text" id="text" name="message" ng-model="newMessage" placeholder="Type Message ..." class="form-control">
\t \t <div> <span class="input-group-btn">
\t <button type="submit" id="sendMessage" class="btn btn-success btn-flat" onclick="sendMessage();">Send</button>
</span></div>
<!-- <label>
<textarea onkeypress="isTyping('true'); timer=5;" onkeyup="isTyping('false')" name="textarea" id="textarea" cols="45" rows="5"></textarea>
</label>
<div id="typing_on">No one is typing at the moment.</div> -->
</div>
</div>
</header>
</body>
</html>當我嘗試運行我的聊天應用它表明，
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/ $injector/modulerr?p0=springChat&p1=Erro…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A18%3A179)(…)(anonymous function) @ angular.js:38(anonymous function) @ angular.js:4138r @ angular.js:323 g @angular.js:323
實際控制器在哪裏？有一個名爲「springChat」的模塊，我們沒有看到它是如何使用的 – Dalorzo
請提供代碼示例，您在哪裏得到此錯誤 – Rokas