【问题标题】:Realtime-notifications with ajax使用 ajax 的实时通知
【发布时间】:2017-12-08 10:37:07
【问题描述】:

您好,我是一名新开发人员,在我的 laravel 项目中,我已经使用 ajax 实现了实时聊天功能,但我还想使用 ajax 添加实时通知系统,以便在写入消息时通知所有用户留言如果你能帮助我会非常有帮助

这是我的索引页:

@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   

这是我的路线:

Route::get('/chat', 'Chat\ChatController@index')->name('chat.index');
Route::post('/chat/send', 'Chat\ChatController@sendMessage' )->name('admin.chat.sendMessage');
Route::post('/chat/get', 'Chat\ChatController@getMessage' );

这是我的控制器:

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

    }

抱歉英语不好,但我是外国人

【问题讨论】:

  • 如果您已经实现了聊天应用程序,那么您对实时通知有什么问题或困惑?你可以用 toastr 和 ajax 来做,或者你可以试试 pusher pusher.com/tutorials pusher 不仅可以用来实现通知,还可以用来实现实时聊天本身
  • 好吧,我不知道该怎么做,我该如何编写我尝试安装 pusher 但我没有 php-curl 所以它不会安装的代码
  • 你认为 ajax 适合实时聊天应用吗
  • @kunal 我同意它不是:websockets 是“实时”通知的方式。 Ajax 只是不适合/不够快完成这项任务。
  • 那是我唯一的选择,因为当我使用 pusher 或 vuejs 时,它们不起作用,我找到了一个很好的教程

标签: php ajax laravel notifications


【解决方案1】:

【讨论】:

  • 欢迎来到 Stackoverflow!请提供解释和/或示例以及您的答案,因为单个文档链接可能没有那么有用。
【解决方案2】:
   $(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);
            },
        });

    }
}

试试这个..

【讨论】:

  • 我知道这很糟糕.. 但根据调查问卷,他要求 ajax 调用该选项。这就是我选择这个答案的原因。
猜你喜欢
  • 1970-01-01
  • 2016-03-27
  • 2012-07-05
  • 2012-01-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多