Verification: a143cc29221c9be0

Php client to client chat

Как установить PHP Ratchet:

Как любую библиотеку, эту нужно сначала скачать, сделать это можно через composer, вот такой командой в терминале Linux или в командной строке Windows:

composer require cboden/ratchet

После этого, во файле где вы будите использовать эту библиотеку, подключите «autoload.php».

require '/vendor/autoload.php';

Теперь вы спокойно можете использовать эту библиотеку.

Основы работы с PHP Ratchet:

Теперь перейдём к основе работы с этой библиотекой, для наглядности сделаем не большой класс «Chat», но тут не будет показ как сделать весь чат, об этом в другой статье, а в этой только основы.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

// Назначаем пространство имён

namespace MyApp;

// Подключаем класс MessageComponentInterfac

use Ratchet\MessageComponentInterface;

// Подключаем класс ConnectionInterface

use Ratchet\ConnectionInterface;

// Создаём класс чат

class Chat implements MessageComponentInterface {

    protected $clients; // Свойство для хранения клиентов

    // Конструктор класса

    public function __construct() {

        $this->clients = new \SplObjectStorage;

    }

    // Метод при подключение

    public function onOpen(ConnectionInterface $conn) {

        // Новое подключения

        $this->clients->attach($conn);

    }

    // Метод получения сообщения

    public function onMessage(ConnectionInterface $from, $msg) {

       // Проходим циклам по массиву подключённых пользователей

       foreach ($this->clients as $client) {

            // Отправляем сообщение

            $client->send($msg);

        }

    }

    // Метод при закрывания подключения

    public function onClose(ConnectionInterface $conn) {

    }

    // Метод для ошибки

    public function onError(ConnectionInterface $conn, \Exception $e) {

    }

}

Здесь мы делаем класс, который унаследовали у MessageComponentInterface, внутри него пишем три метода:

  • onOpen(ConnectionInterface $conn) — Метод для подключения клиента;
  • onMessage(ConnectionInterface $from, $msg) — Метод для получения сообщения от клиента;
  • onClose(ConnectionInterface $conn) — Метод закрывания подключения клиенту;
  • onError(ConnectionInterface $conn, \Exception $e) — Метод для ошибки;

Тут стоит заметить, что каждый метод имеет первым параметром ConnectionInterface $conn, если кратко говоря, то это интерфейс для создания подключения.

Также у нас есть свойство $clients, которое будет хранить подключённых пользователей, в конструкторе мы как раз это назначаем, в onOpen() мы добавляем нового клиента в это свойство.

В onMessage() проходимся по массиву с клиентами, и отправляем каждому пользователю полученное сообщение, делаем это с помощью метода send(), в котором в качестве параметра используется сообщение.

В остальном тут в целом не чего сложного нет, теперь переходим во файл, где будем объявлять класс «Chat», вот что в нём пишем.

// Подключаем класс IoServer

use Ratchet\Server\IoServer;

// Подключаем наш класс Chat

use MyApp\Chat;

// Подключаем файл с библиотеками

require '/vendor/autoload.php';

// Создаём сервер

$server = IoServer::factory(

    new Chat(),

    8080

);

// Запускаем сервер

$server->run();

Здесь в начале нет не чего интересного, но потом используя метод factory(), класса IoServer, мы создаём сервер WebSocket, в первом параметре у нас объявляется наш класс, он используется для обработки WS запросов, а второй, это номер порта для обработки данных.

Последние это запуск WS сервера, на этом основы работы с библиотекой Ratchet закончились.

Back-end:

Так как мы делаем чат на языке PHP, начнём со серверной части, сперва нужно установить библиотеку Ratchet, для этого используйте эту команду:

composer require cboden/ratchet

После того как всё установили, создадим файл «chat.php», где создадим класс для работы с нашем чатом, вот что в нём будет.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

// Объявляем пространство имён

namespace MyApp;

// Подключаем нужные компоненты

use Ratchet\MessageComponentInterface;

use Ratchet\ConnectionInterface;

// Создаём новый класс для обработки чата

class Chat implements MessageComponentInterface {

    // Свойство для хранения всех подключенных пользователей

    protected $clients;

    // Создаём конструктор класса

    public function __construct() {

        $this->clients = new \SplObjectStorage;

    }

    // Метод для открывания нового подключения

    public function onOpen(ConnectionInterface $conn) {

        $ Добавляем нового пользователя

        $this->clients->attach($conn);

        // Выводим сообщение что есть новый пользователь

        echo "Новое подключение ({$conn->resourceId})\n";

    }

    // Метод для получения и отправки сообщений

    public function onMessage(ConnectionInterface $from, $msg) {

        // Вывод что сообщение получено

        echo "Получение сообщения: " . $msg;

        // Цикл для прохода по всем пользователям

        foreach ($this->clients as $client) {

            // Отправляем пользователю сообщение

            $client->send($msg);

        }

    }

    // Метод для отключения пользователя

    public function onClose(ConnectionInterface $conn) {

        // Отключаем клиента

        $this->clients->detach($conn);

        // Выводим сообщение об отключение

        echo "Отключение пользователя {$conn->resourceId} \n";

    }

    // Метод для обработки ошибок

    public function onError(ConnectionInterface $conn, \Exception $e) {

        // Вывод Ошибки

        echo "Есть ошибка: {$e->getMessage()}\n";

        // Отключения соединения WS сервера

        $conn->close();

    }

}

В начале мы создаём пространство имён для этого скрипта, потом подключаем все нужные зависимости.

Потом создаём класс Chat и наследуем его от класса MessageComponentInterface, создаём защищенное свойство для хранения всех подключённых клиентов, и в конструкторе ему даём значение объекта класса SplObjectStorage.

Потом создаём несколько методов, первый onOpen(), следит  за подключением новых пользователей и добавляем их в clients.

Второй метод onMessage() нужен для обработки полученных сообщений и отправки их остальным клиентам, в нём для отправки проходимся по всем пользователям и отправляем каждому.

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

Теперь создадим файл «index.php», в котором запустим WS сервер.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

// Подключаем файл зависимостей

require "./vendor/autoload.php";

// Подключаем файл с классом Chat

require "./chat.php";

// Подключаем все зависимости

use Ratchet\Server\IoServer;

use Ratchet\Http\HttpServer;

use Ratchet\WebSocket\WsServer;

use MyApp\Chat;

// Объявляем сервер

$server = IoServer::factory(

    new HttpServer(

        new WsServer(

            new Chat()

        )

    ),

    8080

);

// Запускаем сервер

$server->run();

В начале мы подключаем нужные нам файлы, первый это со всеми скаченными библиотеками через composer, второй файл с нашем классом Chat, потом идёт подключение всех зависимостей.

Объявляем сервер с помощью IoServer::factory(), где первым параметром назначаем класс для обработки данных, в нашем случае Chat, второй порт на котором будет работать WS сервер и запускаем его через метод run().

На этом разработка сервера закончена, мы создали чат на PHP без MySQL и с использование WebSocket, запускаем его.

Всё должно работать.

Front-end:

Теперь перейдём к клинской части, для этого я создам файл «index.html», вот что в нём будет.

     charset="utf-8"/>

    Chat Room

    id="message-input" type="text" size="100">

    id="btn-submit" type="button" value="Send">

    

id="chat">

    

То есть обычный HTML файл, теперь сделаем основную логику на JavaScript, можете это сделать в отдельном JS файле или прямо в HTML.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

let chat = document.querySelector("#chat")

let input = document.querySelector("#message-input")

let btnSubmit = document.querySelector("#btn-submit")

const webSocket = new WebSocket('ws://localhost:8080');

webSocket.onopen = function(e) {

    console.log("Есть подключение");

};

webSocket.onmessage = function(e) {

    const data = JSON.parse(e.data);

    chat.innerHTML += '

' + data.message + '
'

};

btnSubmit.addEventListener("click", () => {

    message = input.value;

    webSocket.send(JSON.stringify({

        'message': message

    }));

    input.value = '';

})

Как видите он достаточно короткий, я не буду объяснять как он работает, так как тут всё просто, но если вам интересно, то посмотрите статью «Чат на JavaScript и Node.js».

Переходим во файл «index.html» и пишем сообщения, ещё можете его использовать как шаблон для своего сайта, вот такой получился чат с WebSocket на PHP.