Refactored WebSocketsExample

Author: japgolly

gh-pages/src/main/scala/ghpages/examples/WebSocketsExample.scala

@@ -4,8 +4,6 @@ import ghpages.GhPagesMacros
 import ghpages.examples.util.SingleSide
 import japgolly.scalajs.react._, vdom.prefix_<^._
 
-import org.scalajs.dom.{WebSocket, MessageEvent, Event, CloseEvent, ErrorEvent}
-
 object WebSocketsExample {
 
   def content = SingleSide.Content(source, main())
@@ -16,80 +14,105 @@ object WebSocketsExample {
   val source = GhPagesMacros.exampleSource
 
   // EXAMPLE:START
+
+  import org.scalajs.dom.{WebSocket, MessageEvent, Event, CloseEvent, ErrorEvent}
+
   val url = "ws://echo.websocket.org"
 
-  case class State(ws: Option[WebSocket], log: List[String], message: String)
+  case class State(ws: Option[WebSocket], logLines: Vector[String], message: String) {
+
+    // Create a new state with a line added to the log
+    def log(line: String): State =
+      copy(logLines = logLines :+ line)
+  }
 
   class Backend($: BackendScope[Unit, State]) {
-    def render(p: Unit, s: State) = {
+    def render(s: State) = {
+
+      // Can only send if WebSocket is connected and user has entered text
+      val send: Option[Callback] =
+        for (ws <- s.ws if s.message.nonEmpty)
+          yield sendMessage(ws, s.message)
+
       <.div(
-        <.h3(s"Type a message and get an echo"),
-        <.form(
-          ^.onSubmit ==> send,
+        <.h3("Type a message and get an echo:"),
+        <.div(
           <.input(
-            ^.onChange ==> onChange, 
+            ^.onChange ==> onChange,
             ^.value := s.message),
           <.button(
-            ^.disabled := s.message.isEmpty && s.ws.isDefined, "Send")), // Enable if the text exist and the WebSocket is connected
+            ^.disabled := send.isEmpty, // Disable button if unable to send
+            ^.onClick -->? send,        // --> suffixed by ? because it's for Option[Callback]
+            "Send")),
         <.h4("Connection log"),
-        <.pre(                              // Log content
-          ^.width := 200,                   // Basic style
+        <.pre(
+          ^.width := 200,
           ^.height := 200,
           ^.border := "1px solid",
-          s.log.map(<.p(_)))
+          s.logLines.map(<.p(_)))       // Display log
       )
     }
 
-    def onChange(e: ReactEventI): Callback =
-      $.modState(_.copy(message = e.target.value))
+    def onChange(e: ReactEventI): Callback = {
+      val newMessage = e.target.value
+      $.modState(_.copy(message = newMessage))
+    }
 
-    def send(e: ReactEventI): Callback = {
+    def sendMessage(ws: WebSocket, msg: String): Callback = {
       // Send a message to the WebSocket
-      val send          = $.state.map(s => s.ws.foreach(_.send(s.message)))
-      val preventSubmit = e.preventDefaultCB
-      val updateLog     = $.modState(s => s.copy(log = s.log :+ s"Sent: ${s.message}", message = ""))
-      send >> preventSubmit >> updateLog
-    }
+      def send = Callback(ws.send(msg))
 
-    // These are message receiving events from the WebSocket "thread",
-    // to change the state, you need to call `runNow()` on them
-    def onopen(e: Event) = {
-      // Indicate the connection is open
-      $.modState(s => s.copy(log = s.log :+ "Connected")).runNow()
-    }
+      // Update the log, clear the text box
+      def updateState = $.modState(s => s.log(s"Sent: ${s.message}").copy(message = ""))
 
-    def onmessage(e: MessageEvent) = {
-      // Echo message received
-      $.modState(s => s.copy(log = s.log :+ s"Echo: ${e.data.toString}")).runNow()
+      send >> updateState
     }
 
-    def onerror(e: ErrorEvent) = {
-      // Display error message
-      $.modState(s => s.copy(log = s.log :+ s"Error: ${e.message}")).runNow()
-    }
+    def start: Callback = {
+      // Get direct access so WebSockets API can modify state directly
+      // (for access outside of a normal DOM/React callback).
+      val direct = $.accessDirect
 
-    def onclose(e: CloseEvent) = {
-      // Close the connection
-      $.modState(s => s.copy(ws = None, log = s.log :+ s"Closed: ${e.reason}")).runNow()
-    }
+      // These are message-receiving events from the WebSocket "thread".
+
+      def onopen(e: Event): Unit = {
+        // Indicate the connection is open
+        direct.modState(_.log("Connected."))
+      }
+
+      def onmessage(e: MessageEvent): Unit = {
+        // Echo message received
+        direct.modState(_.log(s"Echo: ${e.data.toString}"))
+      }
+
+      def onerror(e: ErrorEvent): Unit = {
+        // Display error message
+        direct.modState(_.log(s"Error: ${e.message}"))
+      }
+
+      def onclose(e: CloseEvent): Unit = {
+        // Close the connection
+        direct.modState(_.copy(ws = None).log(s"Closed: ${e.reason}"))
+      }
 
-    def start: Callback = {
       // Create WebSocket and setup listeners
       val ws = new WebSocket(url)
       ws.onopen = onopen _
       ws.onclose = onclose _
       ws.onmessage = onmessage _
       ws.onerror = onerror _
-      $.setState(State(Some(ws), List("Connecting"), ""))
+      $.setState(State(Some(ws), Vector("Connecting..."), ""))
     }
 
     def end: Callback = {
-      $.state.map(s => s.ws.foreach(_.close())) >> $.modState(_.copy(ws = None))
+      def closeWebSocket = $.state.map(_.ws.foreach(_.close()))
+      def clearWebSocket = $.modState(_.copy(ws = None))
+      closeWebSocket >> clearWebSocket
     }
   }
 
   val WebSocketsApp = ReactComponentB[Unit]("WebSocketsApp")
-    .initialState(State(None, Nil, ""))
+    .initialState(State(None, Vector.empty, ""))
     .renderBackend[Backend]
     .componentDidMount(_.backend.start)
     .componentWillUnmount(_.backend.end)