Where to take the example of a chat on meteor.js and react.js?

1

I want to make a simple chat that would poom based on it to make a chat with WEBRTC.
Where to take the example of a chat on meteor.js and react.js.
I understand that would be at a lower level to work with websockets, to work with DDP protocol. But help is practically nothing. And those examples that they come across without react.js.

2

IIUC, you want to make a toy chat app with Meteor and React over DDP. Try implementing this component structure: ReactRouter > ChatContainer > [ChatList > [ChatElements], Chat Input].

In the ChatContainer, use createContainer from react-meteor-data to subscribe to your chatroom publication, which you define on the server, which returns a limited, sorted query of your chat collection. Index the sort field for high performance. In the container, return an array of these sorted chat elements (sort on the client, too), which will be available as props in your ChatList. In the ChatList render implementation, use the <array>.map method to return a list of ChatElement jsx components.

You should end up with a reactive chat room. You can then expand on this basic template to implement things like different rooms, security, private rooms, etc.

2 Likes
3

For a simple text chat, you won’t need WebRTC. But if you really want to dig into WebRTC, you could have a look at RocketChat. It’s based on Meteor and uses WebRTC for video chat.

2 Likes
4

sorted query of your chat collection

I do not want messages to be stored in the database I need simple server without database.

5

IIRC, publish functions are not coupled to collections. In that case you can use the publish functions and avoid the merge box manually by using some underscored functions (this._added ?). Use this.added, this.changed, and this.removed if you don’t mind having the merge box. You can look up “getting around the meteor merge box”. Basically, the merge box is a big cache that is used to figure out how to combine various subscriptions together and diff data. IIRC, Rocket.Chat basically implemented this workaround so that you don’t have to.

1 Like
6

Ok, for example:

Server code:

export let chatRoom = ['test1', 'test2'];
Meteor.publish('ws', function wsPub() { return chatRoom; });
Meteor.methods({
    'addMsg'(text) {  chatRoom.push(text);  }
});

and client code:

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

but I do not understand what I wrote is not so in the createContainer?

7

Yeah your server code won’t really work. You need a reactive data source to capture the addition/removal of messages. Otherwise, the user will have to force-resub everytime they want to get a new message. You also don’t want to cache your messages on the server, because that will run into scaling problems very quickly. You want ephemeral message pub/sub.

Your container doesn’t really make sense since you are not returning your data. Remember, the client-side can store the messages from the ‘ws’ publication into a client-side collection. Just use that collection as your reactive data source and query for your chat messages in your container, so you can return them to your Rtc component.

I suggest reading the docs fully, and getting used to Methods, Publish, and Subscribe.

1 Like