0
Ich erstellte eine einfache Chat-App und der Chat und Chat-Verlauf werden nicht angezeigt. Die folgenden sind die Codes. Bitte beraten.Chat-App - Socket.IO/Angular/MongoDB - Chat und Chat-Verlauf nicht angezeigt
The image of the chat app I created
anzeigen (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 Controller (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();
});
});
Server (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');
});
});
Normalerweise Sie rufen Sie nicht $ verdauen() direkt in Steuerungen oder in Richtlinien. Stattdessen sollten Sie $ apply() (normalerweise innerhalb einer Direktive) aufrufen, wodurch ein $ digest() erzwungen wird. – Gary