> For the complete documentation index, see [llms.txt](https://docs.edgegap.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.edgegap.com/ru/docs/sample-projects/unity-netcodes/mirror-on-edgegap-websocket.md). # Mirror WebGL Это руководство поможет вам использовать [Mirror](https://mirror-networking.com/)его Websocket Transport и создать выделенный сервер на Edgegap для проекта Unity. В этом руководстве будет использоваться проект с открытым исходным кодом `Tanks`, доступный в примере Mirror в `Assets/Mirror/Examples/Tanks`. Вы можете найти финальную версию этого примера на нашем [GitHub](https://github.com/edgegap/mirror-webgl) ### Образец Billiards Если вы предпочитаете следовать пошаговому видеоуроку, используя образец Billiard, смотрите здесь: {% embed url="" %} {% hint style="success" %} В этом видео показан обновлённый процесс сборки с использованием последних [Unity](/ru/unity.md) инструментов сборки. {% endhint %} ### Переключите транспорт Сначала нам нужно внести некоторые изменения в базовую сцену, прежде чем мы будем готовы собрать игровой сервер. * Откройте `Scene.unity` расположенный в `Assets/Mirror/Examples/Tanks/Scenes`; * В `NetworkManager` игровом объекте удалите скрипт `KcpTransport` и замените его на `SimpleWebTransport` расположенный в `Assets/Mirror/Transports/SimpleWeb`, также обязательно обновите поле Transport в `NetworkManager` компоненте скрипта, указав этот новый транспорт. Убедитесь, что `Auto Start Server Build` тоже выбрана. * В зависимости от вашей версии Mirror, вам может потребоваться изменить/обновить `NetworkManagerHUD` чтобы он работал с транспортами, отличными от KCP, а также чтобы вы могли вводить значение порта в HUD перед подключением к серверу. Обратите внимание на порт, используемый для сетевой связи, обозначаемый как `[GAME PORT]`. В данном случае используется порт `7778`. ### Сборка игрового сервера и контейнеризация {% hint style="info" %} Чтобы упростить процесс контейнеризации и развёртывания, можно использовать последнюю версию плагина Edgegap Unity на нашем [GitHub](https://github.com/edgegap/edgegap-unity-plugin) чтобы автоматизировать процесс. Для получения дополнительной информации о том, как использовать этот плагин, вы можете ознакомиться с нашей [документацией](broken://pages/8f2a97be56c6cb22e241d0ea675b0c2aafba8497). Если же хотите, можете также следовать этим пошаговым инструкциям. {% endhint %} Когда игра будет готова, перейдите на `экран сборки` в Unity Editor, в `File -> Build Settings` в верхнем меню. Обязательно выберите правильные пресеты в зависимости от вашей версии Unity. * До версии 2021.2: * Установите `Target Platform` в `Linux`; * Установите `Architecture` в `x86_64`; * Отметьте опцию `Server Build` . * Иначе: * Установите `Платформа` в `Dedicated Server`; * Установите `Target Platform` в `Linux`. Затем нажмите build и выберите новую пустую папку с именем `linux_server` в качестве места назначения файла. Перенесите папку `linux_server` во вторую пустую папку, которая в этом документе будет обозначаться как `[SERVER BUILD]` папка. Добавьте следующие `Dockerfile` и `boot.sh` файл в `[SERVER BUILD]` папку: #### Dockerfile ``` FROM ubuntu:bionic MAINTAINER ARG DEBIAN_FRONTEND=noninteractive ARG docker_version=17.06.0-ce RUN apt-get update && \\ apt-get install -y libglu1 xvfb libxcursor1 ca-certificates && \\ update-ca-certificates && \\ apt-get clean EXPOSE 7778/TCP COPY linux_server/ /root/linux_server/ COPY boot.sh /boot.sh WORKDIR /root/ ENTRYPOINT ["/bin/bash", "/boot.sh"] ``` #### boot.sh ``` xvfb-run --auto-servernum --server-args='-screen 0 640x480x24:32' /root/linux_server/[YOUR GAME].x86_64 -batchmode -nographics ``` Убедитесь, что вы заменили `[YOUR GAME]` заполнители на имя сгенерированного файла Затем откройте командную строку в `[SERVER BUILD]` папке; выполните следующие команды Docker, чтобы создать образ вашей сборки и отправить его в приватный реестр: {% hint style="warning" %} Для пользователей ARM CPU (Mac M1, M2 и т. д.) добавьте `--platform linux/amd64` в опции к вашей команде сборки. {% endhint %} #### Используя Linux ```bash # собрать образ docker build . -t : # вход; пароль будет запрошен docker login -u '' # добавьте ещё один тег к вашему образу, соответствующий реестру docker image tag : //: # отправить образ docker push //: ``` #### Используя cmd ```bash # собрать образ docker build . -t : # вход; пароль будет запрошен docker login -u # добавьте ещё один тег к вашему образу, соответствующий реестру docker image tag : //: # отправить образ docker push //: ``` #### Используя PowerShell ```bash # собрать образ docker build . -t : # вход; пароль будет запрошен docker login -u '' # добавьте ещё один тег к вашему образу, соответствующий реестру docker image tag : //: # отправить образ docker push //: ``` ### Развёртывание сервера на Edgegap После входа в панель управления Edgegap перейдите на страницу `Applications & Games` . Нажмите кнопку `Create New` в правом верхнем углу, чтобы открыть форму приложения. Ниже перечислены поля и как правильно их заполнить: * Application name : Может быть любым заметным именем, которое вы хотите использовать, чтобы легко распознавать ваше приложение среди других. * Image : Может быть любым конкретным образом, который вы хотите использовать, чтобы легко распознавать ваше приложение среди других. * Version name : Вы можете использовать имя версии, чтобы описать область развёртываемой версии. Примеры: “demo”, “production”, “v1”, “v2” * Container : * Registry : “\[URL]”, где \[URL] — это значение из учётных данных, которое можно просмотреть на странице Container Repository. * Image repository : “\[PROJECT]/\[YOUR GAME]”, где \[PROJECT] и \[YOUR GAME] — это значения, которые вы использовали ранее при отправке docker-образа. * Tag : “\[TAG]”, где \[TAG] — это значение, которое вы использовали ранее при отправке docker-образа. * Отметьте “Using a private repository” * Private registry username : “\[USERNAME]”, где \[USERNAME] — это значение из ваших учётных данных. * Private registry token : “\[TOKEN]”, где \[TOKEN] — это значение из ваших учётных данных. * Requirements : Оставьте без изменений. * Ports : Нажмите `+ Add port` ссылку, чтобы добавить новый порт, и добавьте следующие записи : * `7778` - WS - enable TLS Upgrade (Beta) {% hint style="warning" %} Если вы используете опцию WSS, важно включить `TLS Upgrade` опцию. В противном случае вы столкнётесь с ошибками, похожими на эту, в журналах контейнера на панели Edgegap. ```cmd Первые байты от клиента не были 'GET' для рукопожатия, вместо этого были 16-03-01 ``` {% endhint %}
Когда ваше приложение будет создано, вы можете нажать кнопку `Deploy` чтобы продолжить развёртывание игрового сервера. Когда последний статус вашего развёртывания станет `Ready`, вы сможете подключиться к серверу с клиентской версией игры. Обратите внимание на `Host` url и, на вкладке Port Mapping вашего развёртывания, на `внешний порт` который доступен публично. ### Тестирование клиента #### В редакторе Вернувшись в Unity Editor в сцене танков, выберите `NetworkManager` игровой объект и измените следующие настройки: * В `Network Manager` компонента: * Установите `Network Address` на url развёртывания сервера; `Host` url; * Снимите флажок с `Auto Start Server Build` . * В `Simple Web Transport` компонента: * Установите `Port` на значение порта развёртывания Edgegap `внешний порт` например: `32821`; * Убедитесь, что опция `Client Use WSS` включена.
После этого нажмите `Play` в редакторе, затем нажмите кнопку `Client` ; вы подключитесь к серверу и сможете играть через короткое время. #### На Itch.io Чтобы разместить клиент игры на Itch, вам нужно будет сделать клиентскую сборку; для этого потребуется установить модуль `WebGL Build Support` для вашей версии Unity. После этого вернитесь к `экран сборки` в Unity Editor, в `File -> Build Settings`, и выберите следующие параметры: * Установите `Платформа` в `WebGL`; * Откройте `Player Settings`. В разделе `Player -> Publishing Settings`, установите `Compression Format` в `Gzip` и убедитесь, что `Decompression Fallback` опция выбрана. Сохраните эти настройки и закройте окно.
Затем нажмите build и выберите новую пустую папку с именем `сборка` в качестве места назначения файла. Перенесите папку `сборка` во вторую пустую папку, которая в этом документе будет обозначаться как `[CLIENT BUILD]` папка в этом документе. После завершения сборки игры сожмите файлы этой `сборка` папки в zip-архив, убедившись, что они находятся в его корне. Затем вам нужно просто загрузить zip-архив в ваш проект на Itch и убедиться, что выбрана опция запуска файла в браузере. После запуска игры вам нужно лишь убедиться, что значения сетевого адреса и порта правильно заданы в HUD, затем нажать кнопку `Client` чтобы играть. #### Размещение клиента на Edgegap Возможно даже разместить клиент вашей игры на Edgegap! Для этого добавьте следующий `Dockerfile` и `nginx.conf` файл в `[CLIENT BUILD]` папку: **Dockerfile** ``` FROM nginx:alpine MAINTAINER COPY build/ /usr/share/nginx/html copy nginx.conf /etc/nginx/ ``` **nginx.conf** ``` user nginx; worker_processes auto; error_log /var/log/nginx/error.log notice; pid /var/run/nginx.pid; events { worker_connections 1024; } http { include /etc/nginx/mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' ' $status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; #tcp_nopush on; keepalive_timeout 65; #gzip on; include /etc/nginx/conf.d/*.conf; server { # Добавьте следующую конфигурацию в конфигурацию http server # ... # Предварительно сжатые на диске данные Brotli должны обслуживаться с включённым сжатием: location ~ .+\.(data|symbols\.json)\.br$ { # Поскольку этот файл уже предварительно сжат на диске, отключите для него сжатие по требованию. # Иначе nginx попытается выполнить двойное сжатие. gzip off; add_header Content-Encoding br; default_type application/octet-stream; } # Предварительно сжатые Brotli-файлы JavaScript на диске: location ~ .+\.js\.br$ { gzip off; # Не пытайтесь выполнять динамическое gzip-сжатие уже сжатого файла add_header Content-Encoding br; default_type application/javascript; } # Предварительно сжатые Brotli-файлы WebAssembly на диске: location ~ .+\.wasm\.br$ { gzip off; # Не пытайтесь выполнять динамическое gzip-сжатие уже сжатого файла add_header Content-Encoding br; # Включите потоковую компиляцию WebAssembly, указав правильный MIME-тип для # файлов Wasm. default_type application/wasm; } # Предварительно сжатые gzip-данные на диске должны обслуживаться с включённым сжатием: location ~ .+\.(data|symbols\.json)\.gz$ { gzip off; # Не пытайтесь выполнять динамическое gzip-сжатие уже сжатого файла add_header Content-Encoding gzip; default_type application/octet-stream; } # Предварительно сжатые gzip-файлы JavaScript на диске: location ~ .+\.js\.gz$ { gzip off; # Не пытайтесь выполнять динамическое gzip-сжатие уже сжатого файла add_header Content-Encoding gzip; default_type application/javascript; } # Предварительно сжатые gzip-файлы WebAssembly на диске: location ~ .+\.wasm\.gz$ { gzip off; # Не пытайтесь выполнять динамическое gzip-сжатие уже сжатого файла add_header Content-Encoding gzip; # Включите потоковую компиляцию WebAssembly, указав правильный MIME-тип для # файлов Wasm. default_type application/wasm; } } } ``` Продолжите, используя [те же команды Docker, что и раньше](#bootsh) для сборки и отправки образа вашего клиентского приложения в приватный репозиторий, но из окна команд, открытого в `[CLIENT BUILD]` папке. Убедитесь, что используете другое имя образа, чем для вашего сервера. Затем создайте новое приложение для вашего клиента в панели Edgegap со следующими настройками: * Application name : Может быть любым заметным именем, которое вы хотите использовать, чтобы легко распознавать ваше приложение среди других. * Image : Может быть любым конкретным образом, который вы хотите использовать, чтобы легко распознавать ваше приложение среди других. * Version name : Вы можете использовать имя версии, чтобы описать область развёртываемой версии. Примеры: “demo”, “production”, “v1”, “v2” * Container : * Registry : “\[URL]”, где \[URL] — это значение из учётных данных, которое можно просмотреть на странице Container Repository. * Image repository : “\[PROJECT]/\[YOUR GAME]”, где \[PROJECT] и \[YOUR GAME] — это значения, которые вы использовали ранее при отправке docker-образа. * Tag : “\[TAG]”, где \[TAG] — это значение, которое вы использовали ранее при отправке docker-образа. * Отметьте “Using a private repository” * Private registry username : “\[USERNAME]”, где \[USERNAME] — это значение из ваших учётных данных. * Private registry token : “\[TOKEN]”, где \[TOKEN] — это значение из ваших учётных данных. * Requirements : Оставьте без изменений. * Ports : Нажмите `+ Add port` ссылку, чтобы добавить новый порт, и добавьте следующие записи : * `80` - HTTPS
Когда ваше приложение будет создано, вы можете нажать кнопку `Deploy` кнопку, чтобы продолжить развёртывание вашего клиентского приложения. Когда и сервер, и клиент будут развёрнуты и иметь статус `Ready`, откройте `Host` url клиентского приложения по указанному `внешний порт` в вашем браузере, и вы сможете играть в игру после того, как зададите правильные значения в HUD игры!
{% hint style="info" %} Если вам нужна дополнительная информация об интеграции Mirror и websocket, вы можете обратиться к их [документацией](https://mirror-networking.gitbook.io/docs/manual/transports/websockets-transport). {% endhint %}