2017-12-08 4 views
0

안녕하세요 저는 새로운 개발자이고 내 laravel 프로젝트에서 실시간 채팅 기능을 ajax와 함께 구현했습니다. 그러나 실시간 알림 시스템을 추가하여 아약스와 함께 메시지를 모두 작성하려고합니다. 사용자가 여기 내 인덱스 페이지의 당신이 나에게실시간 알림 (아약스 포함)

을 도울 수 있다면 매우 도움이 될 것입니다 해당 메시지에 대한 통보 :

Route::get('/chat', 'Chat\[email protected]')->name('chat.index'); 
Route::post('/chat/send', 'Chat\[email protected]')->name('admin.chat.sendMessage'); 
Route::post('/chat/get', 'Chat\[email protected]'); 

: 여기

@extends('admin.app') 
@section('content') 
    <div class="container"> 
     <div class="row" style ="padding-top:40px;"> 
      <h3 class="text-center">Welcome {{Auth::user()->FullName}}</h3> 
      <br/><br/> 
      <div class="col-md-2"> 
        <p>Users online</p> 
        @foreach($users as $user) 
         @if($user->isOnline()) 
          <li>{{$user->FullName}}</li> 
         @endif 
        @endforeach 


      </div> 

      <div class="col-md-8"> 
       <div class="panel panel-info"> 
        <div class="panel-heading"> 
         Recent Chat 
        </div> 
        <div class="panel-body"> 
         <ul class="media-list" id="message"> 

          @foreach($messages as $message) 
           <li class="media"> 
            <div class="media-body"> 
             <div class="media"> 

              <div class="media-body" > 
               {{$message->message}} 
               <br/> 
               <bold> <small class="text-muted">{{$message->from_name}} |{{$message->created_at}} 
                </small></bold> 
               <hr> 
              </div> 
             </div> 
            </div> 
           </li> 


          @endforeach 
         </ul> 
         <div> 
          <div class="panel-footer"> 
           <div class="input-group"> 
            <input type="text" name="message" class="form-control" placeholder="Enter Message"/> 
            {{csrf_field()}} 
            <input type="hidden" name="from_name" value="{{Auth::user()->FullName}}"> 
            <span class="input-group-btn"> 
            <button type="submit" id="send" class="btn btn-info">Send</button> 
           </span> 
           </div> 
          </div> 
         </div> 
         <div class="col-md-2"> 

         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

    <script type="text/javascript" src="/assets/admin/plugins/jquery/jquery-1.9.1.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      setTimeout(realTime, 2000); 
     }); 
     function realTime() { 
      $.ajax({ 
       type:'post', 
       url:'/chat/get', 
       data:{ 
        '_token':$('input[name=_token]').val(), 
       }, 
       success: function (data) { 
        $('#message').replaceWith(' <ul class="media-list" id="message"></ul>'); 
        for (var i=0; i < data.length; i++){ 
         $('#message').append(' <li class="media"><div class="media-body"><div class="media"><div class="media-body">'+data[i].message+'<br/><small class="text-muted">'+data[i].from_name+'|'+ data[i].created_at+'</small><hr/></div></div></div></li>') 
        } 
       }, 
      }); 
      setTimeout(realTime, 2000); 
     } 
     $(document).on('click','#send', function(){ 
      $.ajax({ 
       type:'post', 
       url:'/chat/send', 
       data:{ 
        '_token':$('input[name=_token]').val(), 
        'from_name':$('input[name=from_name]').val(), 
        'message':$('input[name=message]').val(), 
       }, 
       success: function (data) { 
        $('#message').append(' <li class="media"><div class="media-body"><div class="media"><div class="media-body">'+data.message+'<br/><small class="text-muted">'+data.from_name+'|'+ data.created_at+'</small><hr/></div></div></div></li>'); 
       } 
      }) 

      $('input[name=message]').val(''); 
     }); 

    </script> 

@stop 

나의 경로입니다 나쁜 영어에 대한 진보의

public function __construct() 
    { 
     $this->middleware('auth'); 
    } 

    public function index() 
    { 
     $users=user::all(); 
     $messages=message::all(); 
     return view('admin.chat.index',['messages'=> $messages],compact('users')); 
    } 

    public function sendMessage(Request $request){ 

     $send = new Message(); 
     $send ->from_name = $request->from_name; 
     $send ->message = $request->message; 
     $send->save(); 
     return response()->json($send); 

    } 

    public function getMessage(){ 
     $message = Message::all(); 
     return response()->json($message); 

    } 

미안하지만 난이 시도 외국인에게

+0

채팅 앱을 이미 구현 한 경우 실시간 알림으로 어떤 문제 또는 혼란이 있습니까? 당신은 그것을 할 수 toastr 및 아약스 또는 푸셔를 시도 할 수 있습니다 https://pusher.com/tutorials 푸셔 단지 통지를 구현하는 데 사용할 수 있지만 자체 채팅 라이브 –

+0

글쎄, 어떻게 그것에 대해 가야할지 모르겠다. 내가 푸셔를 설치하려고 노력한 코드를 작성하지만 php-curl이 없으므로 설치가되지 않습니다. –

+1

아약스가 실시간 채팅 응용 프로그램에 적합하다고 생각합니까? – kunal

답변

0
$(window).load(realTime); 
    function realTime() { 
     $.ajax({ 
      type:'post', 
      url:'/chat/get', 
      data:{ 
       '_token':$('input[name=_token]').val(), 
      }, 
      success: function (data) { 
       $('#message').replaceWith(' <ul class="media-list" id="message"></ul>'); 
       for (var i=0; i < data.length; i++){ 
        $('#message').append(' <li class="media"><div class="media-body"><div class="media"><div class="media-body">'+data[i].message+'<br/><small class="text-muted">'+data[i].from_name+'|'+ data[i].created_at+'</small><hr/></div></div></div></li>') 
       } 
      setTimeout(realTime, 2000); 
      }, 
     }); 

    } 
} 

오전 ..

+0

나는 그것이 나쁘다는 것을 알고 있습니다.하지만 설문지마다 그 옵션에 대해 아약스 전화를 요구하고있다. 그래서 나는이 대답을 선택했다. –