laravel / echo Goto Github PK

Can't seem to figure this one out - when using the following code I get the error:

TypeError: undefined is not an object (evaluating 'this.connector.privateChannel')

import Echo from "laravel-echo"

window.LaraveLEcho = new Echo({
    broadcaster: 'redis'
});

LaraveLEcho.private('App.User.1').notification((notification) => {
    console.log(notification.type);
});

My Elixir file is as follows:

const elixir = require('laravel-elixir');

require('laravel-elixir-vue');

elixir(mix => {
    mix.sass('zoidberg/zoidberg.scss', 'public/application/css/build')
        .webpack(
        './resources/assets/es6/*.js',
        'public/application/js/headlinehr'
    );
});

And my package.json file looks like:

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-echo": "^0.1.2",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue": "^0.1.4",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.14.0",
    "pusher-js": "^3.2.1",
    "vue": "^1.0.26",
    "vue-resource": "^0.9.3"
  }
}

Any ideas what might be causing this?

When importing Laravel Echo it gives me the following error:

Uncaught TypeError: next is not a function

In the modules/laravel-echo/dist/echo.js line 500:

createClass(Echo, [{
        key: 'registerVueRequestInterceptor',
        value: function registerVueRequestInterceptor() {
            var _this = this;

            Vue.http.interceptors.push(function (request, next) {
                if (_this.socketId()) {
                    request.headers['X-Socket-ID'] = _this.socketId();
                }
                next(); // HERE
            });
        }
    },

I've have a issue with Laravel Echo, it will not send my events to pusher.com and i dont know what i've done wrong. hope some one can help me out

I dont get any errors in the log.

i have set my pusher PUSHER_APP_ID PUSHER_KEY PUSHER_SECRET
and dobbelt check its correct

i have set my driver to this

BROADCAST_DRIVER=pusher
CACHE_DRIVER=file
SESSION_DRIVER=file
QUEUE_DRIVER=database

My event is this

<?php

namespace App\Events;

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

class ChatMessageWasReceived implements ShouldBroadcast
{
    use InteractsWithSockets, SerializesModels;

    public $chatMessage;
    public $user;

    /**
     * Create a new event instance.
     *
     * @param $chatMessage
     * @param $user
     */
    public function __construct($chatMessage, $user)
    {
        $this->chatMessage = $chatMessage;
        $this->user = $user;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('test');

    }
}

my Broadcast Provider is this

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Broadcast;

class BroadcastServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Broadcast::routes();

        /*
         * Authenticate the user's personal channel...
         */
        Broadcast::channel('private-test', function () {
            return 'works';
        });
    }
}

I have created an php artisan command

<?php

namespace App\Console\Commands;

use App\ChatMessage;
use App\Events\ChatMessageWasReceived;
use App\User;
use Illuminate\Console\Command;

class SendChatMessage extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'chat:message {message}';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Send chat message.';

    /**
     * Create a new command instance.
     *
     */
    public function __construct()
    {
        parent::__construct();
    }

    /**
     * Execute the console command.
     *
     * @return mixed
     */
    public function handle()
    {
        $user = User::first();

        $message = ChatMessage::create([
           'user_id' => $user->id,
            'message' => $this->argument('message')
        ]);

        event(new ChatMessageWasReceived($message, $user));

    }
}

I have uncommented the App\Providers\EventServiceProvider::class, in the config/app file.

i have installed the "pusher/pusher-php-server": "^2.6", composer project.

I've triggered the php artisan queue:work --queue=high,default and it works fine, but it just dont send it to pusher.com

Does anyone know what i could have done wrong?

any plan to support triggering client events?

        window.Echo = new Echo({
            broadcaster: 'socket.io',
            host: url,
        });

        window.Echo.channel('chat-room.1')
            .listen('ChatMessageWasReceived', (e) => {
                console.log(e);
          });

Should we resubscribe when we connect success?

I recently up graded to 5.3 from 5.2.

Last week I installed Laravel Echo, and am using it with Pusher, Vue and Vue-resource.

Everytime I post I get this error

Cannot set property 'X-Socket-ID' of undefined

Anyone got any ideas?The doc says if you use Vue and Vue-resource X-Socket-ID is attached to the header automatically, but no luck now...

Error comes from this code

Vue.http.interceptors.push(function (request, next) {
            if (_this.socketId()) {
                request.headers['X-Socket-ID'] = _this.socketId();
            }
            next();
        });

when I console.log(_this.socketid().It shows a proper value though

main.js

var Vue = require('vue');
window.moment = require('moment');
require("moment/locale/ja.js");
window.Vue = Vue;
Vue.use(require('vue-resource'));
window.Pusher = require('pusher-js');

import Echo from "laravel-echo"
window.Echo = new Echo({
 broadcaster: 'pusher',
 key: 'my key'
});

Vue.http.interceptors.push(function (request, next) {
    if (_this.socketId()) {
        request.headers.set('X-Socket-ID', _this.socketId());
    }
    next();
});

Uncaught (in promise) TypeError: request.headers.set is not a function(…)

I replaced it by

request.headers['X-Socket-ID'] = _this.socketId();

in node_modules/laravel-echo/dist/echo.js:523 and it worked.

Can you fix it ? I don't know how typescript works.
I can make a pull request to change src/echo.ts:53 but I don't know if it's enough.

Any way to use Echo with Socket.io and self-signed certificate?

It would be nice if I could do something like this:

import Vue from 'vue';
import Echo from 'laravel-echo';

Vue.use(Echo);

export const echo = new Echo({
  broadcaster: 'pusher',
  key: 'SomeRandomKey',
});

Instead of having to bind Vue to the window
https://github.com/laravel/echo/blob/master/src/echo.ts#L32

Hi,

Can we port this to bower?

I got this error trying to install laravel-echo

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]

Add fsevents to NodeJS #7858
It seems to be a problem with NodeJS however it may be removed from optional dependencies so that Linux users can workaround this error

I've got all my front end code nicely managed by JSPM and I would like to avoid having to put the socket.io client on my pages window object.

Maybe one of the constructor overloads for new Echo could look like this:

const socket = io("http://localhost:8083");

const echo = new Echo({
    broadcaster: "socket.io",
    socket: socket,
});

I've managed to setup and install Laravel-echo correctly however the callback isn't triggered when an event is send from the debug tool. I see the client connecting succesfully. Can someone help?

Pusher has the disconnect() method. Is there such a thing in Echo? I couldn't see it. It's very important for me to disconnect users who keep their tab(s) open otherwise I run out of connections.

So even though I've added $this->dontBroadcastToCurrentUser(); in the constructor of all my broadcasted events that I don't want to duplicate. It is still going out to the current user showing duplicates. It seems as though socket_id is being properly set to the session, as well as being sent out with the events.

Not sure if it's because of this or not, but during the Laravel Echo demo on Laracasts it was mentioned and showed that Echo does a /broadcasting/auth API call which is not occuring with my current setup. Is that only for private channels?

Oh and real quick within BroadcastServiceProvider I keep getting method "channel" not found. This is the error:

ErrorException in BroadcastManager.php line 281:
call_user_func_array() expects parameter 1 to be a valid callback, class 'Illuminate\Broadcasting\Broadcasters\PusherBroadcaster' does not have a method 'channel'

Of course I appreciate any help, I know this all pre-release.

_WEBPACK_IMPORTED_MODULE_0_laravel_echo___default.a.channel is not a function

I'm getting Cannot find module 'pusher-js' when packing with browserify and need to require it even when using socket.io.

Could it be moved to outside in a similar way to socket.io? I'd imagine there would be other connectors in the future, and think it would be best if you just install the library for the connector you are using.

So i've just experienced what could be a bug or i've misunderstood something. I'm not a fan of TS or i would dig around the code myself.

I have been running Node 6.4.0 and found that i needed a second parameter in my event listeners callback to retrieve the event data, the first parameter became the channel name. However using node 4.6.0 i only require one parameter for the data.

Example:

Node 4.6.0

this.socket.private('Channel').listen('Event', payload => {
  this.update(payload.data)
})

Node 6.4.0

this.socket.private('Channel').listen('Event', (channel, payload) => {
  this.update(payload.data)
})

I haven't checked against other node versions yet. Not sure if this is something to do with webpack / ES6 complier maybe?

When I try to access Echo.presence, I get an error saying:
Uncaught TypeError: Echo.presence is not a function

But when I do Echo.private or Echo.channel, it works without any problems.

However, when I get it working when I use Echo.join, the syntax from the Laracast video about Echo.

@loren138 commented on Fri Jul 24 2015

I'm using the code from http://laravel.com/docs/5.1/testing#mocking-facades

IE

    Cache::shouldReceive('get')
        ->once()
        ->with('key')
        ->andReturn('value');`

However, when I run this through PHPUnit I get the following error:

1) App\Models\GoogleAnalyticsTest::testCacheMohlerPopularUris
InvalidArgumentException: get() cannot be mocked as it a protected method and mocking
protected methods is not allowed for this mock

/Users/../Sites/resources/vendor/mockery/mockery/library/Mockery.php:670
/Users/../Sites/resources/vendor/mockery/mockery/library/Mockery.php:678
/Users/../Sites/resources/vendor/mockery/mockery/library/Mockery.php:629
/Users/../Sites/resources/vendor/laravel/framework/src/Illuminate/Support/Facades/Facade.php:54
/Users/../Sites/resources/tests/Api/GoogleAnalyticsTest.php:22

The error makes perfect readable sense to me, but the problem is I need to mock the cache get function which happens to be exactly documented and it doesn't work...

@GrahamCampbell commented on Fri Jul 24 2015

You can't mock a manager class like that I'm afraid. The get call there is a __callStatic followed by a __call. You can only mock facades if the next call from __callStatic is a real method.

@loren138 commented on Fri Jul 24 2015

Once again, let me point out that this call is copied exactly from the documentation on mocking a facade http://laravel.com/docs/5.1/testing#mocking-facades and is the entire point of mocking them. At the very least, the docs should cover that this won't work. I shouldn't need to argue that this should work since Taylor in the docs says consider that you want to do this. Just to make this easier I'm copying the docs to here.

Mocking Facades (http://laravel.com/docs/5.1/testing#mocking-facades)

When testing, you may often want to mock a call to a Laravel facade. For example, consider the following controller action:

<?php

namespace App\Http\Controllers;

use Cache;
use Illuminate\Routing\Controller;

class UserController extends Controller
{
    /**
     * Show a list of all users of the application.
     *
     * @return Response
     */
    public function index()
    {
        $value = Cache::get('key');

        //
    }
}

We can mock the call to the Cache facade by using the shouldReceive method, which will return an instance of a Mockery mock. Since facades are actually resolved and managed by the Laravel service container, they have much more testability than a typical static class. For example, let's mock our call to the Cache facade:

<?php

class FooTest extends TestCase
{
    public function testGetIndex()
    {
        Cache::shouldReceive('get')
                    ->once()
                    ->with('key')
                    ->andReturn('value');

        $this->visit('/users')->see('value');
    }
}

@tillkruss commented on Sun Sep 27 2015

@taylorotwell If this isn't working, maybe it should be removed from the docs?

@ctrlaltdylan commented on Thu Feb 11 2016

Why is this issue closed when there hasn't been a viable solution yet?

In the docs not have info except configure broadcaster and host. I want set transport and max try for connect. Default it will be connecting to my server until it no shot down! How i can configure it with socket io?

I just follow the steps by documentation, but on my js file it shows this error that i can not import Echo from laravel-echo cuz import is invalid token. How to fix this ?

Background

Laravel 5.3's default javascript scaffolding requires resources/assets/js/bootstrap.js at the top of the resources/assets/js/app.js file. The bootstrap.js file has side effects when required that mutates the window object due to the way that the vue and vue-resource packages install themselves globally.

Side effects

Issue

The issue here is that this library is checking for a global instead of a property on the window. This becomes apparent when using this library without bootstrap.js scaffolding shipped with Laravel 5.3.

Module not found when laravel-echo is imported in angular 2(angular_cli) application.

error:

  Cannot find module 'laravel-echo'. 

Note: I'm not sure if this is an issue with Echo or with Laravel's broadcasting system, so I will open an issue on both

When a model that eager-loads other models is passed to an event that implements ShouldBroadcast and that is received by Laravel Echo, the eager-loaded models are not received by the client.

Here's is an example with a Post model that belongs to a User.

Controller method where the post is created:

$post = Post::create([
    'user_id' => 1,
    'topic_id' => request('topic_id'),
    'body' => request('body'),
]);

$post = Post::with('user')->find($post->id);

 event(new PostCreated($post));

Here is the event class:

class PostCreated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $post;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($post)
    {
        $this->post = $post;
        echo $post->user->name; // This works, name is echo'd
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('topics');
    }
}

And finally the JS code :

Echo.channel('topics')
    .listen('PostCreated', (e) => {
        console.log(e.post); // Can see the post object, but not the user property
        console.log(e.post.user); // Undefined
    });

Why is post.user undefined in the JS code, while $post->user is not in the event class?

Do I need to do something special to ensure that the eager-loaded models are passed along when the event is broadcasted?

I'm using Pusher, if that matters.

Thank you for the help!

.here() function does not get called when a new user joins or leaves.

I just tested it with 2 accounts in 2 different browsers. it only gets called when i refresh the browser.

im using socket.io (redis)

It's currently impossible to see all members of a presence channel without appearing in it yourself.

According to the Pusher docs, this can be achieved through the use of spy users.

The way they do it is to create a separate Pusher instance that authenticates as a spy user, which is ignored from any polling of users. https://github.com/pusher/presence-spy-example/blob/master/script.js#L22-L31

For this to work with Laravel, we'd need to extend authentication to accept spy users (perhaps as a variation of the actual user?).

Thoughts?

So I have a single page application with authorization setup. When the app boots, it will check if the user is authenticated. If not, the user is send to the login page, if so, the app sets the Authorization header of the requests to the token saved in localStorage.
This is working fine, but when I want to login and update the Authorization token, the update isn't reflected and I have to manually refresh the page to make the request with the token.

As you can see here, I set the token correctly:
https://github.com/petervmeijgaard/jwt-example/blob/next/resources/frontend/src/app/store/modules/auth/mutations.js#L24

And even when I do a console.log(Vue.echo.options.auth.headers.Authorization) before I subscribe to a private channel, I get the correct token returned.
However, when I check the request send to the REST-server, the Authorization header isn't set.

The console.log ouput:

The request headers:

Hi,
I followed the basic configuration of WebSocket given within the docs (driver: Redis, socket.io), but each times i run gulp, I got the error below :

{ [Error: ./~/laravel-echo/dist/echo.js
Module not found: Error: Can't resolve 'pusher-js' in '/my/projet/node_modules/laravel-echo/dist'

Hope someone can help me to figure out this problem, knwoing that i didn't do any setup with pusher-js.

Something I stumbled upon by accident when experimenting with laravel echo.

If two completely different channels are setup, but they both have the same listener, then both callbacks will fire no matter which channel you post it on. However if you post in on a channel that is not called on the page then there is no issue.

For example, say I fire the event "MessageSent" on the channel "testChannel" with the following code:

Echo.channel('testChannel').listen('MessageSent', function (data) {
    console.log('test channel fired');
    console.log(data);
});
Echo.channel('otherChannel').listen('MessageSent', function (data) {
    console.log('other channel fired');
    console.log(data);
});

The output in the console will be:

test channel fired
Object {data: Array[3]}
other channel fired
Object {data: Array[3]}

Please note that I am using public channels with socket.io via Redis. I haven't tried to replicate it on anything else.

Sorry, normally would post a bit more info but it's home time ;)
I can come back tomorrow with more details if needed.

Hi, I have installed [email protected] with npm.
Getting this error (screenshot)

I get why its done, make it easier etc.

The test done on the event wont work from what i can see.

Events come through without the leading backslash, regardless of if there are from \App\Events or \Package\Events

php get_class or Class::class never give you the leading backslash.

for example if you fire the event:

event(new Package\Event)

this will never be matched, because:

channel.listen('Package\\Event'); will listen for App\\Events\\Package\\Event

and

channel.listen('\\Package\\Event'); will listen for \\Package\\Event

but the actual event fired will be Package\\Event

i dont have a solution, just thinking of future use cases.

Getting uncaught exception: You must pass your app key when you instantiate Pusher.when installing Echo according to the docs.
But i provided my key correctly.. =/

If you're connecting to /broadcasting/socket on another server you'll often be using token based authentication with the Authorization header.

Currently that can be passed to the auth method using its 'headers' option, but isn't supported elsewhere.

Happy to put in a PR for this, but wanted feedback first on the preferred approach.

Would it be better to allow an arbitrary set of additional headers be passed and applied when creating the request (https://github.com/laravel/echo/blob/master/src/connector/pusher-connector.ts#L47), or just allow an authorization token be passed and send that header if provided?

I'm not quite sure why I'm getting this error in the client.

Auth is going through fine to pusher, however the response doesn't get handled.

import Echo from "laravel-echo";

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'MY KEY',
    cluster: 'eu'
});

window.teamChanel = window.Echo.private('team.'+window.teamId);

So currently, the way echo is set up, the following will allow me to react when a user disconnects:

 Echo.here('my-channel')
 .leaving((d) => {
        // a user disconnected
 	console.log(d);
 });

Is there any possible way that I could also receive notice when I am leaving the channel (for online status)? (I being the person who was visiting the application and decided to disconnect from the channel)

Currently through echo, this is not possible but am wondering what this would require to implement?

@taylorotwell are you open to pull request to support Socket.io? I'd be willing to submit some PR's if so.

Here is my test case:

        Echo.private('App.User.' + this.user.id)
            .notification((notification) => {
                console.log(notification.type);
            });

        Echo.channel('test')
            .listen('Test', () => {
                console.log('Hi');
            });

In my dashboard, I can only see this:

The test channel is successfully subscribed as you can see. The private-App.User.2 is not. I am authenticating the request too using the default Broadcast::channel() call, the auth call is made by Echo properly too.

Hi,

I think the event listener for private channels is not functioning correctly. I have followed the documentation so far, but Pusher is not triggering the event listener. In pusher under the debug console, I can see that the data is present, which can be seen in the attached image.

I also am posting below the code the I am using, in case the mistake is on my side (which I don't hope).

<?php

namespace App\Events\Chat;

use Illuminate\Broadcasting\Channel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class UserSendChatMessage implements ShouldBroadcast
{
    use SerializesModels, InteractsWithSockets;
    
    public $id;


    /**
     * UserSendChatMessage constructor.
     * @param $user
     * @param $message
     */
    public function __construct($id)
    {
        $this->id = $id
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel("conversation.{$this->id}");
    }

}

Echo.private('conversation.' + this.uniqueConversationId)
                        .listen('.App.Events.Chat.UserSendChatMessage', function (event) {
                            alert('here...');
                            console.log(event);
                        });

 Broadcast::channel('conversation.*', function ($user, $uniqueId) {
            // Security: not secure, yet.
            return true;
        });

As a Mac Developer I find the docs to be pretty sad. I am used to a certain level of hand holding that you haven't been able to achieve with your readme.

Is there any way to listen for a disconnect event or an event like "cannot establish connection"?

I've tried to implement the authorizing for presence channels as described in the docs:

Broadcast::channel('channel', function ($user, $roomId) {
   //
});

But got the following error:

ErrorException in BroadcastManager.php line 281:
call_user_func_array() expects parameter 1 to be a valid callback, class 'Illuminate\Broadcasting\Broadcasters\PusherBroadcaster' does not have a method 'channel'

As mentioned in this issue the docs should be updated to:

Broadcast::auth('channel', function ($user, $roomId) {
   //
});

Hi all.

I started yesterday working on a project using Laravel echo and i wanted to use socket.io instead of pusher. So as suggested by Taylor on the official documentation, i went ahead and pulled in https://github.com/tlaverdure/laravel-echo-server

Doing this on Homestead.

Got everything working fine with public events.

The issues started with private channels.

As expected, and defined in the BroadcastServiceProvider, i need to send auth requests to /broadcasting/auth. The problem is i get a constant token mismatch exception.

Investigating further in Illuminate\Foundation\Http\Middleware\VerifyCsrfToken and specifically in the tokensMatch function, i notice that

$sessionToken = $request->session()->token();

and

 $token = $request->input('_token') ?: $request->header('X-CSRF-TOKEN');

have two different values. The one in the headers being the one of the authenticated session (so the correct one).

Moving further i was initially using redis as session store. Then i moved into file and noticed that for every request to /boadcasting/auth a new session was being generated.

In the end starting storing sessions into the database. Here's where the final clue came.

For every request coming from homestead (where node and laravel are, thus Echo is running) I am getting a new session generated with Homestead's ip 192.168.10.10 for every time i load the page. So naturally the sessions would not match but i can't figure out how to avoid it.

I've cleared all caches, dumped autoload, cleared compiled, even rebuilt the vendor folder a couple of times.

At this point i have no idea anymore. I'd really appreciate if someone could shed some light.

Thanks in advance

Please allow passing on path in options to socket io connector.

It is not possible to use different route than "/" because anything after "/" is treated as namespace.

e.g.
var echo = new Echo({
broadcaster: 'socket.io',
host: 'http://localhost',
path: '/myapp/socket.io/'
});

This path should be used while creating io socket as:

this.socket = io(this.options.host, {path: this.options.path});

Thanks very much in advance.

Is there a typings file I can include in my typescript project? I think it is possible to to include the typescript class form github, but there is none included in the npm package :(

I need to stop listening for some events when the route changes (client-side). Currently I use leave(channel), however, this might unsubscribe other events that were registered somewhere else in the app.

I was upgrading an existing Spark install to use Laravel 5.3 and after installing Echo got the error:

next is not a function

So I upgraded vue-resource to 0.9.3 which got rid of the error. However, now any this.$http.get calls don't fire and no errors are thrown. It looks like any vue-resource version >= 0.8.0 has the same effect.

1- for users using socket.io , u still have to install pusher.js or u would get an error #40

ERROR in ./~/laravel-echo/dist/echo.js
Module not found: Error: Can't resolve 'pusher-js'

2- elixir is using webpack which mostly is what users will be using, so no need for rollup

in both cases it should be left to the user to decide which tool he/she will be using.

UPDATE
#110

When using echo with a .private channel, the response from the /broadcasting/auth routes come back with the entire php debug bar <script> tag when Barryvdh\Debugbar is installed, ultimately causing the connection to fail.

Here are some screen grabs

1. With it disabled
   
2. With it enabled
   

We cannot do something like this

broadcast(new ChatMessageSent($chat_message->load('user.profile'), Auth::user()))->toOthers();

When I console.log(event) in listen method.The relationship is not loaded.This would be a problem when we show data in Vue components since we cannot wirte the code below in .vue file

 $chat_message->user->profile->avatar