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

Having issues tying together basic javascript chat page

本文关键字：javascript 聊天 在一起 有问题      更新时间：2023-09-26

我有一个聊天页面的骨架，但我有问题把它绑在一起。我要做的是有消息发送到服务器每当用户点击发送，也为显示每3秒更新的消息。任何见解、提示或一般性评论都将不胜感激。

当前问题:

  1. 当我取回时，我附加了<ul class="messages"></ul>，但不想重新附加我已经取回的消息

  2. 确保我的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());

对于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页面上的聊天系统。我将把验证、样式化和美化留给程序员作为练习……

相关文章：