Чат в реальном времени в laravel и vue js с помощью pusher?
Привет всем, пожалуйста, сообщите мне, как я могу использовать толкатель в системе чата в реальном времени. Пушер установлен в моем приложении и работает для уведомлений в реальном времени, но я хочу добавить пушер в мои сообщения. Моя система сообщений работает нормально. Пожалуйста, добавьте код толкателя здесь. Если это нужно трансляции событий или уведомлений, вы можете сказать мне, что у меня есть концепция этого. что я должен добавить в событие и т. д. но у меня нет понятия толкача. Это код файла vue js.
`data:{ msg: 'my new msg', content: '', privsteMsgs: [], singleMsgs:[], msgFrom: '', conID: '', friend_id: '', seen: false, newMsgFrom: ''`
ready: function(){
this.created();
},
created(){
axios.get('http://localhost:8000/getMessages')
.then(response => {
console.log(response.data); // show if success
app.privsteMsgs = response.data; //we are putting data into our posts array
})
.catch(function (error) {
console.log(error); // run if we have error
});
},
methods:{
message: function(id){
// alert(id);
axios.get('http://localhost:8000/getMessages' +id)
.then(response => {
console.log(response.data); // show if success
app.singleMsgs = response.data;
app.conID = response.data[0].conversation_id;
})
.catch(function (error) {
console.log(error); // run if we have error
});
},
inputHandler(e){
if(e.keyCode===13 && !e.shiftKey){
e.preventDefault();
this.sendMsg();
}
},
sendMsg(){
if(this.msgFrom){
// alert(this.conID);
// alert(this.msgFrom);
axios.post('http://localhost:8000/sendMessage', {
conID: this.conID,
msg: this.msgFrom
})
.then( (response) => {
// console.log('save Successfully');
console.log(response.data); // show if success
if(response.status===200){
console.log('save Successfully')
// console.log('save Successfully'+ data);
app.singleMsgs = response.data;
app.msgFrom= '';
// / app.conID = response.data[0].conversation_id;
}
})
.catch(function (error) {
console.log(error); // run if we have error
});
}
},
friendID: function(id){
app.friend_id = id;
},
sendNewMsg(){
axios.post('http://localhost:8000/sendNewMessage', {
friend_id: this.friend_id,
msg: this.newMsgFrom,
})
.then(function (response) {
console.log(response.data); // show if success
if(response.status===200){
window.location.replace('http://localhost:8000/messages');
app.msg = 'your message has been sent successfully';
}
})
.catch(function (error) {
console.log(error); // run if we have error
});
}
}
Это маршруты
Route::get('/messages', function () {
return view('messages');
}); Route:: get ('/ getMessages', function () {
$allUsers1 = DB::table('users')
->Join('conversations','users.id','conversations.user_one')
->where('conversations.user_two', Auth::user()->id)->get();
$allUsers2 = DB::table('users')
->Join('conversations','users.id','conversations.user_two')
->where('conversations.user_one', Auth::user()->id)->get();
return array_merge($allUsers1->toArray(), $allUsers2->toArray());
}); Route:: get ('/ getMessages {id}', функция ($ id) {
$userMsg = DB::table('messages')
->where('conversation_id', $id)->get();
// echo $userMsg;
return $userMsg;
}); Маршрут:: пост ('/ SendMessage','MessagesController@ SendMessage');
Маршрут:: получить ('NewMessage/{идентификатор}','MessagesController@ NewMessage'); Route::post('sendNewMessage', 'MessagesController@sendNewMessage');
И это функции контроллера
public function sendMessage(Request $request){
$conID= $request->conID;
$msg= $request->msg;
$checkUserId = DB::table('messages')->where('conversation_id', $conID)->get();
if($checkUserId[0]->user_from== Auth::user()->id){
// fetch user_to
$fetch_userTo = DB::table('messages')->where('conversation_id', $conID)
->get();
$userTo = $fetch_userTo[0]->user_to;
}else{
$fetch_userTo = DB::table('messages')->where('conversation_id', $conID)
->get();
$userTo = $fetch_userTo[0]->user_to;
}
// now send message
$sendM = DB::table('messages')->insert([
'user_to' => $userTo,
'user_from' => Auth::user()->id,
'msg' => $msg,
'status' => 1,
'conversation_id' => $conID
]);
if($sendM){
$userMsg = DB::table('messages')
->join('users', 'users.id','messages.user_from')
->where('messages.conversation_id', $conID)->get();
return $userMsg;
}
}
public function newMessage($id){
$uid = Auth::user()->id;
$friend = DB::table('users')->where("id", "=", $id)->first();
return view('newMessage', compact('friend'));
}
public function sendNewMessage(Request $request)
{
$msg = $request->msg;
$friend_id = $request->friend_id;
$myID = Auth::user()->id;
$checkCon1 = DB::table('conversations')->where('user_one',$myID)
->where('user_two',$friend_id)->get();
$checkCon2 = DB::table('conversations')->where('user_two',$myID)
->where('user_one',$friend_id)->get();
$allCons = array_merge($checkCon1->toArray(),$checkCon2->toArray());
if(count($allCons)!=0){
$conID = $allCons[0]->id;
$MsgSent = DB::table('messages')->insert([
'user_from' => $myID,
'user_to' => $friend_id,
'msg' => $msg,
'conversation_id' => $conID,
'status' => 1
]);
}
else{
$con = new Conversation();
$con->user_one = $myID;
$con->user_two = $friend_id;
$con->save();
echo $con->id;
$MsgSent = DB::table('messages')->insert([
'user_from' => $myID,
'user_to' => $friend_id,
'msg' => $msg,
'conversation_id' => $con->id,
'status' => 1
]);
}
}
1 ответ
/** * Сначала мы загрузим все зависимости JavaScript этого проекта, включая * Vue и другие библиотеки. Это отличная отправная точка при * создании надежных и мощных веб-приложений с использованием Vue и Laravel. * /
требуется ('./ самонастройки');
window.Vue = require('vue');
импорт Vue из 'vue' импорт VueChatScroll из 'vue-chat-scroll' Vue.use (VueChatScroll) // Загрузка компонента vuejs Vue.component ('example-component', require('./ component / ExampleComponent.vue')); Vue.component ('chatbox', require('./ components / Chatbox.vue'));
const app = new Vue ({el: '#app', data: {msg: 'Нажмите на пользователя слева:', getUserChat:'', privateMsgs: [], singleMsgs: [], msgFrom: '', conID: '', friend_id: '', seen1: false, seen: false, newMsgFrom: '', ввод: '', BlackchaterUrl: ' http://localhost:8000/', }, watch:{ msgFrom(){ Echo.private('chat') .whisper('typing', { name: this.msgFrom, userid: this.getUserChat }); } }, ready: function() { this.created(); }, созданный () { axios.get(this.BlackchaterUrl + '/getMessages') .then(response => { console.log(response.data);// показать успешность app.privateMsgs = response.data;// мы помещаем данные в наше сообщение массив}) .catch(function (error) { console.log(error);// показать, если получена какая-то ошибка}); }, методы: { messages(id) { axios.get(this.BlackchaterUrl + '/getMessages/' + id) .then(response => { console.log(response.data);// показать успешность app.singleMsgs = response.data;// мы помещаем данные в наш почтовый массив app.conID = response.data[0].conversation_id; app.getUserChat =response.data[0].user_ от; }) .catch(function (error) { console.log(error);// показать, если есть какая-то ошибка}); },
inputHandler(e)
{
if(e.keyCode ===13 && !e.shiftKey)
{
e.preventDefault();
this.sendMsg();
this.msgFrom = "";
}
},
sendMsgOld()
{
this.sendMsg();
this.msgFrom = "";
},
sendMsg()
{
if(this.msgFrom.length != 0)
{
axios.post(this.BlackchaterUrl + '/SendMessage', {
conID: this.conID,
msg : this.msgFrom
})
.then(function (response) {
console.log(response.data);//show if success
if(response.status===200)
{
app.singleMsgs = response.data;
}
})
.catch(function (error) {
console.log(error);//show if get some error
});
}
},
friendID: function(id)
{
app.friend_id = id;
},
inputHandler1(e)
{
if(e.keyCode ===13 && !e.shiftKey)
{
e.preventDefault();
this.sendNewMsg();
this.msgFrom = "";
}
},
sendNewMsg()
{
axios.post(this.BlackchaterUrl + '/sendNewMessage', {
friend_id: this.friend_id,
msg: this.newMsgFrom,
})
.then(function (response) {
console.log(response.data); // show if success
if(response.status===200){
window.location.replace('http://localhost:8000/messages');
app.msg = 'your message has been sent successfully';
}
})
.catch(function (error) {
console.log(error); // run if we have error
});
}
},
mounted()
{
Echo.private('chat')
.listen('ChatEvent', (e) => {
document.getElementById('chatAudioNotif').play();
this.singleMsgs.push(e);
//console.log(e);
})
.listenForWhisper('typing', (e) => {
if(e.name !='')
{
this.typing = 'typing .........'
}
else
{
this.typing = ''
}
});
}
});