Live Chat with Meteor and React

help
1

Hi, so I’m looking to build a live chat app with Meteor and React. I know how to fetch and send data from my MongoDB database, but I was wondering how should I build this live chat feature? In other words - how do I trigger a change on the client side when the database holding my messages between 2 users is updated? Polling the database every X seconds is a way but I highly doubt that that’s the way to go.

I came across this video, but here they use React mixins (~22:50) which seem to not be ideal today.

Would anyone be able to point me in the right direction on how I should go about this?

Thank you!

2

That video is quite a bit old. Meteor’s react-meteor-data package now has a useTracker hook and a withTracker HOC so mixins won’t be necessary.

As far as getting started with react and meteor, https://react-tutorial.meteor.com/ is a good resource to get started with. Once you are familiar with how react integrates with meteor, socialize:messaging could be of interest for the live chat.

3 Likes
3

Thank you, I will check this out. I’ve done quite a bit with Meteor/React but not this aspect specifically. I’ll check out how to use the useTracker hook with this.

4

We do a live chat just allowing ddp to update the clients when there are changes in the collection.

5

I did this some time ago. Basically, I made a collection with messages, filtered by the server on userid.
Then, clientside, I watched for changes in the collection:

allClacks.observe
    added: (docClacks) ->
        strMesssage = docClacks.message

(Called clacks, obviously, in reference to Sir Pratchett!)
and reacted accordingly… this worked like a charm.
Not sure how scalable this is, though…

regards,

Paul

6

Would you be able to elaborate on this? What libraries did you use for this?

7

Do you have any references to which I can see how you implemented it? I understand the concept but I’m not quite sure about its implementation. Where does this observe function come from?

8

Hi @ajaypillay ,

observe is just a callback you can recieve on any changes on the collection:

this way, if a document is added to the collection, you get “notified” by the callback that something happened. It is then up to you to decide what to do with the (added) document.

Clientside I just have a clacks.find({}) to recieve all the clacks for me.

regards,

Paul

1 Like
9

Feel free to log in to our demo site…

leo.10-8.com

dbrees, dbrees123
mthomas, mthomas123

Go to “officer dashboard” and you’ll see a messages section there. The code is very rudimentary (been like this for about 8 years) and like the other poster said it just tracks changes in a “messages” collection. Not sure how scalable, but our sites are all limited user sites.

1 Like
10

Here’s the whole code…

import { Meteor } from 'meteor/meteor';
import { SimpleSchema } from 'meteor/aldeed:simple-schema';

// Declare Messages Collection

class messagesCollection extends Mongo.Collection {
  insert(doc, callback) {
    const result = super.insert(doc, callback);
    return result;
  }

  update(selector, modifier) {
    const result = super.update(selector, modifier);
    return result;
  }

  remove(selector) {
    const result = super.remove(selector);
    return result;
  }
}

export const Messages = new messagesCollection('messages');

//ALLOWS

Messages.allow({
  insert: function (userId, doc) {
    return true;
  },

  update: function (userId, doc) {
    return true;
  },

  remove: function (userId, doc) {
    return true;
  }
});

Messages.schema = new SimpleSchema({

  userId: {
    type: String,
    regEx: SimpleSchema.RegEx.Id
  },

  userName: {
    type: String,
    optional: false
  },

  message: {
    type: String,
    optional: false
  },

  createdAt: {
    type: Date,
    optional: true
  }
});

Messages.attachSchema(Messages.schema);

Messages.methods({
});

if (Meteor.isServer) {
  Meteor.methods({
    add_new_message: function (userName, message) {
      const userId = Meteor.userId();
      return Messages.insert({
        userId,
        userName,
        message,
        createdAt: new Date()
      });
    }
  });
}
1 Like
11

We use redis-oplog to trigger real-time messages and notifications for our chat

1 Like