Продолжаем создавать чат на Laravel 5.6 и Ratchet. Сегодня мы создадим основные функции отображения нашего чата и Вьюхи. Итак.
Создадим роут для нашей страницы с чатами.
Route::get('/conversations/{conversation_id?}', 'HomeController@conversations')->name('conversations');
В контроллере создадим функцию conversations:
public function conversations($conversation_id = 0)
{
$current_user = Auth::user();
$page_title = 'Обсуждения';
$projects = Projects::where('status', 1)->get();
$users = User::all();
$conversations = Conversations::where('is_visible', 1)->orderBy('updated_at', 'desc')->get();
foreach ($conversations as $conversation) {
$conversation = Conversations::getConversationInfo($conversation);
}
if ($conversation = Conversations::find($conversation_id)) {
$conversation = Conversations::getConversationInfo($conversation);
if ($conversation->title) {
$page_title = 'Обсуждение "' . $conversation->title . '"';
} else {
$page_title = 'Обсуждение без темы';
}
} else {
$conversation = null;
}
return view(
'conversations',
[
'conversation' => $conversation,
'conversations' => $conversations,
'current_user' => $current_user,
'page_title' => $page_title,
'users' => $users
]
);
}
В модели Conversations создадим функцию getConversationInfo:
public static function getConversationInfo($conversation)
{
if ($conversation->title) {
$conversation->title_class = 'with-title';
} else {
$conversation->title_class = 'without-title';
$conversation->title = 'Без темы';
}
$conversation->messages = Messages::where('conversation_id', $conversation->id)->get();
foreach($messages as $message){
$message->author = User::find($message->author_id)->name;
$message->class = ($message->author_id == Auth::user()->id) ? 'message-item-my' : 'message-item-other';
}
$conversation->followers = Followers::getFollowers($conversation->id, 'conversation');
$conversation->is_follower = Followers::isFollower(Auth::user()->id, 'conversation', $conversation->id);
$conversation->users = User::all();
foreach ($conversation->users as $user) {
$user->followed_conversation = Followers::isFollower($user->id, 'conversation', $conversation->id);
}
return $conversation;
}
В модели Followers создадим функцию getFollowers, которая будет получать всех пользователей, подписанных на данный чат:
public static function getFollowers($post_id, $type)
{
$users = [];
$followers = Followers::where('type', $type)->where('post_id', $post_id)->get();
foreach ($followers as $key=>$follower){
$users[$key] = User::find($follower->follower_id);
}
return $users;
}
и функцию, проверяющую — подписан ли текущий пользователь на данный чат:
public static function isFollower($user_id, $type, $post_id)
{
if (Followers::where('follower_id', $user_id)
->where('type', $type)
->where('post_id', $post_id)
->first()) {
return true;
} else {
return false;
}
}
Создадим вью conversations.blade:
@extends('layouts.app')
@section('content')
{{csrf_field()}}
<input type="hidden" name="current_user" value="{{Auth::user()->id}}" id="current-user">
<div class="container-fluid text-center page-header">
<h1>{{$page_title}}</h1>
</div>
<div class="container-fluid page-body">
<div class="row">
<div class="col-md-12">
@if($conversation != null) <!--если мы просматриваем отдельный чат-->
<div class="panel panel-default conversations-item" id="conversations-item-{{$conversation->id}}">
<div class="panel-heading">
<h3>
<a href="/conversations/{{$conversation->id}}" class="{{$conversation->title_class}}"
id="conversation-title-{{$conversation->id}}">
{{$conversation->title}}
</a>
<input type="text" style="display: none" id="conversation-title-input-{{$conversation->id}}"
class="conversation-title-input" value="{{$conversation->title}}" data-id="{{$conversation->id}}">
<div class="float-right conversation-header-button conversation-delete-button"
data-id="{{$conversation->id}}" data-single="yes">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</div>
<div class="float-right conversation-header-button conversation-edit-title-button"
data-id="{{$conversation->id}}">
<i class="fa fa-pencil" aria-hidden="true"></i>
</div>
</h3>
</div>
<div class="panel-body">
<div class="message-block" id="message-block-{{$conversation->id}}">
@foreach($conversation->messages as $message)
<div class="message-item {{$message->class}}">
<div class="message-heading">
<b>{{$message->author}}</b>
<small>{{$message->created_at}}</small>
</div>
<div class="message-body">
{!! $message->text !!}
</div>
</div>
@endforeach
</div>
@include('partials.create_message')
@include('partials.followers_conversation')
</div>
</div>
@else <!--если просматриваем список чатов - отобразим форму создания нового чата и список всех чатов-->
<div class="panel panel-default">
<div class="panel-heading">
<h3>Новое обсуждение</h3>
</div>
<div class="panel-body">
@include('partials.create_conversation')
</div>
</div>
<div class="conversations-block">
@forelse($conversations as $conversation)
<div class="panel panel-default conversations-item" id="conversations-item-{{$conversation->id}}">
<div class="panel-heading">
<h3>
<a href="/conversations/{{$conversation->id}}" class="{{$conversation->title_class}}"
id="conversation-title-{{$conversation->id}}">
{{$conversation->title}}
</a>
<input type="text" style="display: none" id="conversation-title-input-{{$conversation->id}}"
class="conversation-title-input" value="{{$conversation->title}}"
data-id="{{$conversation->id}}">
<div class="float-right conversation-header-button conversation-delete-button"
data-id="{{$conversation->id}}">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</div>
<div class="float-right conversation-header-button conversation-edit-title-button"
data-id="{{$conversation->id}}">
<i class="fa fa-pencil" aria-hidden="true"></i>
</div>
</h3>
</div>
<div class="panel-body">
<div class="message-block" id="message-block-{{$conversation->id}}">
@foreach($conversation->messages as $message)
<div class="message-item {{$message->class}}">
<div class="message-heading">
<b>{{$message->author}}</b>
<small>{{$message->created_at}}</small>
</div>
<div class="message-body">
{!! $message->text !!}
</div>
</div>
@endforeach
</div>
@include('tasks.partials.create_message')
@include('tasks.partials.followers_conversation')
</div>
</div>
@empty
<!--Здесь можно написать сообщение о том, что пока не создано ни одного чата-->
@endforelse
</div>
@endif
</div>
</div>
</div>
<script src="{{asset('js/pages_scripts/conversations.js')}}"></script>
@endsection
Создадим формы создания нового чата, создания сообщения и блок подписки. /resources/views/partials/create_conversation.blade.php
<input type="text" class="form-control" placeholder="Тема обсуждения" id="new-conversation-title">
<label for="new-conversation-message" class="for-textarea">
<div id="new-conversation-editor">
<textarea id="new-conversation-message" rows="1" class="form-control"></textarea>
</div>
</label>
<button class="btn btn-primary" id="new-conversation-submit">Отправить</button>
<div class="dialog-hover-block float-right conversation-button">
<span id="new-conversation-mention">
<i class="fa fa-at" aria-hidden="true"></i>
</span>
<ul class="dialog new-conversation-mention-dialog">
@foreach($users as $user)
<li data-name="{{$user->name}}">{{$user->name}}</li>
@endforeach
</ul>
</div>
/resources/views/partials/create_message.blade.php
<div id="message-editor-{{$conversation->id}}">
<textarea id="new-message-{{$conversation->id}}" rows="1" class="form-control message-textarea"></textarea>
</div>
<button class="btn btn-primary message-submit" id="message-submit-{{$conversation->id}}" data-conversation_id="{{$conversation->id}}">
Отправить
</button>
<div class="dialog-hover-block float-right conversation-button">
<span class="message-mention-button" id="message-mention-button-{{$conversation->id}}"
data-conversation_id="{{$conversation->id}}">
<i class="fa fa-at" aria-hidden="true"></i>
</span>
<ul class="dialog mention-dialog" id="mention-dialog-{{$conversation->id}}">
@foreach($users as $user)
<li data-name="{{$user->name}}" data-conversation_id="{{$conversation->id}}">{{$user->name}}</li>
@endforeach
</ul>
</div>
/resources/views/partials/followers_conversation.blade.php
<hr/>
<div class="row">
<div class="col-md-8">
Подписчики:
<span class="followers-list">
@forelse($conversation->followers as $follower)
<a href="#" class="users-item followers-item-{{$follower->id}}">
{{$follower->name}}
</a>
@empty
@endforelse
</span>
<span class="dialog-hover-block">
<span class="add-follower-button">
<i class="fa fa-user-plus" aria-hidden="true" title="Добавить подписчика"></i>
</span>
<ul class="dialog followers-dialog">
@foreach($conversation->users as $user)
@if($user->id != Auth::user()->id)
<li data-user_id="{{$user->id}}" data-post_id="{{$conversation->id}}" data-type="conversation"
class="follower-list-item-{{$user->id}}">
{{$user->name}}
@if($user->followed_conversation)
<i class="fa fa-minus-square-o toggle-follower" aria-hidden="true"></i>
@else
<i class="fa fa-plus-square-o toggle-follower" aria-hidden="true"></i>
@endif
</li>
@endif
@endforeach
</ul>
</span>
</div>
<div class="col-md-4">
<span class="follow-button-block float-right @if($conversation->is_follower == true) follow-button-block-active @else @endif"
data-post_id="{{$conversation->id}}" data-type="conversation">
<i class="fa fa-bell-o" aria-hidden="true"></i>
<span class="follow-button-text">
@if($conversation->is_follower == true)
Отписаться
@else
Подписаться
@endif
</span>
</span>
</div>
</div>
Создадим файл скриптов для нашего чата /public/js/conversations.js и начнем по порядку добавлять функционал. Создание нового чата:
$('#new-conversation-submit').click(function () {
let user_id = $('#current-user').val();
let conversation_title = $('#new-conversation-title').val();
let message_text = $('#new-conversation-message').val();
if (message_text) {
createConversationAjax(conversation_title, user_id, message_text);
} else {
alert('Введите текст сообщения');
}
});
Напишем служебные функции для нашего Аякса:
function ajaxErrorsHandling(jqxhr, status, errorMsg){
$('.loading').hide();
if(jqxhr.status == 401){
$(location).attr('href', '/login/')
}
}
function ajaxSetup() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
}
Функция создания нового чата:
function createConversationAjax(conversation_title, user_id, message_text) {
$('.loading').show();
ajaxSetup();
$.ajax({
url : "/createConversationAjax/",
dataType: "json",
data : {
conversation_title: conversation_title,
user_id : user_id,
message_text : message_text
},
success : function (data) {
$('.loading').hide();
$('#new-conversation-title').val('');
$('#new-conversation-message').val('');
let users_string = '';
for (var i = 0; i < data.success.users.length; i++) {
users_string = users_string + '<li data-name="' + data.success.users[i].name + '" ' +
'data-conversation_id="' + data.success.conversation.id + '">' + data.success.users[i].name + '</li>'
}
let followers_string = '';
for (var i = 0; i < data.success.users.length; i++) {
if (data.success.users[i].id != $('#current-user').val) {
followers_string = followers_string +
'<li data-user_id="' + data.success.users[i].id + '" data-post_id="' + data.success.conversation.id + '" data-type="conversation"' +
' class="follower-list-item-' + data.success.users[i].id + '">' +
data.success.users[i].name +
' <i class="fa fa-plus-square-o toggle-follower" aria-hidden="true"></i>' +
'</li>';
}
}
$('.conversations-block').prepend('' +
'<div class="panel panel-default conversations-item" id="conversations-item-' + data.success.conversation.id + '">\n' +
' <div class="panel-heading">\n' +
' <h3>\n' +
' <a href="/conversations/' + data.success.conversation.id + '" class="' + data.success.conversation.title_class + '"\n' +
' id="conversation-title-' + data.success.conversation.id + '">\n' +
data.success.conversation.title +
' </a>\n' +
' <input type="text" style="display: none" id="conversation-title-input-' + data.success.conversation.id + '"\n' +
' class="conversation-title-input" value="' + data.success.conversation.title + '"\n' +
' data-id="' + data.success.conversation.id + '">\n' +
' <div class="float-right conversation-header-button conversation-delete-button"\n' +
' data-id="' + data.success.conversation.id + '">\n' +
' <i class="fa fa-trash-o" aria-hidden="true"></i>\n' +
' </div>\n' +
' <div class="float-right conversation-header-button conversation-edit-title-button"\n' +
' data-id="' + data.success.conversation.id + '">\n' +
' <i class="fa fa-pencil" aria-hidden="true"></i>\n' +
' </div>\n' +
' </h3>' +
' </div>\n' +
' <div class="panel-body">\n' +
' <div class="message-block" id="message-block-' + data.success.conversation.id + '">\n' +
' <div class="message-item message-item-my">\n' +
' <div class="message-heading">\n' +
' <b>' + data.success.message.author + '</b>\n' +
' <small>' + data.success.message.created_at + '</small>\n' +
' </div>\n' +
' <div class="message-body">\n' +
data.success.message.text +
' </div>\n' +
attachment_string +
' </div>\n' +
' </div>\n' +
' <textarea id="new-message-' + data.success.conversation.id + '" rows="1" class="form-control" style="border: solid 1px #cccccc"></textarea>\n' +
' <button class="btn btn-primary message-submit" id="message-submit-' + data.success.conversation.id + '" ' +
' data-conversation_id="' + data.success.conversation.id + '">\n' +
' Отправить\n' +
' </button>\n' +
' <div class="dialog-hover-block float-right conversation-button">\n' +
' <span class="message-mention-button" id="message-mention-button-' + data.success.conversation.id + '"\n' +
' data-conversation_id="{{$conversation->id}}">\n' +
' <i class="fa fa-at" aria-hidden="true"></i>\n' +
' </span>\n' +
' <ul class="dialog mention-dialog" id="mention-dialog-' + data.success.conversation.id + '">\n' +
users_string +
' </ul>\n' +
' </div>' +
' <hr/>\n' +
' <div class="row">\n' +
' <div class="col-md-8">\n' +
' Подписчики:\n' +
' <span class="followers-list" id="followers-list-' + data.success.conversation.id + '">\n' +
' </span>\n' +
' <span class="dialog-hover-block">\n' +
' <span class="add-follower-button">\n' +
' <i class="fa fa-user-plus" aria-hidden="true" title="Добавить подписчика"></i>\n' +
' </span>\n' +
' <ul class="dialog followers-dialog">\n' +
followers_string +
' </ul>\n' +
' </span>' +
' </div>\n' +
' <div class="col-md-4">\n' +
' <span class="follow-button-block float-right"\n' +
' data-post_id="' + data.success.conversation.id + '" data-type="conversation">\n' +
' <i class="fa fa-bell-o" aria-hidden="true"></i>\n' +
' <span class="follow-button-text">\n' +
' Подписаться\n' +
' </span>\n' +
' </span>\n' +
' </div>\n' +
' </div>' +
' </div>\n' +
'</div>'
);
},
error: function(jqxhr, status, errorMsg) {
ajaxErrorsHandling(jqxhr, status, errorMsg);
}
});
}
Создадим роут для Аякса:
Route::get('/createConversationAjax/', 'HomeController@createConversationAjax')->name('createConversationAjax');
В контроллере пишем:
public function createConversationAjax(Request $request)
{
$conversation = new Conversations;
$conversation->title = $request->conversation_title;
$conversation->owner_id = $request->user_id;
$conversation->save();
$conversation = Conversations::getConversationInfo($conversation);
$message = new Messages;
$message->text = $request->message_text;
$message->author_id = $request->user_id;
$message->conversation_id = $conversation->id;
$message->save();
$message->author = User::find($message->author_id)->name;
$result['conversation'] = $conversation;
$result['message'] = $message;
$result['users'] = User::all();
if ($result) {
echo json_encode(['success' => $result]);
} else {
echo json_encode(['fail' => 'Error occurred']);
}
}
Удаление чата:
body.on('click', '.conversation-delete-button', function () {
let conversation_id = $(this).attr('data-id');
if (confirm('Удалить?')) {
deleteConversationAjax(conversation_id);
}
});
function deleteConversationAjax(conversation_id) {
$('.loading').show();
ajaxSetup();
$.ajax({
url : "/deleteConversationAjax/",
dataType: "json",
data : {
conversation_id: conversation_id
},
success : function () {
$('.loading').hide();
$('#conversations-item-' + conversation_id).detach();
},
error: function(jqxhr, status, errorMsg) {
ajaxErrorsHandling(jqxhr, status, errorMsg);
}
});
}
в /routes/web.php
Route::get('/deleteConversationAjax/', 'HomeController@deleteConversationAjax')->name('deleteConversationAjax');
В контроллере:
public function deleteConversationAjax(Request $request)
{
$conversation = Conversations::find($request->conversation_id);
$conversation->is_visible = 0;
$conversation->save();
if ($conversation) {
echo json_encode(['success' => $conversation]);
} else {
echo json_encode(['fail' => 'Error occurred']);
}
}
При нажатии на заголовок чата, позволим его отредактировать:
body.on('click', '.conversation-edit-title-button', function () {
let conversation_id = $(this).attr('data-id');
$('#conversation-title-' + conversation_id).hide(300);
$('#conversation-title-input-' + conversation_id).show(300).focus();
});
body.on('focusout', '.conversation-title-input', function () {
let conversation_id = $(this).attr('data-id');
$(this).hide();
$('#conversation-title-' + conversation_id).text($(this).val()).show(300);
updateConversationAjax(conversation_id, $(this).val());
});
function updateConversationAjax(conversation_id, conversation_title) {
$('.loading').show();
ajaxSetup();
$.ajax({
url : "/updateConversationAjax/",
dataType: "json",
data : {
conversation_id : conversation_id,
conversation_title: conversation_title
},
success : function () {
$('.loading').hide();
},
error: function(jqxhr, status, errorMsg) {
ajaxErrorsHandling(jqxhr, status, errorMsg);
}
});
}
в /routes/web.php
Route::get('/updateConversationAjax/', 'HomeController@updateConversationAjax')->name('updateConversationAjax');
В контроллере:
public function updateConversationAjax(Request $request)
{
$conversation = Conversations::find($request->conversation_id);
$conversation->title = $request->conversation_title;
$conversation->save();
if ($conversation) {
echo json_encode(['success' => $conversation]);
} else {
echo json_encode(['fail' => 'Error occurred']);
}
}
В следующей статье наконец-таки будем отправлять сообщения, получать их и выводить пуш-уведомления.