聊天应用程序 - Socket.IO/Angular/MongoDB - 聊天和聊天历史不显示
Posted
技术标签:
【中文标题】聊天应用程序 - Socket.IO/Angular/MongoDB - 聊天和聊天历史不显示【英文标题】：Chat app - Socket.IO/Angular/MongoDB - Chat and chat history not displayed 【发布时间】：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()。 【参考方案1】：试试这个：
创建另一个数组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 模板中，将 msgs 替换为 allMsgs
<div id="chatWrap">
<ul>
<li ng-repeat="msg in allMsgs">msg.text</li>
</ul>
</div>
【讨论】：
问题依然存在。聊天应用程序上仍未显示聊天内容。无论如何，谢谢你的回答。 当你console.log时你能看到控制台中的消息吗？
是的，当我执行console.log 时，我可以在两个套接字的控制台中看到两个套接字的消息（用于模拟聊天）。这是screenshot of one of the consoles
根据截图是第19行吗？另外，根据截图，data中没有text字段。您能否在 HTML 模板中尝试 msg 而不是 msg.text，看看是否可行。
第 19 行是新消息（“Hello world”和“Testing”）。第 19 行以上是来自 MongoDB 的消息（“你好，你好吗”等）。这是我尝试 msg 后发生的事情：- screenshot以上是关于聊天应用程序 - Socket.IO/Angular/MongoDB - 聊天和聊天历史不显示的主要内容，如果未能解决你的问题，请参考以下文章