0

Olá, tenho um chat que na hora do webinar ao receber bastante clientes assistindo na hora de enviar mensagem, a mesma na tela parece duplicada, mas no banco não salva duplicada, segue o código do chat.

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");
    }
}

Aqui verifico se existe uma nova mensagem:

    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) { }
}

E então a cada 5s atualiza:

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

Minha 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>

Scrip completo na 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) { }
}

4
  • Você verificou a chamada "/Aluno/chat/VerificaNovaMensagem/" isolada? Ela retorna de fato apenas as novas mensagens? 28/12/2017 às 12:14
  • Verifiquei aqui, na hora que clico enviar mensagem ele duplica/ triplica e depois atualiza para apenas uma mensagem, é na hora da ação no botão. 28/12/2017 às 12:48
  • Faltou só a função carregaChat(), que é onde pode estar o problema. Passando o olho não me parece necessária no SalvarMensagem, uma vez que o post é feito e depois de 5 segundos a novamensagem seria carregada pela VerificaNovaMensagem() 28/12/2017 às 12:51
  • Comentei os carregaChat() e não duplicou as mensagens, vlw 28/12/2017 às 14:58

1 Resposta 1

0

Embora não apresentada na pergunta feita pelo autor, o comportamento ocorre por conta da execução em diversos momentos da função carregaChat(). Deduzindo que seria uma rotina apenas de inicialização, sua chamada em outros eventos deve ser removida ou ainda sua rotina revisada.

Destaco abaixo a função SalvarMensagem(), que é onde o autor detectou o problema, mas o mesmo deve ocorrer nas outras funcionalidades, salvarDeslike() e 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");
    }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .