【问题标题】:How to write a simple chat, without a database on meteor.js and react.js?如何写一个简单的聊天,没有meteor.js和react.js的数据库?
【发布时间】:2017-06-30 19:35:14
【问题描述】:

我想在meteor.js 上写一个简单的聊天,因此我不想将数据存储在database 中。 但是我从来没有发现如何在没有database 的情况下制作应用程序。

这是我可以想象的代码示例。 服务器代码:

export let ws = [{_id:'1', text:'test1'}, {_id:'2', text:'test2'}];
Meteor.publish('ws', function wsPub() { return ws; });
let ctr = 3;
Meteor.methods({
    'addMsg'(text) {  ws.push({_id:ctr+1, text:text});  }
});

和客户端代码:

import {ws} from '../api/model.js';

class Rtc extends Component {
  constructor(props) {
    super(props);
  }
  addMsg(e){
    e.preventDefault();
    Meteor.call('addMsg', this.refs.input.value);
  }
  render() {
    return (
      <div>
         {this.props.ws.map((item, i)=>{ 
           return(<span key={i._id}>{item.text}</span>); 
         })}
         <input type="text" ref="input" />
         <input type="submit" value="submit" onClick={this.addMsg.bind(this)}/>
       </div>
    );
  }
}
export default createContainer( () => {
  Meteor.subscribe('ws');
  return { ws: ws };
}, Rtc);

但我不明白我写的不是createContainer中的吗?

UPD:我更新了服务器代码,但 websockets 仍然无法正常工作:

Meteor.publish('ws', function wsPub() {
  let self = this;
  ws.forEach( (msg)=> {
    self.added( "msg", msg._id, msg.text );
  });
  self.ready();
  // return ws;
});

【问题讨论】:

  • 只是想知道,如果您不想要 Meteor 的 pub/sub 系统的优势,为什么要使用 Meteor?
  • @MasterAM 我喜欢 pub/sub 系统,但它存储在数据库中并不总是乏味,而且并不总是在 mongodb 中。有非常不同的案例和任务。在这里,我们假设现在不需要制作基础 vebrts,我正在尝试了解如何做到这一点。

标签: javascript arrays reactjs meteor websocket


【解决方案1】:

你认为行不通的。因为Meteor.publish 将光标返回到CollectionsCollectionarray。根据official documentation

发布函数可以返回一个 Collection.Cursor,在这种情况下,Meteor 会将该光标的文档发布到每个订阅的客户端。你也可以返回一个 Collection.Cursors 数组,在这种情况下 Meteor 会发布所有的游标。

同样,当您订阅发布时,它会将数据(作为与发布相同的集合的光标)本地存储在MiniMongo 中。因此,在 Meteor 中使用 pub-sub 在技术上无法实现没有数据库的聊天。

【讨论】:

  • 好的,我已经更新了代码,并返回了集合数组的服务器部分。但是我仍然看不到反应,并且发送消息后聊天没有更新:(
  • 这并不完全准确,因为返回游标只是发布数据的一种方式。您可以手动发送added 消息(和其他消息),甚至可以使用本地(内存中)收集服务器端(我认为我在我的一个扩展中使用了一个)。
  • @MasterAM 你可以回答或参考在这种情况下举一个简单的例子吗?
【解决方案2】:

如果您想控制通过发布发送的内容,请获取对“发布实例”(实际上是具有特定订阅的特定客户端)的引用并使用其add/change/remove 命令:

let messages = [];
let clients = [];
Meteor.publish('ws', function() {
    clients.push(this);
    _.each(messages, (message) => {this.added('msg', message._id, message);});
    this.ready();
});
Meteor.methods({
    addMsg(text) {
        let newMessage = {_id: Meteor.uuid(), text: text};
        messages.push(newMessage);
        _.each(clients, (client) => {client.added('msg', newMessage._id, newMessage);});
    }
});

关于您在更新中编写的代码:您发送string 函数added 需要一个文档(object)。此外,与上面的示例不同,您不会告诉客户端 ws(消息数组)何时更改。

我还建议将这些内容重命名为更加详细和清晰:)

【讨论】:

  • 好吧,我替换了服务器端代码,但不幸的是应用程序没有响应式地工作。也许我在客户端版本中做错了什么?
  • 我在这里添加的是如何让它响应式地工作。当消息数组发生变化时,您忽略了实际通知客户端。这样做的正确位置是在方法的主体中。
  • 当我向客户端发送消息时,它不会同时显示在其他客户端上。而且我不知道还能做什么才能让它发挥作用。因为服务器端代码正常,所以我认为客户端代码有问题。
  • 你写的代码永远不会工作,因为self.added( "msg", msg._id, msg.text )永远不会工作——你不能在added需要一个文档/对象的地方发送一个字符串(在第三个参数中) .假设你解决了这个问题,你需要做我上面所做的事情,并在发送消息时在每个订阅的客户端上调用 added
  • 我已经完成了这个答案中所写的内容。但是,如果一个客户端添加了其他客户端看不到此消息的聊天消息。 Аnd 我假设我在客户端代码的 createContainer 中写了一些东西。
猜你喜欢
  • 2018-05-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-02-09
  • 2012-05-06
  • 1970-01-01
  • 2020-07-05
相关资源
最近更新 更多