How to group chat messages per user?

how to make a group chat on messages
how to send a group text on iphone without everyone responding
why can't i add someone to a group text
can you add someone to an existing group text
receiving group messages individually iphone
group messaging: android
group text app that sends individually
imessage group chat limit

I have a group chat message build using Vue.js. I am currently fetching the messages which returns an array like this:

"data":[
    {
        "id":1,
        "message":"<p>yo<\/p>",
        "removed":"false",
        "user":{
            "uid":2,
            "metadata":{
                "username":"Testing"
            }
        },
        "post_date":"2018-02-24 14:30"
    },
    {
        "id":2,
        "message":"<p>test<\/p>",
        "removed":"false",
        "user":{
            "uid":1,
            "metadata":{
                "username":"Admin"
            }
        },
        "post_date":"2018-02-24 22:31"
    },
    {
        "id":3,
        "message":"<p>Wassup?<\/p>",
        "removed":"false",
        "user":{
            "uid":1,
            "metadata":{
                "username":"Admin"
            }
        },
        "post_date":"2018-02-24 22:40"
    },
    {
        "id":12,
        "message":"again for testing post date",
        "removed":"false",
        "user":{
            "uid":1,
            "metadata":{
                "username":"Admin"
            }
        },
        "post_date":"2018-03-04 00:59"
    },
    {
        "id":13,
        "message":"Hello!",
        "removed":"false",
        "user":{
            "uid":2,
            "metadata":{
                "username":"Testing"
            }
        },
        "post_date":"2018-03-04 11:13"
    },
    {
        "id":13,
        "message":"<p>Hi!</p>",
        "removed":"false",
        "user":{
            "uid":2,
            "metadata":{
                "username":"Testing"
            }
        },
        "post_date":"2018-03-04 11:13"
    },
],

At the moment I am just looping through the data and outputting each message into a separate div. What I would prefer is to group the messages when the same user has posted more than once in a row.

How would I go about this? Should it be an option server side (maybe an optional group parameter?) or somehow done client side?

EDIT This is how the chat current looks:

And this is the desired look:

The problem if I group them by the UID/Username, is that the messages need to be output in order. So if User 1 send three messages, then User 2 send two, then User 1 sends another message, all of user 1s message will be grouped together. Rather the User 1s three messages should be grouped, then User 2s, then it should show User 1s last message.

I solved this problem for myself pretty recently. Here's a full example.

The core business logic for grouping messages, in the above example, can be found under src/store.js in the addMessage function.

Unless your server is also storing all the messages and you have some mechanism to ensure causal ordering across all clients, I would recommend that you run the logic on each client. That way, you ensure that clients don't see messages jumping around under any circumstance. At worst, messages would appear ungrouped.

The algorithm to determine this is run when a new message is received, therefore it runs on each client, but you can tweak it to work for your use-case as well! It's shown below (I may have used the wrong flowchart elements..apologies).

addMessage({ state }, { msg, selfHash }) {
  let addAsNewMsg = true;
  const lastMessage = state.messages.slice(-1)[0];
  if (lastMessage && lastMessage.userHash === msg.userHash) {
    // The last message was also sent by the same user
    // Check if it arrived within the grouping threshold duration (60s)
    const lastMessageTime = moment(lastMessage.time);
    const msgTime = moment(msg.time);
    const diffSeconds = msgTime.diff(lastMessageTime, "seconds");
    if (diffSeconds <= 60) {
      addAsNewMsg = false; // We're going to be appending.. so
      lastMessage.message.push(msg.message);
      // We're going to now update the timestamp and (any) other fields.
      delete msg.message; // Since, we've already added this above
      Object.assign(lastMessage, msg); // Update with any remaining properties
    }
  }
  if (addAsNewMsg) {
    state.messages.push(msg);
  }
}

(Google Android) Messages: Group Messages Sent Individually , Why can't I add someone to a group message on Iphone? Here's how to set up groups in Messenger. Open Messenger and tap the new chat icon. In a browser, click the Facebook Messenger icon at the top of any Facebook page. Tap Create a New Group.

Seems like an ideal use case for computed properties. First sort the data by post_date

computed: {
    sortedPosts() {
        return this.posts.sort((a, b) => {
            if (a.post_date < b.post_date) return -1;
            else if (a.post_date > b.post_date) return +1;
            return 0;
        });
    },

Then group by user.uid

    groupedPosts() {
        const posts = this.sortedPosts.reduce((post, grouped) => {
            if (grouped.length === 0) 
                grouped.unshift([post]);
            else if (grouped[0][0].user.uid === post.user.uid)
                grouped[0].push(post);
            else
                grouped.unshift([post]);
            return grouped;
        }, []);
        return posts.reverse();
    }

Then used the computed property in a template

<div v-for="group in groupedPosts">
    <div v-for="post in group">

(I haven't tested the code above, so watch for typos, etc.)

Send a group text message on your iPhone, iPad, or iPod touch , Apple Tool Box blog, but Verizon customers can only add 20. Starting with Step A, choose a new chat, then in B, type in the names of the participants. To keep the Group Chat on topic, though, we’ll use a Group Name for the group chat – which we can access by clicking the drop-down highlighted in C. The Group Name is really what differentiates a normal multi-person chat from a group chat.

My approach would be to keep a reference to the div containing the last user's speech, and a variable representing the uid of the last user to speak. When a message comes in that matches the last uid, you'll simply add it to the div you're keeping track of; if the new uid doesn't match the previous one, you'll simply create a new div, add it to the DOM, and update the uid variable.

// initialize variables
let lastUid,curDiv;

getData().forEach(msg => {
  if (msg.user.uid !== lastUid) {
    // new user is speaking!
    curDiv = document.createElement("div");
    document.body.appendChild(curDiv);
    lastUid = msg.user.uid;
  }
  // add current message to the current div
  curDiv.innerHTML += msg.message;
});

function getData() {
  // really only put this in a function so that I could hoist it so that my logic can go above.
  return [
      {
          "id":1,
          "message":"<p>yo<\/p>",
          "removed":"false",
          "user":{
              "uid":2,
              "metadata":{
                  "username":"Testing"
              }
          },
          "post_date":"2018-02-24 14:30"
      },
      {
          "id":2,
          "message":"<p>test<\/p>",
          "removed":"false",
          "user":{
              "uid":1,
              "metadata":{
                  "username":"Admin"
              }
          },
          "post_date":"2018-02-24 22:31"
      },
      {
          "id":3,
          "message":"<p>Wassup?<\/p>",
          "removed":"false",
          "user":{
              "uid":1,
              "metadata":{
                  "username":"Admin"
              }
          },
          "post_date":"2018-02-24 22:40"
      },
      {
          "id":12,
          "message":"again for testing post date",
          "removed":"false",
          "user":{
              "uid":1,
              "metadata":{
                  "username":"Admin"
              }
          },
          "post_date":"2018-03-04 00:59"
      },
      {
          "id":13,
          "message":"Hello!",
          "removed":"false",
          "user":{
              "uid":2,
              "metadata":{
                  "username":"Testing"
              }
          },
          "post_date":"2018-03-04 11:13"
      },
      {
          "id":13,
          "message":"<p>Hi!</p>",
          "removed":"false",
          "user":{
              "uid":2,
              "metadata":{
                  "username":"Testing"
              }
          },
          "post_date":"2018-03-04 11:13"
      },
  ]
}
div {
  border: 1px solid black;
  margin-bottom: 5px;
}

Your complete guide to the etiquette of group texting, Learn how to start a group text message. people from a group conversation if one of the users in the group text is using a non-Apple device. How to Name or Rename an Older Group Chat If you'd like to name a group text that already exists, or want to give your group message a new name, here's how: Open the conversation and tap on the small carrot to the right of the group name. Now, tap on the info icon. Tap on the existing group name and then tap the X to delete it.

You could group your messages by user on the server-side.

Iterate over the data, pushing each object into an object of arrays, where the keys are the uid's and the values are arrays of objects for the respective user.

let dataByUser = {};

//Iterate over your data
for (let i = 0; i < data.length; i++) {
    //If the object doesn't have a key equal to the current objects username, 
    //add it as a new key and set the values to a new array containing this datum.
    if(!dataByUser.hasOwnProperty(data[i].user.uid) {
        dataByUser[data[i].user.uid] = new Array(data[i]);
    } else {
        //If it does exist, push to the array for the existing key.
        dataByUser[data[i].user.uid].push(data[i]);
    }
}

You should end up with an object with a K:V pair per user in your data array, where their values are arrays of objects with all the respective messages in.

You'd then have to write some client code that iterates over this new data structure and formats it however you wish.

15 Group Messaging Mobile Apps, It features group chat or direct messaging, conversations in channels, searchable message Premium plans start at $4 per user per month. —. Select the down arrow to the far right of the To field and type a name for the chat in the Group name field. Next, type the names of the people you’d like to add in the To field. Once the chat has begun (whether group or one-on-one), just click it in the chat list to dip back into it and send more messages. 2. Press Shift+Enter to start a new line.

Edit group message options - Messages Help, Add to, leave, or name a group conversation. If your group members all have chat features turned on, you can change options for group conversations:. Get group member user IDs; Get a group member profile; Leave a group; Get room member user IDs; Get a room member profile; Leave a room # Tip for sending messages. Similarly to one-on-one chat, you can send reply messages and push messages to a group chat that your LINE Official Account has joined. When sending push messages, specify the group ID or room ID in the to property.

Rooms vs. group messages - Google Chat Help, You can use a room or a group message in Google Chat to chat with two or more people. To help you decide which to use, the table below describes the  Free group messaging It's like a private chat room for your small group. Have as many as you want, and it's always free. Now, you can coordinate with coworkers, organize a game night, and keep in touch with family all in the same place.

Manage messaging policies in Teams, Create a new custom policy named "Retain sent messages" and turn Allow a user to remove users from a group chat Turn this setting on to  Go to Microsoft Teams admin center > Messaging policies. Select the policy by clicking to the left of the policy name. Select Manage users. In the Manage users pane, search for the user by display name or by user name, select the name, and then select Add. Repeat this step for each user that you want to add.

Comments
  • Can you give an example of what you want the output to look like?
  • I'm using lodash, Can not I just order it that way? _.orderBy(collection, ['post_date'], ['asc'])
  • I have never used lodash myself, but that seems plausible. Might also be able to use groupBy in some clever way.