【发布时间】：2016-12-20 21:44:00
【问题描述】：
我创建了一个简单的聊天应用程序，聊天和聊天记录不显示。以下是代码。请指教。
The image of the chat app I created
查看 (index.html)
<!DOCTYPE html>
<html ng-app="chatApp">
<head>
<title>Chat</title>
<link rel="stylesheet" href="foundation/css/foundation.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="socket.io/socket.io.js"></script>
<script src="main.js"></script>
</head>
<body>
<h1>Chat</h1>
<div ng-controller="ChatCtrl">
<div id="chatWrap">
<ul>
<li ng-repeat="msg in msgs">{{msg.text}}</li>
</ul>
</div>
<form ng-submit="sendMsg()">
<input type="text" ng-model="msg.text" /> </form>
</div>
</body>
</html>
AngularJS 控制器 (main.js)
var app = angular.module('chatApp', []);
app.factory('socket', function () {
var socket = io.connect('http://localhost:3000');
return socket;
});
app.controller('ChatCtrl', function ($scope, socket) {
$scope.msgs = [];
$scope.sendMsg = function () {
socket.emit('send msg', $scope.msg.text);
$scope.msg.text = '';
};
socket.on('get old messages', function (docsCallback) {
console.log(docsCallback);
$scope.msgs.push(docsCallback);
$scope.$digest();
});
socket.on('get msg', function (data) {
console.log(data);
$scope.msgs.push(data);
$scope.$digest();
});
});
服务器 (app.js)
var express = require('express')
, app = express()
, server = require('http').createServer(app)
, io = require('socket.io').listen(server)
, bodyParser = require('body-parser')
, mongoose = require('mongoose');
server.listen(3000);
mongoose.connect('mongodb://localhost/chatAppDB', function (err) {
if (err) throw err;
else console.log('connected');
});
var msgSchema = mongoose.Schema({
text: String
, time: {
type: Date
, default: Date.now
}
});
var Chat = mongoose.model("Messages", msgSchema);
app.use(express.static(__dirname + '/public'));
app.use(express.static(__dirname + '/bower_components'));
app.use(bodyParser.urlencoded({
extended: false
}));
app.use(bodyParser.urlencoded({
'extended': 'true'
}));
app.use(bodyParser.json());
app.use(bodyParser.json({
type: 'application/vnd.api+json'
}));
io.sockets.on('connection', function (socket) {
console.log('working');
Chat.find({}, function (err, docsCallback) {
console.log(docsCallback);
if (err) throw err;
console.log('Sending old messages');
socket.emit('get old messages', docsCallback);
});
socket.on('send msg', function (data) {
console.log(data);
var newMsg = new Chat({
text: data
});
newMsg.save(function (err) {
if (err) throw err;
else io.sockets.emit('get msg', data);
});
});
socket.on('disconnect', function () {
console.log('user disconnected');
});
});
【问题讨论】：
-
通常，您不会在控制器或指令中直接调用 $digest()。相反，您应该调用 $apply()（通常在指令中），这将强制执行 $digest()。
标签： angularjs node.js mongoose socket.io chat