聊天应用程序 - Socket.IO/Angular/MongoDB - 不显示聊天和聊天记录
我创建了一个简单的聊天应用程序,并且没有显示聊天和聊天记录。以下是代码。请指教。聊天应用程序 - Socket.IO/Angular/MongoDB - 不显示聊天和聊天记录
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');
});
});
尝试这种情况:
创建另一个阵列allMsgs
,其存储所有消息,并定义msgs
作为对象类型{}
不是array []
。并打印来自allMsgs
阵列的所有消息。
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.allMsgs = docsCallback;
$scope.$digest();
});
socket.on('get msg', function (data) {
console.log(data);
$scope.allMsgs =data;
$scope.$digest();
});
});
在你的HTML模板,与allMsgs
<div id="chatWrap">
<ul>
<li ng-repeat="msg in allMsgs">{{msg.text}}</li>
</ul>
</div>
问题仍然存在。聊天程序仍不会显示聊天内容。无论如何,谢谢你的回答。 –
当你执行'console.log'时,你能看到控制台中的消息吗? –
是的,当我执行console.log时,我可以在两个套接字的控制台中看到两个套接字(模拟聊天)的消息。 这是[控制台其中一个控制台的屏幕截图](https://drive.google.com/file/d/0B46YlA7HVz4-Vmw2anE3elNWRnM/view?usp=sharing) –
通常更换
msgs
,你不直接在控制器或指令调用$消化()。相反,你应该调用$ apply()(通常来自一个指令),这将强制$ digest()。 – Gary