Question

我有一个聊天页面的骨架，但我遇到了将它们捆绑在一起的问题。我想要做的是在用户点击发送时将消息发送到服务器，并且还显示每3秒更新一次的消息。任何见解，提示或一般性评论都将非常感激。

立即提出问题：

当我抓取时，我追加<ul class="messages"></ul>但不想重新收录我已经提取的消息。
确保我的chatSend工作正常但是如果我运行chatSend，然后是chatFetch，我就不会检索我发送的邮件。

var input1 = document.getElementById('input1'), sendbutton =     document.getElementById('sendbutton');

function IsEmpty(){ 
if (input1.value){
sendbutton.removeAttribute('disabled');
} else {
sendbutton.setAttribute('disabled', '');
 }
}

input1.onkeyup = IsEmpty;


function chatFetch(){
  $.ajax({
      url: "https://api.parse.com/1/classes/chats",
      dataType: "json",
      method: "GET",
      success: function(data){

            $(".messages").clear();

            for(var key in data) {
                for(var i in data[key]){
                  console.log(data[key][i])
                  $(".messages").append("<li>"+data[key][i].text+"</li>");
                }
            }    

      }
  })
}

function chatSend(){

$.ajax({
       type: "POST",
       url: "https://api.parse.com/1/classes/chats",
       data: JSON.stringify({text: $('input1.draft').val()}), 
       success:function(message){


       }
  })
}



chatFetch();
$("#sendbutton").on('click',chatSend());

Answer 1

这似乎是Knockout.js的一个非常好的项目，特别是如果你想确保你没有重新附加你已发送的消息。由于图书馆在很大程度上意味着这种事情，我认为充分利用图书馆是有意义的。因此，假设您的API已经负责限制返回的消息数量，搜索正确的消息等，并严格关注UI。我们可以从聊天消息的Javascript视图模型开始......

function IM(msg) {
    var self = this;

    self.username = ko.observable();
    self.message = ko.observable();
    self.timestamp = ko.observable();
}

这需要一些自由，并假设您返回一个IM对象，该对象具有发送消息的用户的名称，内容以及消息的时间戳。可能没有太多希望你能访问这些数据元素，对吧？转到封装IM的大视图模型......

function vm() {
    var self = this;

    self.messages = ko.observableArray([]);
    self.message = ko.observable(new IM());

    self.setup = function () {
        self.chatFetch();

        self.message().username([user current username] || '');            
    };

    self.chatFetch = function () {
        $.getJSON("https://api.parse.com/1/classes/chats", function(results){
            for(var key in data) {
                // parse your incoming data to get whatever elements you
                // can matching the IM view model here then assign it as
                // per these examples as closely as possible

                var im = new IM();

                im.username(data[key][i].username || '');
                im.message(data[key][i].message || '');
                im.timestamp(data[key][i].message || '');

                // the ([JSON data] || '') defaults the property to an
                // empty strings so it fails gracefully when no data is
                // available to assign to it

                self.messages.push(im);
            }
        });
    };
}

好吧，所以我们有Javascript模型，它们将通过绑定更新屏幕（稍微更多），我们正在获取和填充数据。但是我们如何更新和发送即时消息？那么，请记住self.message对象？我们现在就开始使用它。

function vm() {

    // ... our setup and initial get code

    self.chatSend = function () {
        var data = { 
            'user': self.message().username(),
            'text': self.message().message(),
            'time': new Date() 
        };

        $.post("https://api.parse.com/1/classes/chats", data, function(result) {
            // do whatever you want with the results, if anything
        });

        // now we update our current messages and load new ones

        self.chatFetch();
    };
}

好的，那么我们如何跟踪所有这些？通过绑定的魔力。嗯，这不是魔术，它是Knockout.js中非常强烈的Javascript，它可以监听更改并相应地更新元素，但是您不必担心这一点。你可以担心你的HTML应该是这样的......

<div id="chat">
    <ul data-bind="foreach: messages">
        <li>
            <span data-bind="text: username"></span> : 
            <span data-bind="text: message"></span> [ 
            <span data-bind="text: timestamp"></span> ]
        </li>
    </ul>        
</div>
<div id="chatInput">
    <input data-bind="value: message" type="text" placeholder="message..." />
    <button data-bind="click: $root.chatSend()">Send</button>
<div>

现在，为了填充绑定并保持更新的最后一步，请调用您的视图模型及其方法......

$(document).ready(function () {
    var imVM = new vm();

    // perform your initial search and setup
    imVM.setup();

    // apply the bindings and hook it all together
    ko.applyBindings(imVM.messages, $('#chat')[0]);
    ko.applyBindings(imVM.message, $('#chatInput')[0]);

    // and now update the form every three seconds
    setInterval(function() { imVM.chatFetch(); }, 3000);
});

所以这应该可以让你在HTML页面的聊天系统上获得相当不错的开端。我将验证，造型和美化作为练习留给程序员......

有问题将基本的javascript聊天页面捆绑在一起

1 个答案: