Как работать с WebSocket на простом PHP хостинге

В хостинге некоторые решения могут показаться вам нестандартными.
Поэтому перед началом работы мы бы рекомендовали ознакомиться с вводной статьей.

Введение

В этой статье мы расскажем как можно реализовать хостинг Веб Сокетов на вашем сайте, который размещается на хостинге.

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

В нашем случае внешним решением будет сайт на nodejs, в котором будет реализован хостинг Web Socket’ов.

В качестве примера мы будем использовать готовый проект на github Example-chatroom-with-NodeJS-PHP. Этот проект позволит нам создать простой сайт, предлагающий посетителям вести онлайн переписку (онлайн чат).

Сайт на хостинг PHP (mydomain.ru) будет выступать основой нашего проекта. При открытии страницы mydomain.ru все сообщения в чате будут загружаться с ws.mydomain.ru — с сайта с поддержкой вебсокетов. На ws.mydomain.ru мы могли бы разместить любую реализацию вебсокетов, не обязательно созданную на node.js.

Установка и настройка сайта на хостинг PHP

Для начала в панели управления нам потребуется создать два сайта:

• сайт на хостинге PHP, например mydomain.ru
• сайт с поддержкой вебсокетов на node.js, например ws.mydomain.ru

Разумеется, mydomain.ru и ws.mydomain.ru лишь примеры доменов, и вы можете использовать любые домены.

Далее потребуется зайти по SSH.

Перейдем в каталог с сайтом на хостинг php

cd mydomain.ru

Удалим содержимое тестового сайта

rm -rf www/*

Клонируем репозиторий в каталог www

git clone https://github.com/ethaizone/Example-chatroom-with-NodeJS-PHP www

Перейдем в каталог www

cd www

Откроем для редактирования файл chat.php, который находится в каталоге pages

mcedit pages/chat.php:185

Будет открыт файл на строке №185.

Сейчас нам необходимо указать, чтобы посетители сайта mydomain.ru при загрузке сообщений из чата обращались к сайту, где включена поддержка вебсокетов. Кроме этого, вместо 3421 порта будет использоваться порт 80.

Для этого строку

var socket = io('//<?php echo $_SERVER['HTTP_HOST']; ?>:3421');

Изменим на строку

var socket = io('ws.mydomain.ru:80');

Для сохранения нажмите на клавиатуре F2.

Установка и настройка сайта на node.js для работы с вебсокетами

Теперь осталось настроить сайт ws.mydomain.ru.

Переместим файлы chat.js и package.json в каталог с сайтом ws.mydomain.ru

mv -t ~/ws.mydomain.ru/app chat.js package.json

Перейдем в каталог с сайтом ws.mydomain.ru

cd ~/ws.mydomain.ru/app

Установим зависимости

npm install

Сейчас нам нужно, чтобы сайт на node.js был виден извне. Особенность размещения node.js приложений на хостинге заключается в том, что приложению нужно прикрепиться (bind) не на порт 80 или 8080, а на определенные IP и порт. Эти параметры мы передаем в переменных окружения APP_IP и APP_PORT.

Откроем на 5й строке файл chat.js

mcedit chat.js:5

Изменим строку

var port = 3421;

На

var port = process.env.APP_PORT;

Далее в самом низу файла нам необходимо изменить строку

http.listen(port, function(){
    console.log('listening on *:'+port);
});

На

http.listen(process.env.APP_PORT, process.env.APP_IP, function(){
    console.log('listening on *:'+port);
});

После этого в панели управления укажите файл app/chat.js в качестве файла для запуска приложения (параметр “APP_PATH”)

Проверьте работу сайта открыв mydomain.ru в браузере.

Вы должны увидеть что-то аналогичное следующему:

Размещение тестового сайта можно считать успешным, если при открытии инструментов разработчика в браузере (обычно F12 или CTRL + SHIFT + i) отображается соединение с типом “websocket” и со статусом “101”.

Также можно открыть mydomain.ru в двух разных браузерах, чтобы проверить функциональность самого чата. Однако, из-за особенностей проекта Example-chatroom-with-NodeJS-PHP, при открытии сайта в двух браузерах необходимо ввести один и тот же никнейм.

Готово! Мы успешно разместили сайт на хостинг PHP.