предисловие
NodeJSОн играет все более важную роль в области клиентской части: он не только позволяет фронтенд-работникам использовать JavaScript для написания внутреннего кода, но и позволяет легко создавать веб-приложения, которые быстро реагируют и легко расширяются.Node.jsЛегкая и эффективная, использующая управляемую событиями неблокирующую модель ввода-вывода, идеально подходящая для запуска приложений в реальном времени, интенсивно использующих данные, на распределенных устройствах.
Поэтому как отличному front-end инженеру очень нужно понимать и осваиватьNode.js. Далее автор будетH5-Dooringв проектеФункция онлайн-загрузки кода в режиме реального времениДавайте покажем вам, какАвтоматизируйте рабочие процессы упаковки с нуля онлайн.
ты получишь
- Основные идеи для разработки онлайн рабочего процесса
- nodejsОбщее использование API
- nodejsКак использовать родительские и дочерние процессы
- использоватьchild_processизexecРеализовать разбор и выполнение команд командной строки
- socket.ioОтправка сообщений в режиме реального времени
- использоватьjszipВнедрение сжатых файлов на стороне сервера и поддержка фронтальной загрузкиzipМешок
текст
Мы все использовали такие вещи, какgulp,webpackТакие инструменты автоматизации могут легко помочь нам упаковать и скомпилировать код, а также написать код нашего проекта относительно элегантным способом. Но если хорошенько подумать, то можно обнаружить, что за этими продуктами стоятnodejsа такжеbabelСделайте базовую поддержку.Мы не более чем разработка архитектурного шаблона с помощью загрузчика Babel иnodejsВозможность обслуживать код процессом JS-AST-JS (здесь игнорируйте обработку css и плагинов).
После хвастовства мы начинаем описывать, как спроектироватьОнлайн рабочий процесс.
1. Основная идея проектирования онлайн рабочего процесса
Рабочий процесс онлайн — это общий термин, на самом деле у любой линейки продуктов есть свой уникальный рабочий процесс, но со временем он вернется в бизнес. Поэтому автор специально вводит здесьH5-DooringОнлайн-процесс загрузки кода в режиме реального времени. Рассмотрим следующий процесс проектирования:Выше приведен рабочий процесс онлайн-упаковки в реальном времени и загрузки кода, который нам нужно сделать.Поскольку nodejs является однопоточным, чтобы не блокировать процесс, мы можем использовать метод связи родительского и дочернего процессов и асинхронную модель для обрабатывать сложные и трудоемкие задачи, чтобы уведомить пользователя о завершении задачи.В этом случае мы можем использовать сокеты для двусторонней связи. В текущем сценарии после того, как код скомпилирован и сжат, браузер получает уведомление, чтобы браузер мог отобразить всплывающее окно состояния загрузки. Есть три состояния:в ходе выполнения,завершенный,потерпеть неудачу. В соответствии с интерфейсом, показанным на следующем рисунке:
Насчет того, почему нет статуса сбоя загрузки, не спрашивайте меня, просто спрашивайте, чтобы никогда не было сбоя (все закончилось, ищу ругань).
ВышеупомянутоеH5-DooringДизайн рабочего процесса компиляции и загрузки в реальном времени, а также более актуальные потребности в Интернете, мы также можем обратиться к приведенному выше дизайну для достижения, после чего автор подробно представит процесс реализации.
2. nodejsКак использовать родительские и дочерние процессы
Если мы хотим внедрить автоматизированный рабочий процесс, ключевым вопросом, который необходимо учитывать, является время выполнения задачи и способ ее выполнения, поскольку пользователям необходимо дождаться упаковки, компиляции и сжатия страницы H5 перед загрузкой кода, и этот процесс требует определенного количества времени (8-30 с), поэтому мы можем считать его трудоемкой задачей.
когда мы используемnodejsВ качестве фонового сервера, из-заnodejsОн однопоточный, поэтому, когда пользователь запрашивает входящиеnodejsВремя,nodejsМы должны дождаться завершения этой «трудоемкой задачи», прежде чем обрабатывать другие запросы, что приведет к тому, что другие запросы на странице будут ждать завершения задачи, прежде чем продолжить. Поэтому для лучшего взаимодействия с пользователем и плавного ответа мы должны учитывать многопроцессорную обработку. К счастью, nodejs предназначен для поддержки подпроцессов. Мы можем помещать трудоемкие задачи в подпроцессы для обработки и уведомлять основной процесс, когда подпроцесс завершен. Весь процесс показано на следующем рисунке:
nodejsЕсть 3 способа создать дочерний процесс, здесь я кратко представлюforkПуть. Он используется следующим образом:
// child.js
function computedTotal(arr, cb) {
// 耗时计算任务
}
// 与主进程通信
// 监听主进程信号
process.on('message', (msg) => {
computedTotal(bigDataArr, (flag) => {
// 向主进程发送完成信号
process.send(flag);
})
});
// main.js
const { fork } = require('child_process');
app.use(async (ctx, next) => {
if(ctx.url === '/fetch') {
const data = ctx.request.body;
// 通知子进程开始执行任务,并传入数据
const res = await createPromisefork('./child.js', data)
}
// 创建异步线程
function createPromisefork(childUrl, data) {
// 加载子进程
const res = fork(childUrl)
// 通知子进程开始work
data && res.send(data)
return new Promise(reslove => {
res.on('message', f => {
reslove(f)
})
})
}
await next()
})существуетH5-DooringВ рабочем процессе онлайн-упаковки мы будем использоватьchild_processизexecметод для разбора и выполнения инструкций командной строки. Что касается других приложений родительско-дочернего процесса, вы можете изучить их самостоятельно.
3. Используйтеchild_processизexecРеализовать разбор и выполнение команд командной строки
описано вышеdooringВ рабочем процессе мы знаем, что для достижения упаковки в реальном времени нам нуженH5 TemplateПроект, как упакованный мастер, когда пользователь щелкает, чтобы загрузить, страницаjson schemaданные дляузловой сервер,узловой серверопять такиjson schemaпровестиОчистка данныхпоследний сгенерированныйtemplate.jsonфайл и перейти кH5 TemplateВ мастере в это время мастер получает источник данных, упаковывает и компилирует его и, наконец, генерирует исполняемый файл.
Вышеупомянутый процесс очень важен, здесь я рисую общую блок-схему:Для достижения вышеуказанного процесса нам нужны две ключевые ссылки:
- Обработайте настроенные пользователем данные и сгенерируйте файл json, затем перейдите кH5 Templateв мастере
- Автоматизируйте сценарии сборки пакетов в мастере
Первую ссылку легко реализовать, нам просто нужно использоватьnodejsизfsМодуль генерирует файлы в указанную директорию.Здесь автор акцентирует внимание на реализации второй ссылки.
Когда мы генерируем данные json дляH5 TemplateПосле этого его можно упаковать, но этот процесс должен выполняться автоматически, и его нельзя выполнять вручную, как мы начинали проект ранее.npm startилиyarn start. Нам нужна программа для автоматического выполнения этой команды командной строки для нас Автор проверяетnodejs APIвнезапно нашелchild_processизexecметод, который можно использовать для разбора инструкций, этого как раз достаточно для удовлетворения наших потребностей, поэтому мы приступаем к его реализации. код показывает, как показано ниже:
import { exec } from 'child_process'
const outWorkDir = resolve(__dirname, '../h5_landing')
const fid = uuid(8, 16)
const cmdStr = `cd ${outWorkDir} && yarn build ${fid}`
// ...exec相关代码
const filePath = resolve(__dirname, '../h5_landing/src/assets/config.json')
const res = WF(filePath, data)
exec(cmdStr, function(err,stdout,stderr){
if(err) {
// 错误处理
} else {
// 成功处理
}
})Приведенный выше код не сложен для понимания, нам нужно только определить упакованную командную строку (метод почти такой же, как и операция командной строки), а затем передать ее вexecПервый параметр, он поможет нам разобрать строку и выполнить соответствующую команду командной строки. После завершения выполнения мы можем судить о результате выполнения по значению параметра в функции обратного вызова (второй параметр). Весь процесс асинхронный, поэтому нам не нужно беспокоиться о блокировке.Чтобы отслеживать прогресс в режиме реального времени, мы можем использоватьsocketдля отправки информации о ходе выполнения в браузер.
4. socket.ioОтправка сообщений в режиме реального времени
описано вышеexec реализует синтаксический анализ и выполнение инструкций командной строкиЕсть еще некоторые детали, которые можно оптимизировать, такие как обратная связь о процессе выполнения кода и обратная связь о статусе выполнения. Поскольку мы используем асинхронное программирование, запрос не будет ждать все время.Если не будут приняты меры по оптимизации, пользователь не сможет узнать, когда код упакован и скомпилирован, и не скомпилируется ли код, поэтому в настоящее время , несколько общих случаев:
- Клиент запрашивает длительный опрос
- толчок сообщения после сообщения
- двусторонняя связь через веб-сокет
Очевидно, используйтедвусторонняя связь через веб-сокетбудет более подходящим для этого проекта. Здесь мы напрямую используем популярные в сообществеsocket.io.Поскольку на официальном веб-сайте есть много вводных для пользователей, автор не будет объяснять их здесь по одному. Давайте посмотрим непосредственно на использование кода в бизнесе:
// node端
exec(cmdStr, function(err,stdout,stderr){
if(err) {
console.log('api error:'+stderr);
io.emit('htmlFail', { result: 'error', message: stderr })
} else {
io.emit('htmlSuccess', { result: dest, message: stderr })
}
})
// 浏览器端
const socket = io(serverUrl);
// ...省略其他业务代码
useEffect(() => {
socket.on('connect', function(){
console.log('connect')
});
socket.on('htmlFail', function(data){
// ...
});
socket.on('disconnect', function(e){
console.log('disconnect', e)
});
}, [])Таким образом, мы можем реализовать обратную связь в режиме реального времени о состоянии потока серверных задач с браузером.
5. ИспользуйтеjszipВнедрение сжатых файлов на стороне сервера и поддержка фронтальной загрузкиzipМешок
На самом деле реализовать фронтальную загрузку очень просто, потому что сконфигурированный пользователем проект H5 содержит различные ресурсы, такие какcss, js, html, изображение, поэтому для повышения производительности и удобства загрузки нам необходимо упаковать весь веб-сайт и сгенерироватьzipФайл доступен для скачивания пользователем. Принцип заключается в использованииjszipСожмите каталог, затем верните сжатый путь на внешний интерфейс, и внешний интерфейс использует тег a для загрузки. Что касается того, как реализовать сжатие обхода каталогов и обход и чтение каталогов, то здесь автор не будет об этом говорить, если вам интересно, вы можете обратиться к другим статьям автора по nodejs.
6. Резюме
Автор вышеуказанного туториала был интегрирован вH5-DooringДля некоторых более сложных интерактивных функций это также может быть реализовано с помощью разумного дизайна, и вы можете исследовать и исследовать самостоятельно.
адрес гитхаба:Онлайн-редактор H5 H5-Dooring
наконец
Если вы хотите получить больше знаний о внешнем интерфейсе и реальных боевых действиях, таких как игры H5, webpack, node, gulp, css3, javascript, nodeJS, визуализация данных холста и т. д., добро пожаловать на совместное изучение и обсуждение в разделе «Интересный интерфейс». и исследуйте границы интерфейса вместе.