Message listener (#504)

* Fix ValueElement.valueJsExpression

* Add JS code for client to send Client2ServerMessage with custom data parameter.

* Add WebBrowser to RemoteClientState.kt and add functionality for the server to respond to the new message type from the client.

* Add Comments

* Add another comment

* Fix incorrect WebBrowser oversight.

* Rework custom message system.

* Rename RemoteClientState.handlers

* Add TODO

* Add comment

* Clean sample code form Todo demo

* Give clearer names in Kotlin code

* Give clearer names in JS code

* Rename one more variable.

Author: Derek52

src/main/kotlin/kweb/Kweb.kt

@@ -3,7 +3,6 @@ package kweb
 import com.google.common.cache.Cache
 import com.google.common.cache.CacheBuilder
 import io.ktor.server.application.*
-import io.ktor.server.plugins.*
 import io.ktor.http.*
 import io.ktor.websocket.*
 import io.ktor.websocket.Frame.*
@@ -189,11 +188,11 @@ class Kweb private constructor(
         val wsClientData = clientState.getIfPresent(sessionId)
             ?: error("Can not add callback because: Client id $sessionId not found")
         wsClientData.lastModified = Instant.now()
-        wsClientData.handlers[callbackId] = callback
+        wsClientData.eventHandlers[callbackId] = callback
     }
 
     fun removeCallback(clientId: String, callbackId: Int) {
-        clientState.getIfPresent(clientId)?.handlers?.remove(callbackId)
+        clientState.getIfPresent(clientId)?.eventHandlers?.remove(callbackId)
     }
 
     override fun close() {
@@ -317,7 +316,7 @@ class Kweb private constructor(
                             when {
                                 message.callback != null -> {
                                     val (resultId, result) = message.callback
-                                    val resultHandler = remoteClientState.handlers[resultId]
+                                    val resultHandler = remoteClientState.eventHandlers[resultId]
                                         ?: error("No resultHandler for $resultId, for client ${remoteClientState.id}")
                                     resultHandler(result)
                                 }
@@ -326,6 +325,12 @@ class Kweb private constructor(
                                     logger.debug { "keepalive received from client ${hello.id}" }
                                 }
 
+                                message.onMessageData != null -> {
+                                    println("PUSHING ------------------------------------------------")
+                                    val data = message.onMessageData
+                                    remoteClientState.onMessageFunction!!.invoke(data)
+                                }
+
                             }
                         }
                     }
@@ -359,11 +364,16 @@ class Kweb private constructor(
         val clientPrefix = determineClientPrefix(call)
         val kwebSessionId = clientPrefix + ":" + createNonce()
 
+        val httpRequestInfo = HttpRequestInfo(call.request)
+
+
+        //this doesn't work. I get this error when running the todo Demo
+        //Caused by: java.lang.IllegalStateException: Client id Nb9_U7:eJ5dw4 not found
+        //The debugger says that the remoteClientState ID here matches the clientPrefix and the kwebSessionID from a few lines ago.
         val remoteClientState = clientState.get(kwebSessionId) {
             RemoteClientState(id = kwebSessionId, clientConnection = Caching())
         }
 
-        val httpRequestInfo = HttpRequestInfo(call.request)
 
         try {
             val webBrowser = WebBrowser(kwebSessionId, httpRequestInfo, this)

src/main/kotlin/kweb/ValueElement.kt

@@ -22,7 +22,7 @@ abstract class ValueElement(
     open val element: Element, val kvarUpdateEvent: String = "input",
     val initialValue: String? = null
 ) : Element(element) {
-    val valueJsExpression: String by lazy { "document.getElementById(\"$id\").value" }
+    val valueJsExpression: String get() = "document.getElementById(\"$id\").value"
 
     suspend fun getValue(): String {
         return when (val result =

src/main/kotlin/kweb/WebBrowser.kt

@@ -21,7 +21,6 @@ import java.util.*
 import java.util.concurrent.ConcurrentHashMap
 import java.util.concurrent.atomic.AtomicInteger
 import java.util.concurrent.atomic.AtomicReference
-import kotlin.contracts.ExperimentalContracts
 import kotlin.math.abs
 import kotlin.reflect.KClass
 import kotlin.reflect.jvm.jvmName
@@ -232,6 +231,29 @@ class WebBrowser(val sessionId: String, val httpRequestInfo: HttpRequestInfo, va
         kweb.addCallback(sessionId, functionCall.callbackId!!, callback)
     }
 
+    //attaches the user supplied function to the remoteClientState, to be invoked in Kweb.listenForWebSocketConnection()
+    fun onMessage(customFunction: (data: JsonElement?) -> Unit) {
+        val remoteClientState = kweb.clientState.getIfPresent(sessionId)
+        try {
+            if (remoteClientState!!.onMessageFunction == null) {
+                remoteClientState!!.onMessageFunction = customFunction
+            } else {
+                error("You can only register one message handler per WebBrowser, it should handle any messages you're expecting")
+            }
+
+        } catch (e: NullPointerException) {
+            //TODO it should be impossible for remoteClientState to ever be null here, but maybe we need to add something to handle it anyway
+        }
+    }
+
+    //helper function to allow invoking the custom message without writing Javascript.
+    fun sendMessage(data: JsonElement? = null) {
+        val remoteClientState = kweb.clientState.getIfPresent(sessionId)
+        remoteClientState?.let {
+            it.onMessageFunction!!.invoke(data)
+        }
+    }
+
     fun addCloseListener(listener: () -> Unit) : Int {
         val id = random.nextInt()
         this.closeListeners[id] = listener

src/main/kotlin/kweb/client/Client2ServerMessage.kt

@@ -10,6 +10,7 @@ data class Client2ServerMessage(
     val hello: Boolean? = true,
     val error: ErrorMessage? = null,
     val callback: C2SCallback? = null,
+    val onMessageData: JsonElement? = null,
     val keepalive : Boolean = false,
 ) {
 

src/main/kotlin/kweb/client/RemoteClientState.kt

@@ -9,9 +9,10 @@ import java.time.Instant
 import java.util.concurrent.ConcurrentHashMap
 
 data class RemoteClientState(val id: String, @Volatile var clientConnection: ClientConnection,
-                             val handlers: MutableMap<Int, (JsonElement) -> Unit> = HashMap(),
+                             val eventHandlers: MutableMap<Int, (JsonElement) -> Unit> = HashMap(),
                              val onCloseHandlers : ConcurrentHashMap<Int, () -> Unit> = ConcurrentHashMap(),
-                             val debugTokens: MutableMap<String, DebugInfo> = HashMap(), var lastModified: Instant = Instant.now()) {
+                             val debugTokens: MutableMap<String, DebugInfo> = HashMap(), var lastModified: Instant = Instant.now(),
+                             var onMessageFunction: ((data: JsonElement?) -> Unit)? = null) {
     fun send(message: Server2ClientMessage) {
         clientConnection.send(Json.encodeToString(message))
     }

src/main/resources/kweb/kweb_bootstrap.js

@@ -63,7 +63,7 @@ function handleInboundMessage(msg) {
                 console.debug("Evaluated [ " + func.toString() + "]", data);
                 const callback = {callbackId: callbackId, data: data};
                 const message = {id: kwebClientId, callback: callback};
-                sendMessage(JSON.stringify(message));
+                sendClientMessage(JSON.stringify(message));
             } catch (err) {
                 debugErr(debugToken, err, "Error Evaluating `" + func.toString() + "`: " + err);
             }
@@ -86,7 +86,7 @@ function debugErr(debugToken, err, errMsg) {
             error: {name: err.name, message: err.message}
         };
         const message = {id: kwebClientId, error: err};
-        sendMessage(JSON.stringify(message));
+        sendClientMessage(JSON.stringify(message));
     } else {
         console.error(errMsg)
     }
@@ -106,9 +106,9 @@ function connectWs() {
             websocketEstablished = true;
             console.debug("Websocket established", wsURL);
             removeElementByIdIfExists(bannerId);
-            sendMessage(JSON.stringify({id: kwebClientId, hello: true}));
+            sendClientMessage(JSON.stringify({id: kwebClientId, hello: true}));
             while (preWSMsgQueue.length > 0) {
-                sendMessage(preWSMsgQueue.shift());
+                sendClientMessage(preWSMsgQueue.shift());
             }
             reconnectTimeout = 2000
         };
@@ -177,7 +177,10 @@ function showReconnectToast() {
     }).showToast();
 }
 
-function sendMessage(msg) {
+/* Sends websocket message from the client to the server. This is a lower-level function used by Kweb.
+   Developers using Kweb should use sendMessage() instead
+*/
+function sendClientMessage(msg) {
     if (websocketEstablished) {
         console.debug("Sending WebSocket message", msg);
         socket.send(msg);
@@ -186,20 +189,29 @@ function sendMessage(msg) {
     }
 }
 
+//Allows Kweb users to send messages from the client to the Server
+function sendMessage(data) {
+    const msg = JSON.stringify({
+        id: kwebClientId,
+        onMessageData: data
+    });
+    sendClientMessage(msg);
+}
+
 function callbackWs(callbackId, data) {
     const msg = JSON.stringify({
         id: kwebClientId,
         callback: {callbackId: callbackId, data: data}
     });
-    sendMessage(msg);
+    sendClientMessage(msg);
 }
 
 function sendKeepalive() {
     const msg = JSON.stringify({
         id: kwebClientId,
         keepalive: true
     });
-    sendMessage(msg);
+    sendClientMessage(msg);
 }
 
 setInterval(sendKeepalive, 60*1000);

src/test/kotlin/kweb/demos/todo/TodoApp.kt

@@ -1,9 +1,13 @@
 package kweb.demos.todo
+import kotlinx.serialization.json.JsonElement
+import kotlinx.serialization.json.JsonPrimitive
 import kotlinx.serialization.json.jsonPrimitive
 import kweb.*
 import kweb.plugins.fomanticUI.fomantic
 import kweb.plugins.fomanticUI.fomanticUIPlugin
-import kweb.state.*
+import kweb.state.ObservableList
+import kweb.state.render
+import kweb.state.renderEach
 import kweb.util.NotFoundException
 import kweb.util.random
 import mu.two.KotlinLogging
@@ -151,6 +155,7 @@ You may find the source code for this app
                 }
             }
         }
+
     }
 
     private fun handleAddItem(activeListKey: String, input: InputElement, newItemText: String) {