Re: 🔹🅰RK🔹[ANN] ARK - Криптoвaлютнaя Экocиcтeмa🔹 ICO Зaвepшeнo
Перевод
https://blog.ark.io/launching-html5-games-in-the-ark-desktop-wallet-part-two-d07b6620bd46
Ray.Alva
Запуск HTML5 игр в настольном кошельке ARK - часть вторая
Добро пожаловать во второй урок из нашей серии, посвященной запуску HTML5 игр в ARK Desktop Wallet! Эта серия предназначена для разработчиков всех уровней квалификации. Цель этой серии - преобразовать игру HTML5 в полноценный плагин ARK Desktop Wallet. Первый набор руководств объяснит, как взаимодействовать с блокчейном ARK в автономной среде HTML5, прежде чем, наконец, перепрыгнуть в ARK Desktop Wallet.
Мы остановились в прошлый раз на автономном приложении Construct 3 ( https://editor.construct.net/ ), которое позволяет нам удостовериться, что указанный адрес действителен в публичной сети ARK. Теперь пришло время развить это, чтобы работать с любой сетью на базе ARK по нашему выбору и начать создавать серверную часть нашей игры.
https://blog.ark.io/launching-html5-games-in-the-ark-desktop-wallet-part-one-b26fd444f0d7
В оставшейся части этого учебного цикла мы сосредоточимся на создании серверной части нашей игры и использовании Connect 4, пошаговой блокчейн-игры в качестве нашего текущего примера и шаблона. Мы позволим игроку начать игру, установив ставку, и как только ставка будет получена, игра начнется. Мы будем использовать стандартную доску 7 x 6, и каждый игрок по очереди выберет колонку и вставит свой диск от 1 до 7. Если игрок выстроит в линию 4 диска по вертикали, горизонтали или диагонали, он получит приз ; если игра заканчивается ничьей, оба игрока получают обратно свой вступительный взнос. Для простоты мы будем использовать поле Smartbridge от ARK, чтобы выбрать выбранную колонку на доске от 1 до 7. Если вы хотите использовать более продвинутый подход, вы можете рассмотреть возможность совершения пользовательских транзакций с GTI на собственной мостовой цепочке, чтобы сделать эту игру по-настоящему децентрализовано.
https://learn.ark.dev/application-development/how-to-write-custom-transactions-types
Хотя все это может показаться пугающим на первый взгляд, мы сделаем это максимально простым. Все эти задачи будут разбиты на управляемые разделы в следующих нескольких уроках. В следующем разделе мы рассмотрим, как отправлять и получать транзакции в игре.
ПРЕДУПРЕЖДЕНИЕ: Прежде чем мы пойдем дальше, проверьте ARK Learning Hub, чтобы понять, как создать ваш первый модуль Core. Следуйте инструкциям и используйте шаблон стартового модуля. Это будет основой для остальной части урока.
https://learn.ark.dev/application-development/how-to-write-custom-transactions-types
Теперь, когда вы настроили свой начальный модуль, давайте перечислим наши цели относительно того, что мы хотим, чтобы наш плагин Core сделал к концу этого урока.
Начнем:
1.Настройте сервер WebSocket, чтобы наше приложение Construct 3 и плагин Core могли общаться друг с другом;
2.Отправляйте версию сети (о которой мы говорили в последнем уроке) всякий раз, когда приложение подключается к серверу, чтобы оно знало формат адреса для проверки;
3. Создайте новый адрес ARK для приема транзакций;
4. Проверьте входящие транзакции, отправленные на этот адрес.
Давайте уделим некоторое время каждому из разделов выше. Весь наш код будет записан в defaults.ts и manager.ts, поэтому откройте их в своем любимом текстовом редакторе и начнем!
Настройка сервера WebSocket
Во-первых, мы хотим настроить сервер WebSocket. Мы будем использовать WebSockets, потому что он обеспечивает простую двунаправленную связь между нашим плагином и приложением Construct 3. WebSockets связываются с хостом и портом, и для начала мы определим их в defaults.ts. Замените содержимое этого файла следующим:
Мы используем хост 0.0.0.0, что означает, что мы будем принимать подключения к любому из IP-адресов на нашем сервере, и мы будем соединяться через порт 10000. Сохраните этот файл и закройте его, так как все наши оставшиеся изменения будут внесены в менеджер .ts.
Для этого мы сначала импортируем зависимость ws, добавив следующую строку в начало нашего файла:
Теперь мы хотим запустить наш сервер WebSocket при запуске нашего плагина. Возможно, вы уже заметили метод start в manager.ts, где мы и запустим наш сервер:
Давайте изменим это, чтобы запустить наш сервер WebSocket и напечатать более подробное сообщение:
Что это делает? Он запускает сервер WebSocket, используя значения хоста и порта, которые мы ранее определили в defaults.ts, и печатает сообщение в наших журналах, чтобы подтвердить, что сервер успешно запущен, или, в случае сбоя, он объяснит, что пошло не так.
Отправка версии сети
Мы хотим отправить версию сети любому клиенту, который обращается к нашему WebSocket, как только он подключится. Для этого мы прослушиваем событие соединения с сервера WebSocket, которое срабатывает при установлении нового соединения, а затем отправляем версию сети новому соединению. Добавьте следующий код после строки this.logger.info:
На этом этапе вы можете запустить настройку плагина, перезапустить ядро Core и проверить журналы. Вы должны увидеть что-то вроде этого:
Мы можем проверить, работает ли WebSocket, перейдя по адресу http://www.websocket.org/echo.html и введя ws: // XXXX: 10000 (где XXXX - IP-адрес вашего сервера, на котором работает наш плагин Core) и нажимая Connect. Если вы выполнили действия, описанные выше, вы должны увидеть, что версия сети появится в окне журнала:
Генерация нового ARK-адреса для приема транзакций
Нам нужен наш плагин для генерации нового адреса для получения ставок и обработки сообщений Smartbridge для обновления нашего игрового состояния. Для этого наше приложение Construct 3 отправит на сервер сообщение {action: «new»}, которое запустит это действие. Наш плагин Core должен прослушать это сообщение и действовать в соответствии с ним, поэтому мы добавим следующий код сразу после строки websocket.send (networkData) выше:
Вы увидите, что мы используем новый метод generateAddress, поэтому мы должны написать код и для этого. Вставьте это ниже конца нашего метода start и перед методом stop:
Нам также нужно добавить несколько импортов в начало нашего кода, чтобы получить доступ к этим новым методам:
Это довольно большой код, поэтому давайте разберем его. Мы прослушиваем любые входящие сообщения через WebSocket, которые содержат {action: «new»}, сигнализирующий, что наше приложение Construct 3 хочет создать новый адрес для новой игры. Это вызывает наш новый метод generateAddress для внутреннего создания новой парольной фразы кошелька и преобразования ее в адрес. Теперь он хранится в объекте адресов, который отслеживает все адреса, созданные во время этого сеанса, которые будут использоваться для прослушивания входящих транзакций.
https://blog.ark.io/launching-html5-games-in-the-ark-desktop-wallet-part-two-d07b6620bd46
Ray.Alva
Запуск HTML5 игр в настольном кошельке ARK - часть вторая
Добро пожаловать во второй урок из нашей серии, посвященной запуску HTML5 игр в ARK Desktop Wallet! Эта серия предназначена для разработчиков всех уровней квалификации. Цель этой серии - преобразовать игру HTML5 в полноценный плагин ARK Desktop Wallet. Первый набор руководств объяснит, как взаимодействовать с блокчейном ARK в автономной среде HTML5, прежде чем, наконец, перепрыгнуть в ARK Desktop Wallet.
Мы остановились в прошлый раз на автономном приложении Construct 3 ( https://editor.construct.net/ ), которое позволяет нам удостовериться, что указанный адрес действителен в публичной сети ARK. Теперь пришло время развить это, чтобы работать с любой сетью на базе ARK по нашему выбору и начать создавать серверную часть нашей игры.
https://blog.ark.io/launching-html5-games-in-the-ark-desktop-wallet-part-one-b26fd444f0d7
В оставшейся части этого учебного цикла мы сосредоточимся на создании серверной части нашей игры и использовании Connect 4, пошаговой блокчейн-игры в качестве нашего текущего примера и шаблона. Мы позволим игроку начать игру, установив ставку, и как только ставка будет получена, игра начнется. Мы будем использовать стандартную доску 7 x 6, и каждый игрок по очереди выберет колонку и вставит свой диск от 1 до 7. Если игрок выстроит в линию 4 диска по вертикали, горизонтали или диагонали, он получит приз ; если игра заканчивается ничьей, оба игрока получают обратно свой вступительный взнос. Для простоты мы будем использовать поле Smartbridge от ARK, чтобы выбрать выбранную колонку на доске от 1 до 7. Если вы хотите использовать более продвинутый подход, вы можете рассмотреть возможность совершения пользовательских транзакций с GTI на собственной мостовой цепочке, чтобы сделать эту игру по-настоящему децентрализовано.
https://learn.ark.dev/application-development/how-to-write-custom-transactions-types
Хотя все это может показаться пугающим на первый взгляд, мы сделаем это максимально простым. Все эти задачи будут разбиты на управляемые разделы в следующих нескольких уроках. В следующем разделе мы рассмотрим, как отправлять и получать транзакции в игре.
ПРЕДУПРЕЖДЕНИЕ: Прежде чем мы пойдем дальше, проверьте ARK Learning Hub, чтобы понять, как создать ваш первый модуль Core. Следуйте инструкциям и используйте шаблон стартового модуля. Это будет основой для остальной части урока.
https://learn.ark.dev/application-development/how-to-write-custom-transactions-types
Теперь, когда вы настроили свой начальный модуль, давайте перечислим наши цели относительно того, что мы хотим, чтобы наш плагин Core сделал к концу этого урока.
Начнем:
1.Настройте сервер WebSocket, чтобы наше приложение Construct 3 и плагин Core могли общаться друг с другом;
2.Отправляйте версию сети (о которой мы говорили в последнем уроке) всякий раз, когда приложение подключается к серверу, чтобы оно знало формат адреса для проверки;
3. Создайте новый адрес ARK для приема транзакций;
4. Проверьте входящие транзакции, отправленные на этот адрес.
Давайте уделим некоторое время каждому из разделов выше. Весь наш код будет записан в defaults.ts и manager.ts, поэтому откройте их в своем любимом текстовом редакторе и начнем!
Настройка сервера WebSocket
Во-первых, мы хотим настроить сервер WebSocket. Мы будем использовать WebSockets, потому что он обеспечивает простую двунаправленную связь между нашим плагином и приложением Construct 3. WebSockets связываются с хостом и портом, и для начала мы определим их в defaults.ts. Замените содержимое этого файла следующим:
Code:
export const defaults = {
enabled: true,
host: "0.0.0.0",
port: 10000
};
enabled: true,
host: "0.0.0.0",
port: 10000
};
Мы используем хост 0.0.0.0, что означает, что мы будем принимать подключения к любому из IP-адресов на нашем сервере, и мы будем соединяться через порт 10000. Сохраните этот файл и закройте его, так как все наши оставшиеся изменения будут внесены в менеджер .ts.
Для этого мы сначала импортируем зависимость ws, добавив следующую строку в начало нашего файла:
Code:
import * as WebSocket from “ws”;
Теперь мы хотим запустить наш сервер WebSocket при запуске нашего плагина. Возможно, вы уже заметили метод start в manager.ts, где мы и запустим наш сервер:
Code:
public start(options: any) {
this.logger.info("Initialization of dApp");
}
this.logger.info("Initialization of dApp");
}
Давайте изменим это, чтобы запустить наш сервер WebSocket и напечатать более подробное сообщение:
Code:
public start(options: any) {
try {
const server = new WebSocket.Server({ host: options.host, port: options.port });
this.logger.info(`Connect 4 WebSocket server listening on ws://${options.host}:${options.port}`);
} catch (error) {
this.logger.error(`Connect 4 WebSocket server could not start: ${error.message}`);
}
}
try {
const server = new WebSocket.Server({ host: options.host, port: options.port });
this.logger.info(`Connect 4 WebSocket server listening on ws://${options.host}:${options.port}`);
} catch (error) {
this.logger.error(`Connect 4 WebSocket server could not start: ${error.message}`);
}
}
Что это делает? Он запускает сервер WebSocket, используя значения хоста и порта, которые мы ранее определили в defaults.ts, и печатает сообщение в наших журналах, чтобы подтвердить, что сервер успешно запущен, или, в случае сбоя, он объяснит, что пошло не так.
Отправка версии сети
Мы хотим отправить версию сети любому клиенту, который обращается к нашему WebSocket, как только он подключится. Для этого мы прослушиваем событие соединения с сервера WebSocket, которое срабатывает при установлении нового соединения, а затем отправляем версию сети новому соединению. Добавьте следующий код после строки this.logger.info:
Code:
const config = app.getConfig();
const networkData = JSON.stringify({ networkVersion: config.get("network.pubKeyHash") });
server.on("connection", websocket => {
websocket.send(networkData);
});
const networkData = JSON.stringify({ networkVersion: config.get("network.pubKeyHash") });
server.on("connection", websocket => {
websocket.send(networkData);
});
На этом этапе вы можете запустить настройку плагина, перезапустить ядро Core и проверить журналы. Вы должны увидеть что-то вроде этого:
Code:
1|ark-relay | [2020–02–17 19:00:00.000] INFO : Connect 4 WebSocket server listening on ws://0.0.0.0:10000
Мы можем проверить, работает ли WebSocket, перейдя по адресу http://www.websocket.org/echo.html и введя ws: // XXXX: 10000 (где XXXX - IP-адрес вашего сервера, на котором работает наш плагин Core) и нажимая Connect. Если вы выполнили действия, описанные выше, вы должны увидеть, что версия сети появится в окне журнала:
Генерация нового ARK-адреса для приема транзакций
Нам нужен наш плагин для генерации нового адреса для получения ставок и обработки сообщений Smartbridge для обновления нашего игрового состояния. Для этого наше приложение Construct 3 отправит на сервер сообщение {action: «new»}, которое запустит это действие. Наш плагин Core должен прослушать это сообщение и действовать в соответствии с ним, поэтому мы добавим следующий код сразу после строки websocket.send (networkData) выше:
Code:
websocket.on("message", message => {
try {
const data = JSON.parse(message.toString());
if (data.action === "new") {
const { address, passphrase } = this.generateAddress();
this.addresses[address] = passphrase;
// @ts-ignore
websocket.address = address;
websocket.send(JSON.stringify({ address }));
}
} catch (error) {
this.logger.error(error.stack);
}
});
try {
const data = JSON.parse(message.toString());
if (data.action === "new") {
const { address, passphrase } = this.generateAddress();
this.addresses[address] = passphrase;
// @ts-ignore
websocket.address = address;
websocket.send(JSON.stringify({ address }));
}
} catch (error) {
this.logger.error(error.stack);
}
});
Вы увидите, что мы используем новый метод generateAddress, поэтому мы должны написать код и для этого. Вставьте это ниже конца нашего метода start и перед методом stop:
Code:
private generateAddress() {
const passphrase = generateMnemonic();
const address = Identities.Address.fromPassphrase(passphrase);
return { address, passphrase };
}
const passphrase = generateMnemonic();
const address = Identities.Address.fromPassphrase(passphrase);
return { address, passphrase };
}
Нам также нужно добавить несколько импортов в начало нашего кода, чтобы получить доступ к этим новым методам:
Code:
import { generateMnemonic } from “bip39”;
import { Identities } from “@arkecosystem/crypto”;
// Lastly we add a new addresses private variable immediately above // the private readonly logger line:
private addresses = {};
import { Identities } from “@arkecosystem/crypto”;
// Lastly we add a new addresses private variable immediately above // the private readonly logger line:
private addresses = {};
Это довольно большой код, поэтому давайте разберем его. Мы прослушиваем любые входящие сообщения через WebSocket, которые содержат {action: «new»}, сигнализирующий, что наше приложение Construct 3 хочет создать новый адрес для новой игры. Это вызывает наш новый метод generateAddress для внутреннего создания новой парольной фразы кошелька и преобразования ее в адрес. Теперь он хранится в объекте адресов, который отслеживает все адреса, созданные во время этого сеанса, которые будут использоваться для прослушивания входящих транзакций.