@lilzen

Как вернуть ответ от сервера в laravel Echo listen на client/server архитектуре?

Здравствуйте столкнулся с такой проблемой, Laravel Echo в React приложении на клиент/сервер архитектуре, не получает данные в listen (т.е. не вызывается callback функция listen).
на сервере laravel-echo-server и redis на клиенте socket.io и laravel-echo
вот то что я использовал:

EchoExample.js
import React, {useState, useEffect} from "react";
import axios from "axios";
import Echo from "laravel-echo";
window.io = require("socket.io-client");

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

const instance = axios.create({
    baseURL: "http://" + window.location.hostname + ":8000",
});

export const EchoExample = () => {
    useEffect(() => {
        let channel = window.Echo.channel('chat');
        channel.listen('.Chat', function (e){
            console.log('listen',e)
        })
        console.dir('channel',channel);
    },[])
    const [messages, setMessages] = useState([]);
    //const [text, setText] = useState('');
    const sendMessage = (e) => {
        if (e.keyCode === 13){
            const val = e.target.value;
            setMessages(prev => [...prev, val])
            console.log('send');
            instance.get("messages",{text: val});
            e.target.value = "";
        }
    }
    return (
        <div>
            <input type="text" placeholder={"введите сообщение"} onKeyDown={sendMessage} />
            <div style={{backgroundColor:"black",color: "white"}}>
                {messages.map((item, i) => {
                    return (<div key={i}>{item}<br/></div>);
                })}
            </div>
        </div>
    );
}


routes/web.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

Route::get('/messages', function(Request $request){
    App\Events\Chat::dispatch($request->input('text'));
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');


App\Events\Chat.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 Chat implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    public function __construct($message)
    {
        $this->message = $message;
    }

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


.env
APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:m25beASqWoBAgsyfl+BhRJRRxcZI2apMxJZBaWJKw0k=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

BROADCAST_DRIVER=redis
CACHE_DRIVER=file
SESSION_DRIVER=file
SESSION_LIFETIME=120
QUEUE_DRIVER=redis

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"


laravel-echo-server.json

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


BroadcastServiceProvider раскоментировал в config\app.php

в консоли запускаю:
npm start (у клиента)
сервер:
php artisan serve
php artisan queue:work
laravel-echo-server start

при обращении к странице и запросе на сервер, в консолях получаю :
6088423cced12037235661.png
6088424a0f115475468921.png

А в консоли в итоге не выводиться
channel.listen('.Chat', function (e){
            console.log('listen',e)
        })

608842814c13b664991373.png

Подскажите люди добрые, где я накосячил?! И как это можно поправить! Бьюсь 3 день
  • Вопрос задан
  • 91 просмотр
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы