实时从 trello 等应用程序中检索消息 - Slack答案

【问题标题】：Retrieve messages from app like trello in real time - Slack实时从 trello 等应用程序中检索消息 - Slack
【发布时间】：2017-09-05 04:47:51
【问题描述】：

我正在使用 slack API 从机器人应用程序中检索消息（例如 slack.com 中的 trello）。我使用了这个 API https://slack.com/api/im.history。但我的目标是从该机器人应用程序实时获取消息到我的应用程序，而无需重新加载页面。我已经阅读了RTM API docs 和The events API。我不知道该怎么做。我该怎么办？

这里是 server/main.js ：

import { Meteor } from 'meteor/meteor';
import { HTTP } from 'meteor/http';

import '../imports/api/messages.js';

Meteor.startup(() => {
  Meteor.methods({
    checkSlack() {
      this.unblock();
      try {
        var result = HTTP.call('GET','https://slack.com/api/im.history', {
          params: {
            token: 'xxxx-xxxxxxxxxx-xxxxxxxxxxxx-xxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxx',
            channel: 'xxxxxxxxxx'
          }
        });
        return result.data.messages;
      } catch (error) {
        // Got a network error, timeout, or HTTP error in the 400 or 500 range.
        return error.message;
      }
    }
  });
});

imports/api/messages.js：

import { Mongo } from 'meteor/mongo';

export const Messages = new Mongo.Collection('messages');

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

imports/ui/Message.jsx：

import React, { Component, PropTypes } from 'react';

export default class Message extends Component {
  render() {
    return (
      <li>{this.props.message.text}</li>
    );
  }
}

Message.propTypes = {
  message: PropTypes.object.isRequired,
};

导入/ui/App.jsx：

import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';

import { Messages } from '../api/messages.js';

import Message from './Message.jsx';

const _ = require('lodash');

// App component - represents the whole app
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      messages: [],
    };
    this.renderMessages = this.renderMessages.bind(this);
    this.getMessages = this.getMessages.bind(this);
    this.saveMessages = this.saveMessages.bind(this);
  }

  componentDidMount() {
    this.getMessages();
  }

  getMessages() {
     const handle = this;
     Meteor.call('checkSlack',function(err, response) {
        if(err){
          console.log('error');
        }
        else {
          handle.setState({
            messages: response,
          });
        }
     });
  };

  renderMessages() {
     const messages = Messages.find({}).fetch();
     return messages.map((message, index) => (
       <Message key={index} message={message} />
     ));
 }

  saveMessages(){    
    const messages = this.state.messages;
    const msgs = Messages.find({}).fetch();
    var addedMsgs = _.differenceBy(messages,msgs, 'ts');
     _.map(addedMsgs, (message) =>
      Messages.insert(message)
    );
  }

  render() {
    return (
      <div className="container">
        <header>
          <h1>Messages List</h1>
        </header>
        <button onClick={this.saveMessages}>Save</button>
        {this.renderMessages()}
      </div>
    );
  }

}

App.propTypes = {
  messages: PropTypes.array.isRequired,
};

export default createContainer(() => {
  Meteor.subscribe('messages');
  return {
    messages: Messages.find({}).fetch(),
  };
}, App);

客户端/main.jsx：

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';

import App from '../imports/ui/App.jsx';

Meteor.startup(() => {
  render(<App />, document.getElementById('render-target'));
});

客户端/main.html：

<head>
  <title>App</title>
</head>

<body>
  <div id="render-target"></div>
</body>

【问题讨论】：

标签： reactjs meteor

【解决方案1】：

如果您可以从 API 获取 Slack 事件到 Meteor 服务器，只需将它们插入到 Mongo 集合中，然后设置您的 Meteor 客户端以订阅数据库，您将获得实时提要到你的用户界面

更新

感谢您发布您的代码，现在我可以看到发生了什么。

1) 在您的服务器代码中，您正在这样做：

Meteor.startup(() => {
  Meteor.methods({

它可能工作正常，但这些是独立的东西。 Meteor 方法通常存在于另一个文件中，仅用于声明您的方法。

2) 您只能从 UI 将消息保存到集合中。当您在服务器方法中获取它们时需要将它们插入 - 然后您的发布和订阅将起作用

3) 去掉componentDidMount中对checkSlack的调用，放到服务器启动中。

4) 您对 slack 的 http 请求只会检索历史记录，您需要在这里变得更复杂。阅读https://api.slack.com/rtm，了解如何打开套接字并获取实时馈送

【讨论】：

在它们出现在 UI 中后，我已经将它们插入到集合中。 Subribe不会有所作为。在 imports/api/messages.js 中导出 const Messages = new Mongo.Collection('messages'); if (Meteor.isServer) { // 这段代码只运行在服务器 Meteor.publish('messages', function messagesPublication() { return Messages.find(); });在 ui/App.jsx 中： export default createContainer(() => { Meteor.subscribe('messages'); return { messages: Messages.find({}).fetch(), }; }, App);跨度>
那么问题出在哪里？
我想实时获取消息，这意味着当我向机器人应用程序（如 trello）发送消息时，它会发送到我的 UI 而无需重新加载页面。
如果您的发布/订阅设置正确，它应该这样做。您评论中的代码不可读 - 您能否编辑您的问题并将其放入其中，并使用 {} 按钮格式化该块。谢谢