MUDJS: Web-Socket MUD client

Содержание

• Обзор
• Онлайн-разработка в gitpod.io
• Локальная разработка
  • Сборка
  • Запуск
• Описание протокола общения с сервером мира DreamLand
  • Web Prompt: расширенная строка состояния
  • Поддержка цветов
  • Контекстное меню манипуляции с предметами
  • RPC-протокол
• Использование клиента для других MUD-ов

Обзор

Клиент mudjs первоначально был разработан для мира DreamLand и сейчас доступен по адресу https://dreamland.rocks/mudjs. Для полноценного его использования в код DreamLand была добавлена поддержка web sockets. Это дало возможность поддерживать SSL-соединения, а также видеть реальный IP адрес тех, кто соединяется с миром.

Сейчас в репозитории есть две ветки:

• master - код клиента неспецифичен для какого-либо сервера и может быть использован для любого MUD
• dreamland - плотная интеграция с сервером DreamLand по собственному протоколу общения

Основная разработка ведется в ветке dreamland. Master по сути заморожен.

Разработка в gitpod.io

Gitpod предоставляет встроенную в браузер среду разработки на базе Visual Studio Code, а также полноценный контейнер со множеством установленных программ.

• Запустить среду: просто зайдите на https://gitpod.io/#https://github.com/dreamland-mud/mudjs (вместо dreamland-mud/mudjs можно указать свой собственный fork). В созданном контейнере уже будет собран клиент и запущен веб-сервер на порту 8080.
• Открыть веб-клиент в браузере: нажмите на "Ports: 8000" в синей строке состояния, а затем на кнопку "Open Browser".
• Пересобрать веб-клиент: в терминале нажмите Ctrl+C и стрелку вверх, чтобы перезапустить предыдущую команду

Доступ к репозиторию из gitpod.io

Изнутри контейнера, который предоставляет gitpod.io, можно сделать git pull или git fetch, но нет прав для заливки своих изменений обратно в репозиторий, git push. Вот как можно добавить права контейнеру с помощью SSH-ключей:

• Внутри контейнера создайте новую пару ключей:

ssh-keygen -t rsa -b 4096 -C "ruffina.koza@gmail.com"

• В настройках Github для вашего пользователя (Settings -> SSH and GPG keys) добавьте публичный ключ ssh_host_rsa_key.pub с правами read/write
• Внутри контейнера убедитесь, что origin вашего репозитория смотрит на нужный форк, и поправьте по необходимости:

git remote set-url origin <git url>

• Внутри контейнера запустите ssh-agent и добавьте этот ключ:

eval $(ssh-agent)
ssh-add ~/.ssh/ssh_host_rsa_key

• Из этой же консоли, где запущен ssh-agent, теперь можно выполнять git push

Локальная сборка

Для сборки ветки dreamland, cклонируйте основной репозиторий или свой форк, например:

git clone https://github.com/dreamland-mud/mudjs.git

Затем установите NodeJs и npm, скачав последнюю рекомендуемую версию для вашей системы с официального сайта NodeJs. Под Linux может понадобиться прописать путь к бинарникам node и npm в переменной окружения PATH. Это можно сделать с командной строки или же прописать в файле ~/.bashrc:

export NODEJS_HOME=/opt/node-v8.11.3-linux-x64 # путь может отличаться
export PATH=$NODEJS_HOME/bin:$PATH

После первой установки или после крупных изменений может понадобиться скачать все необходимые пакеты:

cd mudjs
npm install

И, наконец, сборка из исходников:

npm run build

Локальный запуск

Запустите клиент в режиме разработчика: все изменения в исходных файлах будут подхватываться и пересобираться автоматически. Клиент станет доступен по адресу http://localhost:3000/ и по умолчанию соединится с основным сервером Дримленд.

npm run start

Можно указать различные фрагменты после /#, для доступа к различным серверам:

• http://localhost:3000/ - соединится с основным сервером на dreamland.rocks
• http://localhost:3000/#buildplot - соединится со стройплощадкой на dreamland.rocks
• http://localhost:3000/#local - попытается соединиться с локально запущенным сервером на localhost 1234. Подробнее о том, как установить локальный сервер, смотрите в инструкции к проекту dreamland_code.

Если клиент запускается, но не удается соедениться с сервером, в первую очередь проверьте, не активирован ли AdBlock на текущей странице.

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

Общение между сервером и клиентом происходит в виде команд с аргументами, передаваемых в формате JSON.

{ "command": "имя команды", "args": ["первый аргумент", "второй аргумент", "и так далее"] }

Поддерживаемые команды:

• console_out строка: обычный вывод сообщения в терминал
• notify строка: вывод сообщения во всплывающем окошке оповещений
• alert строка: вывод сообщения через JavaScript alert в модальном окне
• version строка: сервер передает текующую версию, и если она не совпадает с версией клиента, соединиться не получится
• editor_open: открывает диалоговое окно с текстовым редактором (вышлется с сервера, если пользователь успешно выполнил команду webedit)
• cs_edit: открывает диалоговое окно с редактором скриптов на Fenia, с подсветкой синтаксиса (вышлется с сервера после выполнения команды codesource edit)
• prompt массив аргументов: т.н. web prompt высылается с сервера каждый раз одновременно с обычной строкой состояния. По результатам его обработки будет отрисована правая панель.

RPC-протокол

TODO

Web Prompt: расширенная строка состояния

Расширенная строка состояния - это JSON-структура, содержащая поля для каждого из видов сообщений (эффекты, кто в мире, положение персонажа и т. д.). На основании этих полей будут заполнены окошки на правой панели клиента. Если между двумя последовательными выводами от сервера к клиенту какое-то из полей не изменилось, оно не будет включено в вывод, и клиент будет знать, что его перерисовывать не надо. Если какое-то поле исчезло (исчезла группа эффектов, стала не видна погода), его значение будет выслано как 'none', и клиент будет знать, что соответствующую секцию на правой панели надо спрятать.

Поля постоянно дорабатываются, но комментарии к каждой из функций в prompt.js должны содержать актуальные названия полей и расшифровку всех значений.

Пример строки состояния с подробными комментариями можно увидеть в этой статье вики.

Поддержка цветов

Веб-клиент умеет парсить ANSI-последовательности с цветами, кроме того, он распознает псевдотеги разметки, которые ему посылает сервер DreamLand. Например,

<c c='fgbg'>ярко-зеленое сообщение</c>

превратится в

<span class='fgbg'>ярко-зеленое сообщение</span>

Названия классов основаны на названиях цветов внутри мира, fgbg - (foreground) bright green, fgdr - dark red, и т. д. Они все объявлены в файле main.css.

Контекстное меню манипуляции с предметами

Каждый предмет в инвентаре, экипировке, контейнере или на полу обрамляется специальным псевдотегом разметки . Веб-клиент обрабатывает эти теги и превращает их в стандартное dropdown-menu из Bootstrap.

Пример разметки для предмета в инвентаре:

<m c='бросить $, надеть $, смотреть $, использовать $, легенды $' id='1773732900'>хитрость лаеркаи</m>

Для компактности символ $ будет заменен на стороне клиента на уникальный ID предмета. ID используется в качестве аргумента для однозначности при манипуляциях.

Пример разметки для команд с дополнительным аргументом. Здесь 5394478976633 - ID бочонка, найденного в инвентаре персонажа, который можно было бы наполнить из этого фонтана.

<m c='пить $, наполнить 5394478976633 $, смотреть $' id='1614907783901'>Большой фонтан (fountain) здесь, бьет нескончаемым потоком воды.</m>

Некоторые манипуляции контекстно-зависимы и могут быть проделаны только в какой-то комнате (магазине, у ремонтника). Такие команды отделяются в меню вертикальной чертой, а внутри псевдотега будут переданы аттрибутом 'l':

<m c='бросить $, надеть $, смотреть $, легенды $' l='чинить $, стоимость $' id='5573732900'>хитрость лаеркаи</m>

Подробнее о командах и тэгах веб-клиента можно почитать в этой статье вики.

Использование клиента для других MUD-ов

Для использования master версии клиента в своем мире нужна либо поддержка web sockets, либо можно воспользоваться утилитой websockify. Например, если мир обычно доступен по протоколу telnet на порту 9000, на хостинге запустите:

websockify :4321 :9000

После чего в странице веб-клиента (например, /mudjs/index.html) установите переменную wsUrl, указывающую на ваш хост и порт 4321:

    <script>
        var wsUrl = "ws://yourmud.com:4321";
    </script>

Хост "yourmud.com" должен совпадать с именем сайта, на котором размещен вебклиент. Внутри main.js, первое что посылается при соединении с сервером, это цифра 7, что соответствует выбору кодировки UTF8 в DreamLand. У себя вы можете изменить эту цифру на тот номер кодировки, который соответствует UTF8 в вашем мире:

    ws.onopen = function(e) {
        send('7');
    }

Готово. Теперь при заходе на страницу http://yourmud.com/mudjs/index.html пройзойдет подключение к серверу, и можно будет начинать играть.