Duplication of Chat messages at the time of the Webinar (client side)

Question

Duplication of Chat messages at the time of the Webinar (client side)

Navigation

#1 by (0 votes)

0

Hello, I have a chat that at the time of the webinar when receiving enough clients watching at the time of sending message, the same on the screen seems duplicate, but in the database does not save duplicate, follow 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 5s updates:

    $(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 scripting in the 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) { }
}

jquery ajax asp.net-mvc chat

asked by anonymous 28.12.2017 / 12:44

1 answer

How to convert a DateTime object to string? Generate random name in MySQL - Stored Procedure

score 0 · Answer 1

Although not presented in the author's question, the behavior occurs because of the execution of the carregaChat() function at different times. By deducing that it would be a startup-only routine, your call in other events should be removed or your routine revised.

I highlight below the function SalvarMensagem() , which is where the author detected the problem, but the same should occur in 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");
    }
}