I started to implement a chat and needed to update the div where the messages are inserted, but when I receive new messages I need to update the page to access, and if I set a timeout for every 10 seconds, and I'm still typing something there update the page and lose what I was writing, could help me, I'm new to php and I do not know where to start to solve this problem, follow code
{{--collumns--}}
<div class="col-md-6 col-md-offset-3">
<!-- Construct the box with style you want. Here we are using box-danger -->
<!-- Then add the class direct-chat and choose the direct-chat-* contexual class -->
<!-- The contextual class should match the box, so we are using direct-chat-danger -->
<div class="box box-success direct-chat direct-chat-success" style="height: 560px;">
<div class="box-header with-border">
<h3 class="box-title">Chat com <b>{{$amigo->name}}</b></h3>
<div class="box-tools pull-right">
{{--<span data-toggle="tooltip" title="3 New Messages" class="badge bg-success">3</span>--}}
{{--<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>--}}
<!-- In box-tools add this button if you intend to use the contacts pane -->
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contatos" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
{{--<button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Fechar"><i class="fa fa-times"></i></button>--}}
<button onclick="location.reload();" class="btn btn-box-tool" data-widget="tooltip" data-toggle="tooltip" title="Atualizar"><i class="fa fa-refresh"></i></button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body" style="height: 500px">
<!-- Conversations are loaded here -->
<div class="direct-chat-messages" style="height: 480px">
@if(count($conversa) == 0)
<!-- Message. Default to the left -->
<div class="direct-chat-msg">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-left">{{ trans('adminlte_lang::message.name_system_mini') }}</span>
</div>
<img class="direct-chat-img" src="{{url('img-projeto/logo.png')}}" alt="message user image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
Você ainda não iniciou uma conversa? envie uma mensagem!
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
@endif
@foreach($conversa as $c)
{{--messages-friend--}}
@if($c->user_send != \Illuminate\Support\Facades\Auth::user()->id)
<!-- Message. Default to the left -->
<div id="message_{{$c->id}}"class="direct-chat-msg">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-left">{{$c->user_send_name}}</span>
<span class="direct-chat-timestamp pull-right">{{date('H:i:s', strtotime($c->created_at))}}</span>
</div>
<!-- /.direct-chat-info -->
@if($c->user_send_file_path == null)
<img class="direct-chat-img" src="{{url('img-projeto/profile.jpg')}}" alt="message user image">
@else
@if(!file_exists('storage/users/'.$c->user_send_file_path))
<img class="contacts-list-img" src="{{url('img-projeto/profile.jpg')}}" alt="Contact Avatar">
@else
<img class="direct-chat-img" src="{{url('storage/users/'.$c->user_send_file_path)}}" alt="message user image">
@endif
@endif
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
{{$c->message}} <button type="button" style="color:green; background: transparent;"><i class="fa fa-trash"></i></button>
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
{{--my-messages--}}
@else
<!-- Message to the right -->
<div class="direct-chat-msg right">
<div class="direct-chat-info clearfix">
<span class="direct-chat-name pull-right">{{$c->user_send_name}}</span>
<span class="direct-chat-timestamp pull-left">{{date('H:i:s', strtotime($c->created_at))}}</span>
</div>
<!-- /.direct-chat-info -->
@if($c->user_send_file_path == null)
<img class="direct-chat-img" src="{{url('img-projeto/profile.jpg')}}" alt="message user image">
@else
@if(!file_exists('storage/users/'.$c->user_send_file_path))
<img class="contacts-list-img" src="{{url('img-projeto/profile.jpg')}}" alt="Contact Avatar">
@else
<img class="direct-chat-img" src="{{url('storage/users/'.$c->user_send_file_path)}}" alt="message user image">
@endif
@endif
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
{{$c->message}}
<button type="button" class="pull-right" title="Remover sua cópia da mensagem"
style="color:white; background: transparent; padding-right: 5px;">
<i class="fa fa-trash"></i>
</button>
<button type="button" onclick="abreModalEditMessage('{{$c->message}}','{{$c->id}}')" class="pull-right" title="Editar mensagem"
style="color:white; background: transparent; padding-right: 5px;">
<i class="fa fa-pencil-square-o"></i>
</button>
</div>
<!-- /.direct-chat-text -->
</div>
<!-- /.direct-chat-msg -->
@endif
@endforeach
</div>
<!--/.direct-chat-messages-->
<!-- Contacts are loaded here -->
<div class="direct-chat-contacts" style="height: 500px">
<ul class="contacts-list">
@foreach($users as $u)
<li>
<a href="{{action("ChatController@oneToOne", $u->id)}}">
@if($u->file_path == null)
<img class="contacts-list-img" src="{{url('img-projeto/profile.jpg')}}" alt="Contact Avatar">
@else
@if(!file_exists('storage/users/'.$u->file_path))
<img class="contacts-list-img" src="{{url('img-projeto/profile.jpg')}}" alt="Contact Avatar">
@else
<img class="contacts-list-img" src="{{url('storage/users/'.$u->file_path)}}" alt="Contact Avatar">
@endif
@endif
<div class="contacts-list-info">
<span class="contacts-list-name">
{{$u->name}}
<small class="contacts-list-date pull-right">Ativo desde {{date('d/m/Y', strtotime($u->created_at))}}</small>
</span>
@switch($u->st_chat)
@case(0)
<span class="contacts-list-msg">{{$u->apelido}}</span>
<i class="fa fa-circle" style="color: silver" title="O Usuário parece estar off-line"></i>
@break
@case(1)
<span class="contacts-list-msg">{{$u->apelido}}</span>
<i class="fa fa-circle text-success" title="O Usuário está on-line"></i>
@break
@endswitch
</div>
<!-- /.contacts-list-info -->
</a>
</li>
<!-- End Contact Item -->
@endforeach
</ul>
<!-- /.contatcts-list -->
</div>
<!-- /.direct-chat-pane -->
</div>
<!-- /.box-body -->
{{--form--}}
<form name="form_msg" id="form_msg" class="form-group" action="{{action('ChatController@store')}}" method="post" enctype="multipart/form-data">
<!-- /.box-footer -->
<div class="box-footer">
{{--input-group--}}
<div class="input-group">
<input type="hidden" name="_token" value="{{ csrf_token() }}"/>
<input type="hidden" name="user_receive" value="{{$amigo->id}}"/>
<input type="text" name="message" placeholder="Escreva uma mensagem" class="form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-primary btn-flat">Enviar</button>
</span>
</div>
{{--input-group--}}
</div>
<!-- /.box-footer -->
</form>
{{--form--}}
</div>
<!--/.direct-chat -->
</div>
{{--/container--}}
</div>
{{--/container--}}
This is the method that feeds the div:
public function oneToOne($id)
{
/*configurações do usuário logado*/
$config = $this->configUserLogin();
$amigo = User::where('id','=', $id)->get()->first();
$conversa = Chat::whereIn("chats.user_send", [Auth::user()->id, $id])
->whereIn("chats.user_receive", [Auth::user()->id, $id])
->join('users as user_send', 'user_send.id', '=', 'chats.user_send')
->join('users as user_receive', 'user_receive.id', '=', 'chats.user_receive')
->select("chats.*", "user_send.id as user_send_id",
"user_send.name as user_send_name",
"user_send.file_path as user_send_file_path","user_receive.id as user_receive_id",
"user_receive.name as user_receive_name",
"user_receive.file_path as user_receive_file_path")
->orderBy("chats.id", "desc")->get();
$users = User::where("id", "like", "%%")->where("nivel_acesso", "<>", "MS")->get();
return View::make('chat.one-to-one')->with(compact('conversa', 'amigo', 'config', 'users'));
}