Question

我创建了一个简单的聊天应用，并且未显示聊天和聊天记录。以下是代码。请指教。

查看（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');
    });
});

Answer 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>

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

1 个答案: