聊天應用程序 - 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 - 不顯示聊天和聊天記錄

回答

相關問題