Ktor + Kotlin/JS 最小可用案例

这是一个使用 ktor 服务器返回由 Kotlin 编写的 HTML 和 JavaScript 的最小可用案例。

项目结构

├── app/                  # Ktor 服务器模块
│   ├── src/main/kotlin/  # 服务器源代码
│   └── src/main/resources/static/  # 静态资源目录
├── html/                 # Kotlin Multiplatform 模块
│   ├── src/jvmMain/      # JVM 平台代码（HTML 生成）
│   └── src/jsMain/       # JS 平台代码
├── gradle/               # Gradle 配置
│   └── libs.versions.toml  # 依赖版本管理
├── build.gradle.kts      # 根项目构建配置
└── settings.gradle.kts   # Gradle 设置

技术栈

• 后端: Ktor 3.3.3 (Netty)
• 前端: Kotlin/JS (IR 编译器)
• HTML 构建: kotlinx-html 0.12.0
• 构建工具: Gradle 9.3.0-rc-1
• Kotlin: 2.3.0-RC2

核心功能

1. HTML 生成: 使用 kotlinx-html 在 JVM 端生成 HTML
2. JavaScript 交互: 使用 Kotlin/JS 编写前端交互逻辑
3. 静态资源服务: Ktor 提供静态资源服务
4. 自动构建流程: Gradle 任务自动将编译后的 JS 复制到静态资源目录

构建与运行

构建项目

./gradlew build

这将：

1. 编译 html 模块的 JVM 和 JS 代码
2. 将编译后的 JS 文件复制到 app 模块的静态资源目录
3. 编译 app 模块

运行服务器

./gradlew run

服务器将在 http://localhost:8077 启动。

访问端点

• http://localhost:8077/hello - 显示 Hello 页面
• http://localhost:8077/error - 显示 Error 页面

代码解析

App.kt (Ktor 服务器)

fun main() {
    embeddedServer(Netty, 8077) { // 启动 Netty 服务器
        routing { // 配置路由
            staticResources("/", "static") // 提供静态资源
            get("/hello") { // 处理 /hello 请求
                call.respondHtml { // 返回 HTML
                    helloHtml() // 调用 html 模块的函数生成 HTML
                }
            }
            // 其他路由...
        }
    }.start(wait = true)
}

HelloHtml.kt (HTML 生成)

fun HTML.helloHtml() {
    head { title { +"Hello" } }
    body {
        h1 { +"Hello Html" }
        script(type = "module") { // 嵌入 JavaScript
            unsafe { // 不安全但必要的 HTML 内容
                +"""
                    import {helloJs} from '/js/HelloJs.export.mjs';
                    helloJs();
                """.trimIndent()
            }
        }
    }
}

HelloJs.kt (JavaScript 逻辑)

@OptIn(ExperimentalJsExport::class)
@JsExport // 导出为 JavaScript 函数
fun helloJs() {
    val h1 = document.querySelector("h1") as HTMLElement
    h1.addEventListener("click") { // 添加点击事件
        window.alert("Hello, World!") // 调用 JavaScript
    }
}

结论

这个案例展示了如何使用 Kotlin 全栈开发：

• 使用同一个语言编写服务器、HTML 和 JavaScript
• 享受类型安全和代码复用的好处
• 利用 Gradle 自动化构建流程

通过上述方案，可以使项目更加健壮、易于维护和扩展。