Консоль для общения с сервером с использованием WebSocket.
- React ~0.4
git clone git@github.com:rithis/consolication.git
cd consolication
npm install -g grunt-cli
npm install
grunt build
Для инициализации консоли на странице достаточно подключить consolication.css
и consolication.js
и вставить на страницу элемент
с идентификатором consolication
.
Пример:
<link rel="stylesheet" src="consolication.css"/>
<script src="consolication.js"></script>
<div id="consolication"></div>
Конфигурировать консоль можно с помощью добавления аттрибутов к элементу. Доступные аттрибуты:
data-autofocus
— сразу сфокусироваться на поле ввода при загрузке страницы.data-ws-server
— жестко определить адрес к WebSocket серверу.data-terminal-emulation
— эмулировать поведение терминала.data-debug
— выводить в консоль отладочную информацию.
Пример:
<div id="consolication"
data-autofocus
data-ws-server="localhost:3000"
data-terminal-emulation
data-debug></div>
Дерево классов выглядит следующим образом:
div.consolication
div.consolication-content
div.consolication-output
form.consolication-input
input.consolication-input-field
При включеном эмулировании терминала дерево классов выглядит так:
div.consolication.consolication--behaviour-terminal
div.consolication-content
div.consolication-output
form.consolication-input
input.consolication-input-field
span.consolication-input-field.consolication-input-field--state-hidden
Элемент span
используется для расчета ширины текста поля ввода.
Сообщения отправляются и получается асинхронно не гарантируя порядок
этих сообщений. Все сообщения отправляются без экранирования.
В случае отправки пустого сообщения, отправляется сообщение __EMPTY__
.
Все получаемые сообщения выводятся без экранирования.