signalr send comment to connected client but within specific post

Question

Say there are 50 post on the page. Each post contains some comments. When I click a post a popup appears with comments.

What is happening is that if two users are connected to the server. One is seeing post 1 and the other seeing post 34, each sending a comment, the comments got exchanged.

How can I tell signalr to send the post to each other if and only if that specific post id is opened for comments in the popup window? I am new to this. any pointer will do.

This is my working code

var viewModel = function() {
  var self = this;
  self.hub = $.connection.chathub;
  self.commenttext = ko.observable();
  self.comments = ko.observableArray();
  self.commentdate = ko.observable();


  self.init = function() {
    self.hub.server.getPosts().fail(function(err) {
      console.log("connection started");
    });
  }

  self.hub.client.loadPosts = function(data) {
    ko.mapping.fromJS(data, {}, self.comments);
  }

  self.hub.client.newCommentss = function(comment) {
    self.comments.push(comment);
  }

  self.addcomments = function() {
    var t = {
      "comment": self.commenttext(),
      "cardid": 20
    };
    $.ajax({
      url: "@Url.Action("
      AddComments ", "
      Home ")",
      type: "post",
      contentType: "application/json",
      data: JSON.stringify(t),
      success: function(data) {
        self.hub.server.addCommentss(t).done(function(comment) {


        }).fail(function(err) {

        });
      }
    });
  }


};

var vm = new viewModel();
ko.applyBindings(vm);

$.connection.hub.start().done(function() {
  vm.init();
});

<div id="div1">
  <textarea data-bind="value: commenttext"></textarea><br />
  <a href="#" data-bind="click: addcomments" style="margin-bottom:4em">Send</a><br /><br /><br />
  <ul data-bind="foreach: comments,visible: comments().length > 0">
    <li>
      <span data-bind="text:commentdate"></span>
      <strong><span data-bind="text: comment"> </span></strong><br /><br />
    </li>
  </ul>
</div>

This is my chathub

 public class chathub : Hub
{

    private readonly ApplicationDbContext _context;

    public chathub(ApplicationDbContext context)
    {          
        _context = context;
    }

    public void GetComments(int id)
    {
        List<CommentsViewModel> commentss= new List<CommentsViewModel>();
        var comments = _context.Comments.Where(m => m.cardid == id);
        foreach (var item in comments)
        {
            CommentsViewModel b = new CommentsViewModel();
            b.commentid = item.commentid;
            b.comment = item.comment;
            b.commentdate = item.commentdate;
            b.cardid = item.cardid;
            commentss.Add(b);
        }
        Clients.All.loadComments(commentss);
    }
    public bool addCommentss(Comment newComment)
    {
        Comment commentobj = new Comment();
        commentobj.comment = newComment.comment;
        commentobj.commentdate = System.DateTime.Now;
        commentobj.cardid = newComment.cardid;
        _context.Add(commentobj);
        _context.SaveChanges();
        Clients.All.newCommentss(commentobj);
        return true;
    }

    public bool removeCommentss(int id)
    {
        Comment commentobject = _context.Comments.FirstOrDefault(m => m.commentid == id);
        if (commentobject != null)
        {
            _context.Comments.Remove(commentobject);
            _context.SaveChanges();
        }
       // return Json(true);
        Clients.All.deleteCommentss(commentobject);
        return true;
    }
}

Answer 1

as a simple solution, you can do like this.

// save opened/clicked post ID into a local variable (clear when closed)
var currentPostID = 22;

// in your signalr receive event
self.hub.client.newCommentss = function(comment) {
  // assuming cardid is postID
  if(currentPostID == comment.cardid) {
    self.comments.push(comment);
  }
}

this way every online user receives new comment but only who's viewing that post will able to see it.

Or you can follow this link for more managed way of user grouping at server side