Question

Laravel 5.6

我正在尝试创建一个实时应用程序。我按照谷歌发现的教程，但似乎它不起作用。我无法弄清楚为什么因为它在控制台中没有显示错误。

config / app.php

中的

App\Providers\AppServiceProvider::class,
App\Providers\AuthServiceProvider::class,
App\Providers\BroadcastServiceProvider::class,
App\Providers\EventServiceProvider::class,
App\Providers\RouteServiceProvider::class,

这是我的活动

<?php

namespace App\Events;

use App\Message;
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 MessageSent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;

public $message;

/**
 * Create a new event instance.
 *
 * @return void
 */
public function __construct(Message $message)
{
     $this->message = $message;
     // $this->dontBroadcastToCurrentUser();
    //
}

/**
 * Get the channels the event should broadcast on.
 *
 * @return \Illuminate\Broadcasting\Channel|array
 */
public function broadcastOn()
{
    return new Channel('chat-channel');
}
}

这是我的控制器

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Message;
use App\User;
use Auth;
use App\Events\MessageSent;

class MessageController extends Controller
{
public function index()
{
    return view('chat');
}

public function getChat()
{
    return Message::with('user')->get();
}

public function addChat()
{
    $user = Auth::user();

    $message = $user->messages()->create(['message' => request('message')]);

    event(new MessageSent($message));

    return $message->toJson();



}
}

位于 bootstrap.js

的底部

import Echo from 'laravel-echo'

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

我的 laravel-echo-server.json

{
"authHost": "http://localhost",
"authEndpoint": "/broadcasting/auth",
"clients": [
    {
        "appId": "1461f99e6c0bcaa4",
        "key": "3dc5701da38d9c3346141db0c8e3f0ad"
    }
],
"database": "redis",
"databaseConfig": {
    "redis": {},
    "sqlite": {
        "databasePath": "/database/laravel-echo-server.sqlite"
    }
},
"devMode": true,
"host": null,
"port": "6001",
"protocol": "http",
"socketio": {},
"sslCertPath": "",
"sslKeyPath": "",
"sslCertChainPath": "",
"sslPassphrase": "",
"apiOriginAllow": {
    "allowCors": false,
    "allowOrigin": "",
    "allowMethods": "",
    "allowHeaders": ""
}
}

我的 ChatComponent.vue

<template>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card card-default">
                <div class="card-header">Chatroom</div>

                <div class="card-body">
                    <div class="chat-log" v-for="message in messages">
                        <strong>{{message.user.name}}</strong>
                        <br>
                        - {{message.message}}
                    </div>

                    <div class="text-center" v-show="messages.length === 0">
                        No messages yet!
                    </div>
                </div>

                <div class="card-footer">
                    <div class="chat-composer">
                        <input type="text" name="" class="form-control" 
placeholder="Start typing..." v-model="messageText"         
@keydown.enter="sendMessage()">
                        &nbsp;
                        &nbsp;
                        <button class="btn btn-primary"             
@click="sendMessage()">Send</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    mounted() {
        console.log('Component mounted.')
        this.getMessages();
        this.listen();
    },
    data() {
        return {
            messages: [],
            messageText: ''
        }
    },
    methods: {
        getMessages() {
            axios.get('/getChat').then((response) => {
                this.messages = response.data;
            });
        },
        sendMessage() {
            let data = {
                message: this.messageText,
                user: {
                    name: $('#navbarDropdown').text()
                }
            }

            axios.post('/sendChat', data).then((response) => {
                this.messages.push(data);
                this.messageText = '';
            });
        }, 
        listen() {
            Echo.channel('chat-channel').listen('.MessageSent', (message) => 
{
                this.messages.push(message);
                // console.log(message);
            });
        }
    }
}
</script>

<style>
.chat-composer {
    display: flex;
}
</style>

如果有人知道这个解决方案。请帮忙。非常感谢你！

Answer 1

我认为您想念的事情很少。

如果您的设置类似于Redis + Laravel Echo Server + Socket.io，那么您可以尝试一下。

将npm i rxjs@6 --save文件上的BROADCAST_DRIVER, QUEUE_DRIVER, QUEUE_CONNECTION更新为Redis。运行.env，redis-server和artisan queue:listen --tries=1
在“事件”类上，没有您要发送/广播的数据。尝试添加laravel-echo-server start方法，然后简单地在该方法中返回所需的任何数据。您可以阅读Laravel官方文档https://laravel.com/docs/5.6/broadcasting#broadcast-data

Answer 2

一件事是删除“。”从事件名称“ MessageSent”的开头开始：

Echo.channel('chat-channel').listen('MessageSent', (message) => ...

您还可以查看此reply

Laravel Echo + Redis + Socket.io

2 个答案: