聊天应用程序 - Socket.IO/Angular/MongoDB - 不显示聊天和聊天记录

我创建了一个简单的聊天应用程序，并且没有显示聊天和聊天记录。以下是代码。请指教。聊天应用程序 - Socket.IO/Angular/MongoDB - 不显示聊天和聊天记录

视图（的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'); 
    }); 
});

来源

2016-08-14 Calista Woon

通常更换msgs，你不直接在控制器或指令调用$消化（）。相反，你应该调用$ apply（）（通常来自一个指令），这将强制$ digest（）。 – Gary

尝试这种情况：

创建另一个阵列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>

来源

2016-08-14 13:38:32

问题仍然存在。聊天程序仍不会显示聊天内容。无论如何，谢谢你的回答。 –

当你执行'console.log'时，你能看到控制台中的消息吗？ –

是的，当我执行console.log时，我可以在两个套接字的控制台中看到两个套接字（模拟聊天）的消息。这是[控制台其中一个控制台的屏幕截图]（https://drive.google.com/file/d/0B46YlA7HVz4-Vmw2anE3elNWRnM/view?usp=sharing） –

聊天应用程序 - Socket.IO/Angular/MongoDB - 不显示聊天和聊天记录

回答

相关问题