node-karin 0.0.3

package/lib/renderer/client.d.ts

@@ -0,0 +1,30 @@
+import WebSocket from 'ws';
+import RenderBase from './base.js';
+import { KarinRenderType } from '../types/render.js';
+export default class RenderClient extends RenderBase {
+    url: string;
+    type: string;
+    id: string;
+    index: number;
+    retry: number;
+    reg: RegExp;
+    ws: WebSocket;
+    constructor(url: string);
+    /**
+     * 初始化
+     */
+    start(): Promise<void>;
+    /**
+     * 心跳
+     */
+    heartbeat(): Promise<void>;
+    /**
+     * 接受消息
+     */
+    message(str: string): Promise<void>;
+    /**
+     * 渲染标准方法
+     * @param options 渲染参数
+     */
+    render(options: KarinRenderType): Promise<string | string[]>;
+}

package/lib/renderer/client.js

@@ -0,0 +1,159 @@
+import fs from 'fs'
+import WebSocket from 'ws'
+import Renderer from './app.js'
+import RenderBase from './base.js'
+import { randomUUID } from 'crypto'
+import common from '../utils/common.js'
+import logger from '../utils/logger.js'
+import listener from '../core/listener.js'
+export default class RenderClient extends RenderBase {
+  url
+  type
+  id
+  index
+  retry
+  reg
+  ws
+  constructor (url) {
+    super()
+    this.url = url
+    this.type = 'image'
+    this.id = 'puppeteer'
+    this.index = 0
+    this.retry = 0
+    this.reg = new RegExp(`(${process.cwd().replace(/\\/g, '\\\\')}|${process.cwd().replace(/\\/g, '/')})`, 'g')
+    /** 连接ws */
+    this.ws = new WebSocket(this.url)
+  }
+
+  /**
+     * 初始化
+     */
+  async start () {
+    /** 建立连接 */
+    this.ws.on('open', () => {
+      logger.mark(`[渲染器:${this.id}][WebSocket] 建立连接：${logger.green(this.url)}`)
+      /** 注册渲染器 */
+      try {
+        this.index = Renderer.app({ id: this.id, type: this.type, render: this.render.bind(this) })
+        this.retry = 0
+      } catch (error) {
+        logger.error(`[渲染器:${this.id}] 注册渲染器失败：`, error)
+        /** 断开连接 */
+        this.ws.close()
+      }
+      /** 心跳 */
+      this.heartbeat()
+      /** 监听消息 */
+      this.ws.on('message', data => this.message(data.toString()))
+    })
+    /** 监听断开 */
+    this.ws.once('close', async () => {
+      this.retry++
+      /** 停止监听 */
+      this.ws.removeAllListeners()
+      /** 卸载渲染器 */
+      this.index && Renderer.unapp(this.index) && (this.index = 0)
+      logger.warn(`[渲染器:${this.id}][重连次数:${this.retry}] 连接断开，5秒后将尝试重连：${this.url}`)
+      await common.sleep(5000)
+      await this.start()
+    })
+    /** 监听错误 */
+    this.ws.on('error', async (e) => {
+      logger.debug(e)
+      await common.sleep(5000)
+      this.ws.close()
+    })
+  }
+
+  /**
+     * 心跳
+     */
+  async heartbeat () {
+    /** 无限循环 错误则停止 */
+    while (true) {
+      try {
+        this.ws.send(JSON.stringify({ action: 'heartbeat' }))
+        logger.debug(`[渲染器:${this.id}] 心跳：${this.url}`)
+      } catch (e) {
+        logger.debug(`[渲染器:${this.id}] 心跳失败：`, e)
+        this.ws.close()
+        break
+      }
+      await common.sleep(5000)
+    }
+  }
+
+  /**
+     * 接受消息
+     */
+  async message (str) {
+    const data = JSON.parse(str)
+    switch (data.action) {
+      /** 静态文件 */
+      case 'static': {
+        const filePath = decodeURIComponent(data.params.file)
+        logger.debug(`[渲染器:${this.id}][正向WS] 访问静态文件：${filePath}`)
+        const file = fs.readFileSync('.' + filePath)
+        const params = {
+          echo: data.echo,
+          action: 'static',
+          status: 'ok',
+          data: { file },
+        }
+        return this.ws.send(JSON.stringify(params))
+      }
+      /** 渲染结果 */
+      case 'renderRes': {
+        listener.emit(data.echo, data)
+        break
+      }
+      /** 未知数据 */
+      default: {
+        logger.warn(`[渲染器:${this.id}] 收到未知数据：`, data)
+      }
+    }
+  }
+
+  /**
+     * 渲染标准方法
+     * @param options 渲染参数
+     */
+  async render (options) {
+    /** 渲染模板 */
+    let file = options.file
+    let action = 'renderHtml'
+    if (options.file.includes('http') || options.vue) {
+      action = 'render'
+    } else {
+      file = this.dealTpl(options)
+      /** 判断是本地karin-puppeteer还是远程 */
+      if (!/127\.0\.0\.1|localhost/.test(this.url)) {
+        file = fs.readFileSync(file, 'utf-8').replace(this.reg, '')
+      } else {
+        action = 'render'
+        file = 'file://' + file
+      }
+    }
+    if (!file) {
+      logger.error(`[渲染器:${this.id}:${this.index}] 渲染文件不存在：${options.file}`)
+      return ''
+    }
+    /** 编码 */
+    file = encodeURIComponent(file)
+    const data = options
+    const echo = randomUUID()
+    /** 移除掉模板参数 */
+    if (data.data) { delete data.data }
+    data.file = file
+    const req = JSON.stringify({ echo, action, data })
+    logger.debug(`[渲染器:${this.id}:${this.index}][正向WS] 请求：${this.url} \nhtml: ${options.file} \ndata: ${JSON.stringify(data)}`)
+    this.ws.send(req)
+    return new Promise((resolve, reject) => {
+      listener.once(echo, (data) => {
+        if (data.ok) { return resolve(data.data) }
+        reject(new Error(JSON.stringify(data)))
+      })
+    })
+  }
+}

package/lib/renderer/http.d.ts

@@ -0,0 +1,19 @@
+import RenderBase from './base.js';
+import { KarinRenderType } from '../types/render.js';
+export default class HttpRenderer extends RenderBase {
+    id: string;
+    host: string;
+    url: string;
+    token: string;
+    /**
+     * 构造函数
+     * @param host - 静态服务器地址
+     * @param url - 渲染接口
+     * @param token - token
+     */
+    constructor(host: string, url: string, token: string);
+    /**
+     * 渲染
+     */
+    render(options: KarinRenderType): Promise<string | Array<string>>;
+}

package/lib/renderer/http.js

@@ -0,0 +1,51 @@
+import axios from 'axios'
+import RenderBase from './base.js'
+import logger from '../utils/logger.js'
+export default class HttpRenderer extends RenderBase {
+  id
+  host
+  url
+  token
+  /**
+     * 构造函数
+     * @param host - 静态服务器地址
+     * @param url - 渲染接口
+     * @param token - token
+     */
+  constructor (host, url, token) {
+    super()
+    this.id = 'puppeteer'
+    this.host = host
+    this.url = url
+    this.token = token
+  }
+
+  /**
+     * 渲染
+     */
+  async render (options) {
+    const name = options.name || 'render'
+    let file = options.file
+    /** 非http渲染模板并转为http静态资源 */
+    if (!options.file.includes('http') && !options.vue) {
+      const isLocalhost = this.host.includes('127.0.0.1') || this.host.includes('localhost')
+      file = this.dealTpl(options, isLocalhost)
+      if (!file) {
+        logger.error(`[渲染器:${this.id}] 模板文件不存在：${name}`)
+        return ''
+      }
+      options.file = isLocalhost ? 'file://' + file : `${this.host}/api/renderHtml?html=${file}`
+    }
+    delete options.data
+    const data = options
+    const headers = {
+      Authorization: this.token,
+    }
+    logger.debug(`[渲染器:${this.id}][POST] \n请求:${this.url} \nhtml: ${options.file} \ndata: ${JSON.stringify(data)}`)
+    const res = await axios({ method: 'post', url: this.url, headers, data })
+    if (res.status === 200 && res.data.ok) {
+      return res.data.data
+    }
+    throw new Error(`渲染失败：${JSON.stringify(res.data)}`)
+  }
+}

package/lib/renderer/server.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="node" />
+import RenderBase from './base.js';
+import WebSocket from 'ws';
+import { IncomingMessage } from 'http';
+import { KarinRenderType } from '../types/render.js';
+declare class Puppeteer extends RenderBase {
+    socket: WebSocket;
+    id: any;
+    type: any;
+    host: any;
+    url: string;
+    index: number;
+    constructor();
+    server(socket: WebSocket, request: IncomingMessage): Promise<void>;
+    /**
+     * 渲染模板
+     * @param {object} options 渲染参数
+     * @param {string} options.file http地址或本地文件路径
+     * @param {string} [options.name] 模板名称
+     * @param {string} [options.fileID] art-template后的文件名
+     * @param {object} [options.data] 传递给模板的数据 template.render(data)
+     * @param {'png'|'jpeg'|'webp'} [options.type] 截图类型 默认'webp'
+     * @param {number} [options.quality] 截图质量 默认90 1-100
+     * @param {boolean} options.omitBackground 是否隐藏背景 默认false
+     * @param {object} [options.setViewport] 设置视窗大小和设备像素比 默认1920*1080、1
+     * @param {number} [options.setViewport.width] 视窗宽度
+     * @param {number} [options.setViewport.height] 视窗高度
+     * @param {string} [options.setViewport.deviceScaleFactor] 设备像素比
+     * @param {number|boolean} [options.multiPage] 分页截图 传递数字则视为视窗高度 返回数组
+     * @param {object} [options.pageGotoParams] 页面goto时的参数
+     * @param {number} [options.pageGotoParams.timeout] 页面加载超时时间
+     * @param {'load'|'domcontentloaded'|'networkidle0'|'networkidle2'} [options.pageGotoParams.waitUntil] 页面加载状态
+     * @returns {Promise<string|string[]>} 返回图片base64或数组
+     */
+    render(options: KarinRenderType): Promise<string | string[]>;
+}
+declare const _default: {
+    type: string;
+    path: string;
+    adapter: typeof Puppeteer;
+};
+export default _default;

package/lib/renderer/server.js

@@ -0,0 +1,112 @@
+import Renderer from './app.js'
+import RenderBase from './base.js'
+import { randomUUID } from 'crypto'
+import logger from '../utils/logger.js'
+import listener from '../core/listener.js'
+class Puppeteer extends RenderBase {
+  socket
+  id
+  type
+  host
+  url
+  index
+  constructor () {
+    super()
+    this.id = 0
+    this.index = 0
+    this.type = ''
+    this.host = ''
+    this.url = ''
+  }
+
+  async server (socket, request) {
+    this.socket = socket
+    this.id = request.headers['renderer-id']
+    this.type = request.headers['renderer-type']
+    /** 注册渲染器 */
+    this.host = request.headers.host
+    this.url = `ws://${this.host + request.url}`
+    logger.info(`[渲染器:${this.id}] 收到新的连接请求：` + logger.green(this.url))
+    /** 监听上报事件 */
+    this.socket.on('message', data => {
+      const json = JSON.parse(data.toString())
+      if (json.echo) {
+        listener.emit(json.echo, json)
+      } else if (json.action === 'heartbeat') {
+        logger.debug(`[渲染器:${this.id}] 收到心跳：${this.url}`)
+      } else {
+        logger.warn(`[渲染器:${this.id}] 收到未知数据：`, data)
+      }
+    })
+    /** 监听断开 */
+    this.socket.on('close', () => {
+      logger.warn(`[渲染器:${this.id}] 连接断开：${this.url}`)
+      /** 卸载渲染器 */
+      this.index && Renderer.unapp(this.index)
+      this.index = 0
+    })
+    /** 注册渲染器 */
+    try {
+      const index = Renderer.app({
+        id: this.id,
+        type: this.type,
+        render: this.render.bind(this),
+      })
+      this.index = index
+    } catch (error) {
+      logger.error(`[渲染器:${this.id}] 注册渲染器失败：`, error)
+      /** 断开连接 */
+      this.socket.close()
+    }
+  }
+
+  /**
+     * 渲染模板
+     * @param {object} options 渲染参数
+     * @param {string} options.file http地址或本地文件路径
+     * @param {string} [options.name] 模板名称
+     * @param {string} [options.fileID] art-template后的文件名
+     * @param {object} [options.data] 传递给模板的数据 template.render(data)
+     * @param {'png'|'jpeg'|'webp'} [options.type] 截图类型 默认'webp'
+     * @param {number} [options.quality] 截图质量 默认90 1-100
+     * @param {boolean} options.omitBackground 是否隐藏背景 默认false
+     * @param {object} [options.setViewport] 设置视窗大小和设备像素比 默认1920*1080、1
+     * @param {number} [options.setViewport.width] 视窗宽度
+     * @param {number} [options.setViewport.height] 视窗高度
+     * @param {string} [options.setViewport.deviceScaleFactor] 设备像素比
+     * @param {number|boolean} [options.multiPage] 分页截图 传递数字则视为视窗高度 返回数组
+     * @param {object} [options.pageGotoParams] 页面goto时的参数
+     * @param {number} [options.pageGotoParams.timeout] 页面加载超时时间
+     * @param {'load'|'domcontentloaded'|'networkidle0'|'networkidle2'} [options.pageGotoParams.waitUntil] 页面加载状态
+     * @returns {Promise<string|string[]>} 返回图片base64或数组
+     */
+  async render (options) {
+    /** 渲染模板 */
+    let file = ''
+    if (options.file.includes('http') || options.vue) {
+      file = options.file
+    } else {
+      file = 'file://' + this.dealTpl(options)
+    }
+    if (!file) { throw new Error(`[渲染器:${this.id}] 模板文件不存在：${options.name}`) }
+    const echo = randomUUID()
+    const action = 'render'
+    const data = options
+    /** 移除掉模板参数 */
+    if (data.data) { delete data.data }
+    data.file = file
+    logger.debug(`[渲染器:${this.id}][反向WS] \n请求:${this.url} \nhtml: ${options.file} \ndata: ${JSON.stringify(data)}`)
+    this.socket.send(JSON.stringify({ echo, action, data }))
+    return new Promise((resolve, reject) => {
+      listener.once(echo, data => {
+        if (data.ok) { return resolve(data.data) }
+        reject(new Error(JSON.stringify(data)))
+      })
+    })
+  }
+}
+export default {
+  type: 'render',
+  path: '/puppeteer',
+  adapter: Puppeteer,
+}

package/lib/renderer/wormhole.d.ts

@@ -0,0 +1 @@
+export default function connect(): void;

package/lib/renderer/wormhole.js

@@ -0,0 +1,154 @@
+import WebSocket from 'ws'
+import fs from 'fs'
+import path from 'path'
+import { URL } from 'url'
+import HttpRenderer from './http.js'
+import config from '../utils/config.js'
+import { render } from '../index.js'
+let ws
+let reConnect
+const chunkSize = 1024 * 1024 * 3 // 文件分片大小
+export default function connect () {
+  let heartbeat
+  let index = 0
+  reConnect = undefined
+  const wsUrl = config.Server.HttpRender.WormholeClient
+  ws = new WebSocket(wsUrl)
+  ws.on('open', function open () {
+    logger.info('连接到wormhole服务器' + wsUrl)
+    // 发送心跳
+    heartbeat = setInterval(() => {
+      ws.send(JSON.stringify({ type: 'heartbeat', date: new Date() }))
+    }, 30000) // 每30秒发送一次心跳
+  })
+  ws.on('message', msg => {
+    let data = ''
+    try {
+      data = JSON.parse(msg.toString())
+    } catch (error) {
+      logger.warn(`收到非法消息${data}`)
+    }
+    const echo = data.echo
+    switch (data.type) {
+      case 'msg': {
+        const { post, token, WormholeClient } = config.Server.HttpRender
+        const parsedUrl = new URL(WormholeClient)
+        const { hostname, port } = parsedUrl
+        const ishttps = WormholeClient.includes('wss://')
+        const host = `${ishttps ? 'https' : 'http'}://${hostname}${port ? `:${port}` : ''}/web/${data.date}`
+        logger.mark(`web渲染器已连接，地址：${host}`)
+        /** 注册渲染器 */
+        const rd = new HttpRenderer(host, post, token)
+        index = render.app({ id: 'puppeteer', type: 'image', render: rd.render.bind(rd) })
+        break
+      }
+      case 'web':
+        if (data.path) {
+          const filePath = data.path
+          const query = data.query
+          if (query.html) {
+            ws.send(JSON.stringify({ type: 'web', command: 'redirect', path: filePath, target: query.html.startsWith('/') ? query.html.slice(1) : query.html, echo }))
+            return
+          }
+          const list = ['.css', '.html', '.ttf', '.jpg', '.jpeg', '.png', '.gif', '.bmp', '.ico', '.woff', '.woff2']
+          if (!list.some(ext => path.extname(filePath).endsWith(ext))) {
+            logger.warn(`拦截非资源文件${filePath}`)
+            ws.send(JSON.stringify({ type: 'web', state: 'error', error: '非资源文件', echo }))
+            return
+          }
+          /** 判断一下是否为html 如果是需要特殊处理 */
+          if (path.extname(filePath) === '.html') {
+            let html = filePath
+            /** 获取文件路径 对路径进行处理，去掉../、./ */
+            html = `./${html.replace(/\\/g, '/').replace(/(\.\/|\.\.\/)/g, '')}`
+            /** 判断是否为html文件且路径存在 */
+            if (!fs.existsSync(html)) {
+              return ws.send(JSON.stringify({ type: 'web', state: 'error', error: '文件不存在', echo }))
+            }
+            let content = fs.readFileSync(html, 'utf-8')
+            /** 处理所有绝对路径、相对路径 */
+            content = content.replace(new RegExp(`(${process.cwd()}|${process.cwd().replace(/\\/g, '/')})`, 'g'), '')
+            // 保存到本地
+            // filePath = './1.html'
+            // fs.writeFileSync(filePath, content, 'utf-8')
+            return ws.send(JSON.stringify({
+              type: 'web',
+              path: data.path,
+              command: 'resource',
+              data: Buffer.from(content),
+              state: 'complete',
+              part: 0,
+              echo,
+            }))
+          }
+          logger.info(`获取网页文件数据:${filePath}`)
+          // 获取文件
+          const stream = fs.createReadStream(filePath, { highWaterMark: chunkSize })
+          let part = 0
+          stream.on('data', chunk => {
+            part++
+            const message = {
+              type: 'web',
+              path: data.path,
+              command: 'resource',
+              data: chunk,
+              state: 'part',
+              part,
+              echo,
+            }
+            ws.send(JSON.stringify(message))
+          })
+          stream.on('end', () => {
+            part++
+            // 如果是最后一片段，则更新状态为 'complete'
+            if (stream.readableEnded) {
+              ws.send(JSON.stringify({
+                type: 'web',
+                path: data.path,
+                command: 'resource',
+                data: '',
+                state: 'complete',
+                part,
+                echo,
+              }))
+            }
+          })
+          stream.on('error', err => {
+            ws.send(JSON.stringify({ type: 'web', state: 'error', error: err.message, echo }))
+          })
+        } else {
+          ws.send(JSON.stringify({ type: 'web', state: 'error', error: '错误的文件路径', echo }))
+        }
+        break
+      default:
+        logger.warn(`未知消息类型${JSON.stringify(data)}`)
+        break
+    }
+  })
+  ws.on('close', function close () {
+    /** 卸载渲染器 */
+    index && render.unapp(index)
+    index = 0
+    if (heartbeat) {
+      clearInterval(heartbeat)
+      heartbeat = null
+    }
+    logger.warn('连接关闭，10秒后尝试重新连接')
+    if (!reConnect) {
+      reConnect = setTimeout(connect, 10000)
+    }
+  })
+  ws.on('error', function error () {
+    /** 卸载渲染器 */
+    index && render.unapp(index)
+    index = 0
+    if (heartbeat) {
+      clearInterval(heartbeat)
+      heartbeat = null
+    }
+    logger.warn('连接错误，10秒后尝试重新连接')
+    if (!reConnect) {
+      reConnect = setTimeout(connect, 10000)
+    }
+  })
+}