Как отправить сообщение обратно с клиента на сервер через WebSocket в Laravel с Laravel WebSockets? - PullRequest
Новая
       83

Как отправить сообщение обратно с клиента на сервер через WebSocket в Laravel с Laravel WebSockets?

1 голос
/ 15 января 2020

WebSocket обеспечивает двустороннюю связь: сервер может отправлять сообщения в браузер, а браузер - клиент - может отвечать обратно через одно и то же соединение.

Я реализую приложение чата в Laravel 6, используя :

Я уже понял, что сервер запускает события, а клиент прослушивает эти события следующим образом.

  1. Установить Laravel Пакет WebSockets.

composer require beyondcode/laravel-websockets

Настроить config/broadcasting.php. 
        'pusher' => [
            'driver' => 'pusher',
            'key' => xxx,
            'secret' => xxx,
            'app_id' => xxx,
            'options' => [
                'cluster' => xxx,
                'encrypted' => true,
                'useTLS' => true, 
                'host' => '127.0.0.1',
                'port' => 6001,
                'scheme' => 'https',
            ],
        ],
    ]
Настроить config/websockets.php 
'apps' => [
        [
            'id' => xxx,
            'name' => xxx,
            'key' => xxx,
            'secret' => xxx,
            'enable_client_messages' => true,
            'enable_statistics' => true,
        ],
    ],
Установить Pusher сервер.

composer require pusher/pusher-php-server "~3.0"

Установите драйвер вещания для использования pusher в .env файле.

BROADCAST_DRIVER=pusher

Используйте laravel-echo и pusher-js на стороне моего клиента. 
import Echo from "laravel-echo"

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'your-pusher-key',
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
});
Запустить сервер WebSockets.

php artisan websockets:serve

На стороне сервера инициируйте события с помощью класса событий, который реализует ShouldBroadcastNow класс.

event(new MyEventClass((object)$message));

Все работает нормально. На шаге 8 я запускаю события со стороны сервера.

Обратите внимание, что я не использую официальный сервер Pusher, я просто использую реализации API Pusher и pusher-js, но указываю Laravel Echo JavaScript package на локальный Laravel WebSockets server, настроенный на шаге 6.

Пожалуйста, не путайте Laravel Echo JavaScript package с laravel-echo-server из Socket.IO Server. Я не использую Socket.IO Server.

Теперь вместо запуска событий на стороне сервера, как показано в шаге 8, я хочу перенести события со стороны клиента, поскольку WebSocket позволяет осуществлять двустороннюю связь. Как я могу сделать это в Laravel с Laravel Echo JavaScript Package, Laravel WebSockets PHP package?

1 Ответ

0 голосов
/ 15 января 2020

После инициализации Echo вам необходимо прослушивать определенный канал внутри вашего интерфейса. Я покажу некоторый Vue код, но изменю соответственно:

Vue Файл 

export default {
    methods: {
        sendCommand(command) {
            axios.post('/api/command', { 'command': command })
            .then((res) => {
                //
            })
        }
    },
    mounted() {
        Echo.channel('xxx')
        .listen('.weight-change', (e) => {
            this.weight = e.weight
        })
    }
}

Здесь вы можете видеть, что все входящие сообщения перехватываются на прослушиваемой части код и отправка нового сообщения выполняется с помощью API-интерфейса на бэкэнде, который отправляет их на канал Echo.

Пожалуйста, дайте мне знать, если вам нужны какие-либо разъяснения.

...