laravel私人聊天应用程序

时间:2017-12-15 11:51:45

标签: php ajax laravel

您好我是新开发人员,在我的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);
}

这里是我的gruop聊天的迁移:

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateMessagesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('messages', function (Blueprint $table) {
            $table->increments('id');
            $table->string('from_name');
            $table->text('message');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('messages');
    }
}

对于糟糕的英语提前抱歉,如果您能帮助我,或者您可以发送一个好的教程链接,我将非常感激

1 个答案:

答案 0 :(得分:0)

您需要使用websocket进行实时连接,您可以使用Laravel实现此目的。

这样做实际上是保持服务器和客户端之间的连接打开,并允许服务器将数据发送到客户端,而不仅仅是相反。因此,只要您从其他参与者那里收到消息,您就可以将消息发送给聊天中的某个人。

在Laravel中称为广播,请看这里的文档: https://laravel.com/docs/5.5/broadcasting