【发布时间】: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