Создайте чат с помощью PHP Backend

Сегодня я покажу вам, как создать чат с помощью WebSockets и PHP Backend. Клиентская сторона может быть чем угодно (веб-сайт, приложение для Android, iOS и т. д.). В этой статье я покажу вам, как создать базовый веб-клиент.

Сервер

Начнем сборку серверной части. Сервер отвечает за размещение всех соединений и отправку сообщений соединениям.

Мне не нравится работающий на сервере JavaScript, поэтому я решил написать сервер на PHP. Мы не должны строить все сами. Есть PHP-библиотека под названием Ratchet, которая может сделать за нас тяжелую работу.

Создайте файл composer.json и запустите «composer install», это установит все необходимые зависимости, необходимые для запуска сервера сокетов.

{
    "autoload": {
        "psr-4": {
            "MyApp\\": "src"
        }
    },
    "require": {
        "cboden/ratchet": "^0.4",
        "ext-json": "*"
    }
}

Далее нам нужно добавить несколько строк кода для инициализации сервера. Создайте папку с именем «src» или что-то другое, что вы определили в composer.json, и другую папку с именем «bin».

Во-первых, мы начинаем с кода в «bin». Этот файл вызывается для запуска сервера. Или, скажем, это сервер.

Создайте файл «server.php» в «bin» и вставьте в него следующий код.

<?php
use Ratchet\Server\IoServer;
use Ratchet\Http\HttpServer;
use Ratchet\WebSocket\WsServer;
use MyApp\Chat;
require dirname(__DIR__) . '/vendor/autoload.php';
$server = IoServer::factory(
    new HttpServer(
        new WsServer(
            new Chat()
        )
    ),
    8080
);
$server->run();

Всякий раз, когда вы запускаете этот сценарий, вы запускаете сервер, работающий на порту 8080 на вашем компьютере.

В коде вы можете увидеть «новый чат ()» и оператор использования «использовать MyApp\Chat;» это класс, который мы должны определить сами.

Поместите файл «Chat.php» в «src». Этот файл является наиболее интересной частью сценария сервера. Это абсолютно базовый скрипт без каких-либо особенностей. Он просто отправляет сообщения всем другим соединениям. Вам придется написать больше кода для разработки таких вещей, как чат-бот или прямые сообщения.

<?php

namespace MyApp;

use Ratchet\ConnectionInterface;
use Ratchet\MessageComponentInterface;

class Chat implements MessageComponentInterface
{

    protected $clients;

    public function __construct()
    {
        $localIP = getHostByName(getHostName());
        $this->clients = array();
    }

    public function onOpen(ConnectionInterface $conn)
    {
        $this->clients[] = $conn;
    }

    public function onMessage(ConnectionInterface $from, $msg)
    {        
        foreach ($this->clients as $client) {
            if ($client !== $from) {
                $client->send($msg);
            }
        }
    }

    public function onClose(ConnectionInterface $conn)
    {
        if (($key = array_search($conn, $this->clients)) !== false) {
            unset($this->clients[$key]);
        }
    }

    public function onError(ConnectionInterface $conn, \Exception $e)
    {
        $conn->close();
    }
}

Сторона клиента

Веб-клиент

Я покажу вам только JavaScript для подключения к серверу WebSocket. Вы можете создавать HTML-материал самостоятельно.

var conn = new WebSocket('ws://localhost:8080'); //Change this!
conn.onopen = function (e) {
    $('#send-msg').prop("disabled", false);
};
conn.onmessage = function (e) {
    var msg = JSON.parse(e.data);
    addMessage(msg);
};
$('#send-msg').click(function () {
    var text = $('#msg').val();
    if (text.length === 0) {
        return;
    }
    var msg = {
        'user': user,
        'text': text,
        'time': moment().format('HH:mm')
    };
    conn.send(JSON.stringify(msg));
    addMessage(msg);

    $('#msg').val('');
});

Вот и все. Вам понадобится несколько часов, чтобы создать отличное приложение для чата, но этот код является хорошей отправной точкой.
Если что-то не работает или вам нужна помощь, не стесняйтесь написать комментарий.

public function onError(ConnectionInterface $conn, \Exception $e)
    {
        $conn->close();
    }
}