lipasite
@lipasite

Laravel + Node + Redis + Socket.io + VueJS 2: realtime app — почему не обновляется счетчик лайков у другого юзера?

Снова привет! Разрабатываю небольшое realtime приложение на Laravel. Написал 2 Vue-компонента для установки и отображения кол-ва лайков:
  • LikePost.vue - кнопка, устанавливает/отменяет лайк
  • LikePostCount.vue - лейбл показа кол-ва лайков

Во Vue также подключена шина событий bus, которая эммитит (без установленных socket.io и node) кол-во лайков сразу после нажатия кнопки на лейбл кол-ва лайков, таким образом он обновляется.
Сейчас возникла необходимость обновлять кол-во лайков таким образом, чтобы это кол-во сразу отображалось у других пользователей, независимо - поставил он лайк или нет. То есть использовать вещание событий всем клиентами, подписанным на канал.
Для решения этой задачи установил
  • node v8.11.3
  • redis-server
  • express 4.16.3
  • ioredis 3.2.2
  • socket.io 2.1.1
  • socket.io-client 2.2.0


Создал в корне server.js

var http = require('http').Server();
var io = require('socket.io')(http);
var Redis = require('ioredis');
var redis = new Redis();
redis.subscribe('news-action');
redis.on('message', function(channel, message) {
 console.log('Message received: ' + message);
 console.log('Channel :' + channel);
 message = JSON.parse(message);
 io.emit(channel + ':' + message.event, message.data);
});
http.listen(3000, function(){
    console.log('Listening on Port: 3000');
});


Создал Event - /app/Events/PostLiked.php
<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class PostLiked implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $result;
    
    public function __construct($data)
    {
        $this->result = $data;
    }

    public function broadcastOn()
    {
       return ['news-action'];
    }
}


Vue-компоненты
LikePost.vue - кнопка для установки/снятия лайка
<template> 
        <span>
            
            <button v-if="isliked" 
                @click.prevent="dislike(post_id)"
                type="button" 
                class="btn btn-block btn-danger btn-xs" 
                name="like-button">
                    <i class="fa fa-heart"></i>
            </button>
            <button v-else
                @click.prevent="like(post_id)" 
                type="button" 
                class="btn btn-block btn-success btn-xs" 
                name="like-button">
                    <i class="fa fa-heart-o">
                        </i>
                </button>
            
        </span>    
 </template> 

<script>
    import { bus } from '../bootstrap';
    import 'vuejs-noty/dist/vuejs-noty.css'
    export default {
        props: ["post_id", "liked"],
        
        data: function() {
            return { 
                isliked: '',
            }
        },
        
        mounted() {
            this.isliked = this.islike ? true : false;
        },
        computed: {
            islike() {
                return this.liked;
            },
        },
        methods: {
            like(post_id) {
            axios
                .post('/blog/posts/like/' + post_id)
                .then(response => { this.isliked = true; 
                      bus.$emit('postliked'); //посылаем event на обновление лейбла с кол-вом лайков
                })
                .catch(response => console.log(response.data));
            },
            dislike(post_id) {
            axios
                .post('/blog/posts/like/' + post_id)
                .then(response => { this.isliked = false; 
                                    bus.$emit('postliked'); //посылаем event на обновление лейбла с кол-вом лайков
                })
                .catch(response => console.log(response.data));
            },
            
        }
    };
</script>


LikePostCount.vue - лейбл кол-ва лайков
<template> 
        <span>
            <i class="fa fa-heart"></i> {{ likescount }}
        </span>    
 </template> 

<script>
    import { bus } from '../bootstrap';
    import 'vuejs-noty/dist/vuejs-noty.css'
    export default {
        props: {
            post_id: {
                    type: Number,
                    default: () => {}
                }
            },
        
        data: function() {
            return { 
                likescount: 0,
            }
        },
        
        created(){
            bus.$on('postliked', (data) => {
               this.updatelikescount(this.post_id); 
            });
        },
        mounted : function() {
            var socket = io('http://localhost:3000');
            socket.on("news-action:App\\Events\\NewEvent", function(data) {
                this.likescount = data.result;
                
            }.bind(this));
           
           this.updatelikescount(this.post_id);
        
        },
        
        methods: {
           
            updatelikescount(post_id) {

            axios
                .get('/blog/post/likecount/' + post_id)
                .then(response => {
                    this.likescount = response.data.data[0][0]
                })        
                .catch(response => console.log(response.data));
             },
            
        }
    };
</script>


LikeController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use App\Like;
use App\BlogPost;
use App\Events\PostLiked;

class LikeController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth');
        $this->middleware('forbid-banned-user');
    }
   
    public function likePost($id)
    {
       
        $this->handleLike('App\BlogPost', $id);
        $post = BlogPost::find($id);
        $like_count = $post->likes->count();
        event(new PostLiked($like_count));
        return redirect()->back();
    }

    public function handleLike($type, $id)
    {
        $existing_like = Like::withTrashed()->whereLikeableType($type)->whereLikeableId($id)->whereUserId(Auth::id())->first();

        if (is_null($existing_like)) {
            Like::create([
                'user_id'       => Auth::id(),
                'likeable_id'   => $id,
                'likeable_type' => $type,
            ]);
        } else {
            if (is_null($existing_like->deleted_at)) {
                $existing_like->delete();
            } else {
                $existing_like->restore();
            }
        }
    }
}

BlogPostController.php
<?php

namespace App\Http\Controllers;
use App\BlogPost;

class BlogPostController extends Controller
{
     public function postGetLikesCountEvent(BlogPost $post)
    {
        $data2[] = [  $post->likes->count()];
        return Response::json([
            'data' => $data2
        ], 200);
    }
}

web.php
<?php
//BlogPost - likes - нажали кнопку лайка
Route::post('blog/posts/like/{post}', 'LikeController@likePost');
//BlogPost - likes - получили кол-во лайков
Route::get('blog/post/likecount/{post}', 'BlogPostController@postGetLikesCountEvent');


Проблема в том, что после нажатия на кнопку лайка кол-во лайков обновляется только у юзера, который проставил лайк. В реалтайме другой юзер не видит, что кол-во лайков изменилось как-то...
В консоли сервера видны события, что они проходят успешно:
Listening on Port: 3000
Message received: {"event":"App\\Events\\PostLiked","data":{"result":2,"socket":null},"socket":null}
Channel :news-action

и в result записывается кол-во лайков.
Скрин примера:
5c2f53696f3f9026231445.pngСкрин Network
5c2f5418e120e889794624.png

P.S. делал по аналогии с видео https://youtu.be/HoSTTfjUGWo
  • Вопрос задан
  • 91 просмотр
Решения вопроса 1
lipasite
@lipasite Автор вопроса
Нашел ошибку в пути к событию: осталось название NewEvent, а нужно PostLiked
socket.on("news-action:App\\Events\\PostLiked"...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы