Message duplication in Chat at the time of the Webinar (client side)

Question

Message duplication in Chat at the time of the Webinar (client side)

Asked 6 years, 11 months ago

Viewed 27 times

0

Hello, I have a chat that at the time of the webinar to receive enough customers watching at the time of sending message, the same on the screen seems duplicated, but in the bank not saved duplicated, follows the chat code.

function salvarMensagem() {
    if ($("#btn-input").val() != "") {
        var id_entidade_chat = $("#id_entidade_chat").val();
        var id_versao_chat = $("#id_versao_chat").val();
        $.ajax({
            type: "GET",
            url: '@Url.Action("SalvaChat", "chat")',
            dataType: "json",
            data: "id_versao=" + id_versao_chat + "&id_entidade=" + id_entidade_chat + "&mensagem=" + $("#btn-input").val(),
            contentType: "application/json; charset=utf-8",
            success: function () {
                carregaChat();
                $("#btn-input").val("");
            },
            error: function (ex) {
                carregaChat();
                $("#btn-input").val("");
            }
        });
    } else {
        alert("Informe um texto antes de salvar");
    }
}

Here I check if there is a new message:

    function VerificaNovaMensagem() {
    try {
        var data = "id_versao=" + $("#id_versao_chat").val() + "&id_chat=" + $("#id_ultimo_chat").val() + "&id_entidade=" + $("#id_entidade_chat").val();
        $("#div_bodyChat").prepend($("<div>").load("/Aluno/chat/VerificaNovaMensagem", data));
    } catch (err) { }
}

And then every five seconds you update:

    $(document).ready(function () {
    setInterval(function () {
        VerificaNovaMensagem();
    }, 5000);
});

My view:

   <div class="col-xs-12 col-md-12">
   <div class="panel panel-default">
    <div class="panel-heading top-bar-chat">
        <div class="col-md-12 col-xs-12">
            <h3 class="panel-title"><span class="glyphicon glyphicon-comment"></span> Pergunte aqui</h3>
            <p><small class="caracteres">145 caracteres restantes.</small></p>
            <div class="input-group">
                <input id="btn-input" name="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Escreva sua mensagem aqui..." />
                <span class="input-group-btn">
                    <button class="btn btn-primary btn-sm" id="btn-chat" onclick="javascript:salvarMensagem()">Enviar</button>
                </span>
            </div>
        </div>
    </div>
    <div id="div_bodyChat" class="panel-body msg_container_base" style="max-height:320px">
        @Html.Hidden("id_entidade_chat", (object)ViewBag.id_entidade)
        @Html.Hidden("id_versao_chat", (object)ViewBag.id_versao)
        @Html.Hidden("id_ultimo_chat", Model.Count() > 0 ? Model.OrderByDescending(x => x.data_cadastro).FirstOrDefault().id_chat : int.MinValue)
        @foreach (var item in Model)
        {
            if (item.id_entidade == ViewBag.id_entidade)
            {
                <div class="row msg_container base_sent">
                    <div class="col-md-10 col-xs-10">
                        <div class="messages msg_sent">
                            <div class="header" style="margin-top:0px;padding-bottom:0px">
                                <span class="user-info" style="color:black;font-weight:700;max-width:140px">
                                    @item.tbl_entidade.nome_razao
                                </span>
                                <small class="pull-right text-muted">
                                    <span class="glyphicon glyphicon-time"></span>
                                    <time>@item.data_cadastro</time>
                                </small>
                            </div>
                            <p>
                                @Html.Raw(item.mensagem)
                            </p>

                        </div>
                    </div>
                    <div class="col-md-2 col-xs-2 avatar">
                        @if (!string.IsNullOrEmpty(item.tbl_entidade.foto_nome))
                        {
                            var base64 = Convert.ToBase64String(item.tbl_entidade.foto_byte);
                            var imgSrc = String.Format("data:{0};base64,{1}", "image/jpeg", base64);
                            <img src="@imgSrc" alt="@(item.tbl_entidade.foto_nome)" height="64" width="64" class="img-responsive ">
                        }
                        else
                        {
                            <img src="@Url.Content("~/imagens/profile.png")" alt="" class="img-responsive ">
                        }
                    </div>
                </div>
            }
            else
            {
                <div class="row msg_container base_receive">
                    <div class="col-md-2 col-xs-2 avatar">
                        @if (!string.IsNullOrEmpty(item.tbl_entidade.foto_nome))
                        {
                            var base64 = Convert.ToBase64String(item.tbl_entidade.foto_byte);
                            var imgSrc = String.Format("data:{0};base64,{1}", "image/jpeg", base64);
                            <img src="@imgSrc" alt="@(item.tbl_entidade.foto_nome)" class="img-responsive ">
                        }
                        else
                        {
                            <img src="@Url.Content("~/imagens/profile.png")" alt="" class="img-responsive ">
                        }
                    </div>
                    <div class="col-md-10 col-xs-10">
                        <div class="messages msg_receive">
                            <div class="header" style="margin-top:0px;padding-bottom:0px">
                                <span class="user-info" style="color:black;font-weight:700;max-width:140px">
                                    @item.tbl_entidade.nome_razao
                                </span>
                                <small class="pull-right text-muted">
                                    <span class="glyphicon glyphicon-time"></span> <time>@item.data_cadastro</time>
                                </small>
                            </div>
                            <p>
                                @Html.Raw(item.mensagem)
                            </p>
                        </div>
                    </div>
                </div>
            }
        }
    </div>

    <div class="panel-footer">
        <div class="input-group">
            <div class="btn-group pull-right">
                <button class="btn btn-sm btn-success btn-white btn-round" onclick="javascript:salvarLike()">
                    <i class="glyphicon glyphicon-thumbs-up"></i>                        
                </button>

                <button class="btn btn-sm btn-danger btn-white btn-round" onclick="javascript:salvarDeslike()">
                    <i class="glyphicon glyphicon-thumbs-down"></i>                                                
                </button>
            </div>
        </div>
    </div>
</div>

Full scrip in view:

<script>
$("#btn-input").keyup(function (event) {
    if (event.keyCode == 13) {
        $("#btn-chat").click();
    }
});
$(document).on("input", "#btn-input", function () {
    var limite = 145;
    var informativo = "caracteres restantes.";
    var caracteresDigitados = $(this).val().length;
    var caracteresRestantes = limite - caracteresDigitados;

    if (caracteresRestantes <= 0) {
        var comentario = $("textarea[name=comentario]").val();
        $("textarea[name=comentario]").val(comentario.substr(0, limite));
        $(".caracteres").text("0 " + informativo);
    } else {
        $(".caracteres").text(caracteresRestantes + " " + informativo);
    }
});
$(document).ready(function () {
    setInterval(function () {
        VerificaNovaMensagem();
    }, 5000);
});
function salvarMensagem() {
    if ($("#btn-input").val() != "") {
        var id_entidade_chat = $("#id_entidade_chat").val();
        var id_versao_chat = $("#id_versao_chat").val();
        $.ajax({
            type: "GET",
            url: '@Url.Action("SalvaChat", "chat")',
            dataType: "json",
            data: "id_versao=" + id_versao_chat + "&id_entidade=" + id_entidade_chat + "&mensagem=" + $("#btn-input").val(),
            contentType: "application/json; charset=utf-8",
            success: function () {
                carregaChat();
                $("#btn-input").val("");
            },
            error: function (ex) {
                carregaChat();
                $("#btn-input").val("");
            }
        });
    } else {
        alert("Informe um texto antes de salvar");
    }
}

function salvarLike() {        
        var id_entidade_chat = $("#id_entidade_chat").val();
        var id_versao_chat = $("#id_versao_chat").val();
        $.ajax({
            type: "GET",
            url: '@Url.Action("SalvaChat", "chat")',
            dataType: "json",
            data: "id_versao=" + id_versao_chat + "&id_entidade=" + id_entidade_chat + "&mensagem=<i class='glyphicon glyphicon-thumbs-up green'></i>",
            contentType: "application/json; charset=utf-8",
            success: function () {
                carregaChat();
                $("#btn-input").val("");
            },
            error: function (ex) {
                carregaChat();
                $("#btn-input").val("");
            }
        });        
}
function salvarDeslike() {        
    var id_entidade_chat = $("#id_entidade_chat").val();
    var id_versao_chat = $("#id_versao_chat").val();
    $.ajax({
        type: "GET",
        url: '@Url.Action("SalvaChat", "chat")',
        dataType: "json",
        data: "id_versao=" + id_versao_chat + "&id_entidade=" + id_entidade_chat + "&mensagem=<i class='glyphicon glyphicon-thumbs-down red'></i>",
        contentType: "application/json; charset=utf-8",
        success: function () {
            carregaChat();
            $("#btn-input").val("");
        },
        error: function (ex) {
            carregaChat();
            $("#btn-input").val("");
        }
    });        
}    

function VerificaNovaMensagem() {
    try {
        var data = "id_versao=" + $("#id_versao_chat").val() + "&id_chat=" + $("#id_ultimo_chat").val() + "&id_entidade=" + $("#id_entidade_chat").val();
        $("#div_bodyChat").prepend($("<div>").load("/Aluno/chat/VerificaNovaMensagem", data));
    } catch (err) { }
}

Did you check the "/Student/chat/Checkmessage/" call separately? It actually returns only the new messages?

– Leandro Angelo

2017/12/28 at 12:14
I checked here, at the time I click send message it duplicates/ triples and then updates to only one message, it is at the time of action on the button.

– Adriano Praia

2017/12/28 at 12:48
Only the function loadChat(), which is where the problem might be. Passing the eye does not seem necessary in Save message, once the post is done and after 5 seconds the new message would be loaded by Checkmessage()

– Leandro Angelo

2017/12/28 at 12:51
I commented on the chargingChat() and did not duplicate the messages, vlw

– Adriano Praia

2017/12/28 at 14:58

1 answer

Browser other questions tagged jquery asp.net-mvc ajax chat

You are not signed in. Login or sign up in order to post.

by Leandro Angelo • **9,330** points · Answer 1 · 2017-12-28T15:32:24+00:00

Although not presented in the question asked by the author, the behavior occurs on account of the execution at various times of the function carregaChat(). Deducing that it would be a boot-only routine, your call at other events should be removed or your revised routine.

I highlight below the function SalvarMensagem(), which is where the author detected the problem, but the same should occur in the other features, salvarDeslike() and salvarLike()

function salvarMensagem() {
    if ($("#btn-input").val() != "") {
        var id_entidade_chat = $("#id_entidade_chat").val();
        var id_versao_chat = $("#id_versao_chat").val();
        $.ajax({
            type: "GET",
            url: '@Url.Action("SalvaChat", "chat")',
            dataType: "json",
            data: "id_versao=" + id_versao_chat + "&id_entidade=" + id_entidade_chat + "&mensagem=" + $("#btn-input").val(),
            contentType: "application/json; charset=utf-8",
            success: function () {
                //carregaChat();
                $("#btn-input").val("");
            },
            error: function (ex) {
                //carregaChat();
                //Adicionar feedback do erro para o usuário
                $("#btn-input").val("");
            }
        });
    } else {
        alert("Informe um texto antes de salvar");
    }
}