Homestead 上的 Laravel-echo-server 和 socket.io 得到 TypeError : Cannot read property 'socketId' and 'presenceChannel'

Question

我正在尝试在 homestead 上使用 laravel 5.4、laravel-echo、redis 和 socket-io 创建一个实时聊天应用程序。

请检查下面的代码，然后检查我的问题

ChatConversation 事件:

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

    public $message;

    public $user;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Chat $message, User $user)
    {
        $this->message = message;
        //Người gửi
        $this->user = $user
    }

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

我的 web.php:

Route::post('/privatechat/{id}/{receiver_id}', function(){
        $user = Auth::user();
        $room_id = request()->segment(5);
        $rec = request()->segment(6);

        $message = Chat::create([
            'chat_room'     =>  $room_id,
            'message'       =>  request()->get('message'),
            'sender_id'     =>  $user->id,
            'receiver_id'   =>  $rec
        ]);

        broadcast(new ChatConversation($message, $user));

        return ['status' => 'OK'];
    })->middleware('auth');

我的聊天 View 设置:

const app = new Vue({
                el: '#app',
                data: {
                    messages: [],
                    sendClass: 'chat-send'
                    //Điều kiện
                },
                methods: {
                    addMessage(message) {
                        this.messages.push(message);

                        axios.post(url_post, message);
                        /*.then(function (response) {
                            //swal('Tuyệt vời! Work like a charm!');
                            console.log(response);
                        })
                        .catch(function (error) {
                            console.log(error);
                        });*/
                    }
                },
                created() {
                    var u = url;
                    axios.get(u).then(response => {
                        //console.log(response);
                        this.messages = response.data;
                    });

                    /*Echo.join('chatroom')
                    .here()
                    .joining()
                    .leaving()
                    .listen('ChatConversation', (e) => {
                        console.log(e);
                    })*/

                    Echo.join('chatroom')
                        .listen('ChatConversation', (e) => {
                            console.log(e);
                        })
                }
            });

我的 bootstrap.js

import Echo from "laravel-echo"

window.Echo = new Echo({
    broadcaster:  '../socket.io-client/dist/socket.io',
    host: window.location.hostname + ':6001'
});

我的 laravel-echo-server.json

"devMode": true,
"host": null,
"port": "6001",
"protocol": "http",
"socketio": {},
"sslCertPath": "",
"sslKeyPath": ""

1. 我的第一个问题是当我使用此脚本访问客户端库时:

   src="//{{ Request::getHost() }}:6001/socket.io/socket.io.js

我收到此错误 GET http://hgc.develop:6001/socket.io/socket.io.js净::ERR_CONNECTION_REFUSED所以我不得不从 bower 下载套接字并将上面的行更改为

<script src="{{ asset('js/socket.io-client/dist/socket.io.js') }}"></script>

1. 我的第二个问题是，当我转到我的聊天应用程序页面时，控制台向我显示这些错误:

   app.js:35246 类型错误:无法读取未定义的属性“presenceChannel”

   app.js:15520 Uncaught (in promise) TypeError: 无法读取未定义的属性 'socketId'

另外，我按照本教程创建我的聊天应用程序:https://www.youtube.com/watch?v=8aTfMHg3V1Q但我使用 Redis 和 Socket.io 而不是 Pusher

我的代码有什么问题？我该如何处理这些问题？

Answer 1

我终于弄明白了。我查看了 JS 文件并设法将其归结为 the code in this line 的事实。如果 Laravel channels.php 检查谁可以收听 channel 没有返回用户模型实例，那么 try catch 部分实际上不会抛出错误。

Channels.php 中的类似内容将抛出该错误:

Broadcast::channel('users', function ($user) {
    if($user->type == 'admin'){
         return $user;
    }else{
         return false;
    }
});

如果 $user 没有通过 if 检查，Laravel 将返回 false。因为它没有返回 JSON 并且只是 false 我认为它应该记录响应主体没有通过 JSON.parse() 函数，所以你可以在终端中看到它。像这样:

try {
     body = JSON.parse(response.body);
} catch (e) {
     Log.warning('Response body provided is not expected JSON. Response body provided ${response.body}');
     body = response.body;
}

这样我们就可以看到 Laravel 是否没有返回用户模型实例。

因此，当您没有按预期获得用户模型实例时，代码没有用户对象来附加 sockedId，因为它是未定义的。从来没有任何 JSON 可以用来制作对象。

我认为如果您没有获得用户实例而不是尝试附加套接字 ID，代码应该停止尝试连接到存在或私有(private) channel 。

无论如何，要真正返回用户，请确保您已登录 using Laravel's Auth system.如果您不使用它，则可能需要做一些工作才能使其正常工作。如果您不使用它，则 this function in Laravel will throw a 403 error because it can't find you to be logged in .

我不得不将检查密码哈希算法的函数重写为具有提供程序的自定义算法，这样我就不会弄乱 Laravel 核心并使用户模型扩展 Laravel 正在寻找的类。

然后在您的 channels.php 文件中确保您正在执行的检查实际上是在回调函数中返回 $user 从 auth 检查 Broadcaster.php 文件。像这样:

Broadcast::channel('users', function ($user) {
     return $user;
});

这是一个 super 简单的私有(private)/存在 channel ，但是有一个登录用户并返回 $user 这不会抛出这个错误。

此外，请确保您在 Echo 实例中像这样调用 socket.io:

window.Echo = new Echo({
    broadcaster:  'socket.io',
    host: window.location.hostname + ':6001'
});