How to properly render in Laravel when using Redis?

Question

JavaScript

I'm sending data from a function to Redis and a database to notify users of the status of the action they've taken. I send to the database for storage, and my redis is used as a conduit to send updates to sockets. In principle, everything works almost as intended.

I need to do like this:

action 1 -> notification 1 -> action 2 -> notification 2.

But the problem is that when i send the data i get the following:

action 1 -> nothing happens -> action 2 -> action #1 notification -> action 3 -> action #2 notification.

That is, when the data is first sent, the notification is lost. How can I fix this?

Function in Laravel:

$returnValue = [
    'user_id' => $this->user->id,
    'title' => 'Новое уведомление',
    'message' => 'Уведомление '.Request::get('operation').'',
    'status' => '1',
    'html' => view('includes.notifications', compact('user_notifications'))->render(),
]; 
$this->redis->publish(self::NEW_NOTIFICATION, json_encode($returnValue));
Notify::create(
    [
    'id' => $last_id + 1,
    'user_id' => $this->user->id,
    'title' => 'Новое уведомление,
    'message' => 'Уведомление '.Request::get('operation').'',
    'status' => '1'
    ]  
);

In nodejs backend I use:

redisClient.subscribe('notify');
redisClient.subscribe('new.notify');
redisClient.on("message", function (channel, message) {
    if (channel == 'new.notify')
    {
        io.sockets.emit(channel, message);
    }
  if (channel == 'del.notify') 
  {
        io.sockets.emit(channel, message);
    }
});

new.notify is the channel where new notifications arrive.

In blade, my notifications are displayed like this:

@foreach($user_notifications as $notify)
@if ($notify->status == 2)
<div class="notification"><svg class="notification__type-icon" rv-svg-use="'notification-' | add model:type"><use xlink:href="#notification-error"></use></svg>
@elseif ($notify->status == 1)
<div class="notification"><svg class="notification__type-icon" rv-svg-use="'notification-' | add model:type"><use xlink:href="#notification-success"></use></svg>
@endif
<div class="notification__content">
    <div class="notification__title">{{ $notify->title }}</div>
    <div class="notification__text">{!! $notify->message !!}</div>
    <div class="notification__date">{{ $notify->date }}</div>
</div>
@if ($notify->status == 2)
<svg width="100%" height="100%"><use xlink:href="#notification-remove"></use><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" id="notification-error">
    <g fill="#E61414" fill-rule="nonzero">
        <path d="M12.46 0C5.59 0 0 5.59 0 12.46c0 6.87 5.59 12.458 12.46 12.458 6.87 0 12.458-5.589 12.458-12.459C24.918 5.59 19.33 0 12.46 0zm0 22.876c-5.745 0-10.418-4.673-10.418-10.417S6.715 2.043 12.46 2.043s10.417 4.672 10.417 10.416c0 5.744-4.673 10.417-10.417 10.417z"></path>
        <path d="M13.904 12.46l3.523-3.524a1.021 1.021 0 1 0-1.444-1.445l-3.524 3.524-3.523-3.524A1.021 1.021 0 0 0 7.49 8.935l3.524 3.524-3.524 3.524a1.021 1.021 0 0 0 1.444 1.444l3.524-3.524 3.524 3.524a1.019 1.019 0 0 0 1.444 0 1.021 1.021 0 0 0 0-1.444l-3.523-3.524z"></path>
    </g>
</svg></svg>
@elseif ($notify->status == 1)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" id="notification-success">
    <g fill="#82E614" fill-rule="nonzero">
        <path d="M12.46 0C5.59 0 0 5.59 0 12.46c0 6.87 5.59 12.458 12.46 12.458 6.87 0 12.458-5.589 12.458-12.459C24.918 5.59 19.33 0 12.46 0zm0 22.876c-5.745 0-10.418-4.673-10.418-10.417S6.715 2.043 12.46 2.043s10.417 4.672 10.417 10.416c0 5.744-4.673 10.417-10.417 10.417z"></path>
        <path d="M17.85 7.677l-7.398 7.398-3.383-3.382a1.021 1.021 0 0 0-1.444 1.444l4.104 4.104a1.018 1.018 0 0 0 1.445 0l8.12-8.12a1.021 1.021 0 0 0-1.445-1.444z"></path>
    </g>
</svg>
@endif
</div>
@endforeach

In the site's JS I use:

.on('new.notify', function (data) {
    data = JSON.parse(data);
   $('#notifications').html(data.html);
    console.log(data);
})

Console.log(data) on the first action in the html section gives me an empty value:


already on the next action, the template starts rendering for me and console.log shows the previous value in the html section.

And there is the POST request itself in JS, which handles the action on the button:

$('.calc').click(function () {
        var operation = $(this).attr('data-type');
        $.post('/api/new', {operation: operation}, function (data) {
        });
    });

What could be the problem? Wrong output in JS or what? How can this be fixed?