add wasm module (#9)

GGsrvg · web-flow · commit 576241cf2f71 · 2025-02-11T23:54:32.000+08:00
* add wasm target

* add wasm target

* update xlog to 1.3.1

* revert logging changes

* replace html title from `kmp-xlog` to `kmp-socketio`

* remove moduleName from wasmJs configuration
diff --git a/README.md b/README.md
@@ -103,6 +103,12 @@ Use Chrome CORS Unblock extension to workaround with CORS error.
 ./gradlew :example:shared:jsBrowserRun
 ```
 
+### WASM JS
+
+ ```bash
+ ./gradlew :example:shared:wasmJsBrowserRun
+ ```
+
 ### Windows
 
 ```bash
diff --git a/example/shared/build.gradle.kts b/example/shared/build.gradle.kts
@@ -1,3 +1,6 @@
+import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
+import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
+
 plugins {
     alias(libs.plugins.kmp)
 
@@ -37,6 +40,25 @@ kotlin {
         }
         binaries.executable()
     }
+    @OptIn(ExperimentalWasmDsl::class)
+    wasmJs {
+        moduleName = "example"
+        browser {
+            val rootDirPath = project.rootDir.path
+            val projectDirPath = project.projectDir.path
+            commonWebpackConfig {
+                outputFileName = "composeApp.js"
+                devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply {
+                    static = (static ?: mutableListOf()).apply {
+                        // Serve sources to debug inside browser
+                        add(rootDirPath)
+                        add(projectDirPath)
+                    }
+                }
+            }
+        }
+        binaries.executable()
+    }
 
     listOf(/*linuxX64(), */mingwX64()).forEach {
         it.binaries {
@@ -54,6 +76,11 @@ kotlin {
                 implementation(project(":kmp-socketio"))
             }
         }
+        wasmJsMain {
+            dependencies {
+                implementation(libs.kotlinx.browser)
+            }
+        }
     }
 }
 
diff --git a/example/shared/src/commonMain/kotlin/com/piasy/kmp/socketio/example/Greeting.kt b/example/shared/src/commonMain/kotlin/com/piasy/kmp/socketio/example/Greeting.kt
@@ -10,7 +10,12 @@ import kotlinx.io.bytestring.unsafe.UnsafeByteStringOperations
 class Greeting {
     @OptIn(UnsafeByteStringApi::class)
     fun greet() {
-        IO.socket("http://172.16.11.25:3000", IO.Options()) { socket ->
+        IO.socket(
+            "https://echo.websocket.org/",
+            IO.Options().apply {
+                transports = listOf("websocket")
+            }
+        ) { socket ->
             socket.on(Socket.EVENT_CONNECT) { args ->
                 println("on connect ${args.joinToString()}")
 
diff --git a/example/shared/src/wasmJsMain/kotlin/com/piasy/kmp/socketio/example/Platform.kt b/example/shared/src/wasmJsMain/kotlin/com/piasy/kmp/socketio/example/Platform.kt
@@ -0,0 +1,8 @@
+package com.piasy.kmp.socketio.example
+
+import kotlinx.browser.document
+
+fun main() {
+    document.getElementById("text")?.innerHTML = "hello world"
+    Greeting().greet()
+}
diff --git a/example/shared/src/wasmJsMain/resources/index.html b/example/shared/src/wasmJsMain/resources/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>kmp-socketio</title>
+    <script type="application/javascript" src="composeApp.js"></script>
+</head>
+<body>
+</body>
+</html>
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -10,6 +10,8 @@ mockk = "1.13.16"
 ktor = "3.0.3"
 coroutine = "1.10.1"
 compose = "1.7.6"
+kotlinxBrowser = "0.3"
+kmpXlog = "1.3.1"
 
 [libraries]
 junit = "junit:junit:4.13.2"
@@ -20,17 +22,19 @@ kotlinx-coroutines-test = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-t
 json = "org.json:json:20250107"
 socketioParser = "org.hildan.socketio:socketio-kotlin:2.0.0"
 kotlinx-coroutines-core = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.ref = "coroutine" }
+kotlinx-browser = { module = "org.jetbrains.kotlinx:kotlinx-browser", version.ref = "kotlinxBrowser" }
 ktor-client-core = { module = "io.ktor:ktor-client-core", version.ref = "ktor" }
 ktor-client-websockets = { module = "io.ktor:ktor-client-websockets", version.ref = "ktor" }
 ktor-client-logging = { module = "io.ktor:ktor-client-logging", version.ref = "ktor" }
 ktor-client-okhttp = { module = "io.ktor:ktor-client-okhttp", version.ref = "ktor" }
 ktor-client-darwin = { module = "io.ktor:ktor-client-darwin", version.ref = "ktor" }
 ktor-client-winhttp = { module = "io.ktor:ktor-client-winhttp", version.ref = "ktor" }
+ktor-client-wasm = { module = "io.ktor:ktor-client-js-wasm-js", version.ref = "ktor" }
 ktor-client-curl = { module = "io.ktor:ktor-client-curl", version.ref = "ktor" }
 ktor-client-js = { module = "io.ktor:ktor-client-js", version.ref = "ktor" }
 ktor-client-java = { module = "io.ktor:ktor-client-java", version.ref = "ktor" }
 ktor-client-cio = { module = "io.ktor:ktor-client-cio", version.ref = "ktor" }
-kmpXlog = "com.piasy:kmp-xlog:1.3.0"
+kmpXlog = { module = "com.piasy:kmp-xlog", version.ref = "kmpXlog" }
 
 androidx-compose-ui = { module = "androidx.compose.ui:ui", version.ref = "compose" }
 androidx-compose-ui-tooling = { module = "androidx.compose.ui:ui-tooling", version.ref = "compose" }
diff --git a/kmp-socketio/build.gradle.kts b/kmp-socketio/build.gradle.kts
@@ -1,4 +1,5 @@
 import com.vanniktech.maven.publish.SonatypeHost
+import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
 
 plugins {
     alias(libs.plugins.kmp)
@@ -25,6 +26,12 @@ kotlin {
         binaries.executable()
     }
     mingwX64 {}
+    @OptIn(ExperimentalWasmDsl::class)
+    wasmJs {
+        browser {
+        }
+        binaries.executable()
+    }
 
     // Ktor's curl engine doesn't support websockets now,
     // although CIO engine supports websockets, but it doesn't support TLS.
@@ -85,6 +92,11 @@ kotlin {
                 api(libs.ktor.client.winhttp)
             }
         }
+        wasmJsMain {
+            dependencies {
+                api(libs.ktor.client.wasm)
+            }
+        }
     }
 }
 
diff --git a/kmp-socketio/src/commonMain/kotlin/com/piasy/kmp/socketio/engineio/transports/WebSocket.kt b/kmp-socketio/src/commonMain/kotlin/com/piasy/kmp/socketio/engineio/transports/WebSocket.kt
@@ -15,6 +15,7 @@ import kotlinx.io.bytestring.unsafe.UnsafeByteStringApi
 import kotlinx.io.bytestring.unsafe.UnsafeByteStringOperations
 import org.hildan.socketio.EngineIO
 import org.hildan.socketio.EngineIOPacket
+import org.hildan.socketio.InvalidEngineIOPacketException
 import org.hildan.socketio.InvalidSocketIOPacketException
 import org.hildan.socketio.SocketIOPacket
 
@@ -108,7 +109,7 @@ open class WebSocket(
                 } else {
                     EngineIO.decodeSocketIO(data)
                 }
-            } catch (e: InvalidSocketIOPacketException) {
+            } catch (e: InvalidEngineIOPacketException) {
                 val log = "onWsText decode error: ${e.message}"
                 logE(log)
                 onError(log)
diff --git a/kmp-socketio/src/wasmJsMain/kotlin/com/piasy/kmp/socketio/engineio/transports/transport_impl.kt b/kmp-socketio/src/wasmJsMain/kotlin/com/piasy/kmp/socketio/engineio/transports/transport_impl.kt
@@ -0,0 +1,9 @@
+package com.piasy.kmp.socketio.engineio.transports
+
+import io.ktor.client.HttpClient
+import io.ktor.client.HttpClientConfig
+import io.ktor.client.engine.js.Js
+
+actual fun httpClient(config: HttpClientConfig<*>.() -> Unit): HttpClient = HttpClient(Js) {
+    config(this)
+}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import com.vanniktech.maven.publish.SonatypeHost`
	`2`	`+import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl`
`2`	`3`
`3`	`4`	`plugins {`
`4`	`5`	`alias(libs.plugins.kmp)`
`@@ -25,6 +26,12 @@ kotlin {`
`25`	`26`	`binaries.executable()`
`26`	`27`	`}`
`27`	`28`	`mingwX64 {}`
	`29`	`+ @OptIn(ExperimentalWasmDsl::class)`
	`30`	`+ wasmJs {`
	`31`	`+ browser {`
	`32`	`+ }`
	`33`	`+ binaries.executable()`
	`34`	`+ }`
`28`	`35`
`29`	`36`	`// Ktor's curl engine doesn't support websockets now,`
`30`	`37`	`// although CIO engine supports websockets, but it doesn't support TLS.`
`@@ -85,6 +92,11 @@ kotlin {`
`85`	`92`	`api(libs.ktor.client.winhttp)`
`86`	`93`	`}`
`87`	`94`	`}`
	`95`	`+ wasmJsMain {`
	`96`	`+ dependencies {`
	`97`	`+ api(libs.ktor.client.wasm)`
	`98`	`+ }`
	`99`	`+ }`
`88`	`100`	`}`
`89`	`101`	`}`
`90`	`102`