Question

我正在尝试创建一个包含多个聊天室的应用程序。目前，其中一个房间通过发送和接收消息来工作。但是，当我路由和更改模板并尝试在另一个房间发送消息时，消息不会发送，但顶部的链接会发生变化？即 localhost：3000 / java？text = hi - 它表示邮件将缓存。

如何将消息发送到其他房间，存储在集合和显示中？这是我的代码： Client.js

// This code only runs on the client
    Meteor.subscribe("messages", {
    onReady: function () {
      scrollToBottom();
      autoScrollingIsActive = true;
    }
  });  


  /* helper code */
    Template.body.helpers({
    recentMessages: function () {
      return Messages.find({}, {sort: {createdAt: 1}});
    },
    /* unread message helper */
      thereAreUnreadMessages: function () {
      return thereAreUnreadMessages.get();
    }
  });

  /*chat window scrolling*/
  Template.message.onRendered(function () {
    if (autoScrollingIsActive) {
      scrollToBottom(250);
    } else {
      if (Meteor.user() && this.data.username !== Meteor.user().username) {
        thereAreUnreadMessages.set(true);
      }
    }
  });
Template.body.events({
"submit .new-message": function (event) {
  var text = event.target.text.value;

  Meteor.call("sendMessage", text);
    scrollToBottom(250);

  event.target.text.value = "";
  event.preventDefault();
},


/* scroll event */
  "scroll .message-window": function () {
  var howClose = 80;  // # pixels leeway to be considered "at Bottom"
  var messageWindow = $(".message-window");
  var scrollHeight = messageWindow.prop("scrollHeight");
  var scrollBottom = messageWindow.prop("scrollTop") + messageWindow.height();
  var atBottom = scrollBottom > (scrollHeight - howClose);
  autoScrollingIsActive = atBottom ? true : false;
  if (atBottom) {        // <--new
    thereAreUnreadMessages.set(false);
  }
},

 "click .more-messages": function () {
  scrollToBottom(500);
  thereAreUnreadMessages.set(false);
}
});

Template.footer.usercount = function () {
  return Meteor.users.find().count();
};

这是我的server.js

// This code only runs on the server
  Meteor.publish("messages", function () {
    return Messages.find();
  });

  // This code only runs on the server
  Meteor.publish("messages_java", function () {
    return MessagesJava.find();
  });

以下是“Java会议室”的模板代码：

    <template name="java">
<!--<h6>This is the Java template</h6>-->
<!--<p>*Put chatroom here*</p>-->
<div class="container">
    <header>
      <h1>ITHub Java Room</h1>
      {{> loginButtons}} 
    </header>

<!-- chat messages here -->
<!--  -->
    <ul class="message-window">
      {{#each recentMessagesJava}}
        {{> message}}
      {{/each}}
    </ul>
    <!-- more-messages button -->
    {{#momentum plugin="fade"}}
      {{#if thereAreUnreadMessages}}
        <button class="more-messages">New Messages &#x25BE;</button>
      {{/if}}
    {{/momentum}}

    <footer>
      {{#if currentUser}}
        <form class="new-message">
          <input type="text" name="text" placeholder="Add a message" autocomplete="off" />
        </form>
      {{/if}}
      <br />
    </footer>

    <hr />
<li class="message-java">
    <div class="username">{{username}}</div>
    <div class="message-text">{{messageText}}</div>
</li>

  </div>

Answer 1

您的模板不是body，而是java，所以要附加您需要通过Template.java.helpers添加的事件，如下所示：

Template.java.events({
"submit .new-message": function (event) {
  var text = event.target.text.value;

  Meteor.call("sendMessage", text);
    scrollToBottom(250);

  event.target.text.value = "";
  event.preventDefault();
},


/* scroll event */
  "scroll .message-window": function () {
  var howClose = 80;  // # pixels leeway to be considered "at Bottom"
  var messageWindow = $(".message-window");
  var scrollHeight = messageWindow.prop("scrollHeight");
  var scrollBottom = messageWindow.prop("scrollTop") + messageWindow.height();
  var atBottom = scrollBottom > (scrollHeight - howClose);
  autoScrollingIsActive = atBottom ? true : false;
  if (atBottom) {        // <--new
    thereAreUnreadMessages.set(false);
  }
},

 "click .more-messages": function () {
  scrollToBottom(500);
  thereAreUnreadMessages.set(false);
}
});

同样的事情是helpers。

流星聊天 - 多个房间

1 个答案: