javascript - 如何在没有 meteor.js 和 react.js 数据库的情况下编写简单的聊天?

标签 javascript arrays reactjs meteor websocket

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

这是我能想象到的代码示例。 服务器代码:

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;
});

最佳答案

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

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(消息数组)发生更改时,您不会告诉客户端。

我还建议重命名这些东西,使其更加详细和清晰:)

关于javascript - 如何在没有 meteor.js 和 react.js 数据库的情况下编写简单的聊天?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42193511/

相关文章:

javascript - React Native FBSDK 处理身份验证拒绝

javascript - 尝试使用 Google 脚本从 Google 表格中获取数据并显示在具有水平标签的网页上

javascript - 检查站点是否通过 AJAX 使用 Basic Auth

arrays - 在 shell 脚本中使用用户输入填充动态数组

arrays - (Perl) 尝试使用简单数组编写 foreach 语句。对格式感到困惑

javascript - 通过多个元素的单个引用来 react : How to replace . querySelectorAll

reactjs - 服务器端渲染 react - 虚拟 DOM?

javascript - 在路由中的一个组件中调用函数

javascript - 如何使用 jquery 或 javascript 获取文件的扩展名?

arrays - 以最少的移动次数对一组磁盘进行排序