在手表模式下优雅（在开发期间）

Question

我正在 Suave 1.0 + Angular 2.0 sample app 工作并且在监视模式下启动 Suave 服务器非常有趣，所以服务器监视文件在根文件夹中发生变化（js，css，html）和子文件夹并在更改任何文件时自动将 refresh 命令发送到我的应用程序的所有打开的浏览器选项卡。

来自 Angular 2 5min Quckstark 的

lite-server 可以做到这一点，而且非常方便。

我认为大多数手表零件都可以在 latest Steffen Forkmann's post 中找到，但是如何将 refresh 发送到打开的浏览器选项卡不是很清楚。

请提供与Suave类似实现的完整代码。

Answer 1

Suave 服务器的代码应该类似于此

#r "packages/Suave/lib/net40/suave.dll"
#r "packages/FAKE/tools/FakeLib.dll"

open Fake
open Suave
open Suave.Operators
open Suave.Sockets.Control
open Suave.WebSocket
open Suave.Utils
open Suave.Files
open Suave.RequestErrors
open Suave.Filters
open System
open System.Net


let port =
    let rec findPort port =
        let portIsTaken =
            System.Net.NetworkInformation.IPGlobalProperties.GetIPGlobalProperties().GetActiveTcpListeners()
            |> Seq.exists (fun x -> x.Port = int(port))
        if portIsTaken then findPort (port + 1us) else port
    findPort 8083us

let logger = Logging.Loggers.ConsoleWindowLogger Logging.LogLevel.Verbose

let refreshEvent = new Event<_>()

let handleWatcherEvents (events:FileChange seq) =
    for e in events do
        let fi = fileInfo e.FullPath
        traceImportant <| sprintf "%s was changed." fi.Name
    refreshEvent.Trigger()

let socketHandler (webSocket : WebSocket) =
  fun cx -> socket {
    while true do
      let! refreshed =
        Control.Async.AwaitEvent(refreshEvent.Publish)
        |> Suave.Sockets.SocketOp.ofAsync
      do! webSocket.send Text (ASCII.bytes "refreshed") true
  }

let cfg =
  { defaultConfig with
      homeFolder = Some (__SOURCE_DIRECTORY__)
      bindings =
        [ HttpBinding.mk HTTP IPAddress.Loopback port ]
      listenTimeout = TimeSpan.FromMilliseconds 3000. }

let app : WebPart =
  choose [
    Filters.log logger logFormat >=> never
    Filters.path "/websocket" >=> handShake socketHandler
    Filters.GET >=> Filters.path "/" >=> file "index.html"
    Writers.setHeader "Cache-Control" "no-cache, no-store, must-revalidate"
      >=> Writers.setHeader "Pragma" "no-cache"
      >=> Writers.setHeader "Expires" "0"
      >=> browseHome
    NOT_FOUND "Found no handlers."
  ]


let watcher =
    !! ("app/*.js")
      ++ ("*.html")
    |> WatchChanges handleWatcherEvents

try
    System.Diagnostics.Process.Start(sprintf "http://localhost:%d/index.html" port) |> ignore
    startWebServer cfg app
finally
    watcher.Dispose()

所以我们设置观察器来处理 js（由 TypeScript 生成）和 html 文件中的变化，并向客户端发送 refresh 命令，但同时我们需要将以下代码添加到 index.html 的 head 部分以在客户端处理 refresh

<!-- 3. Listen on refresh events from the server -->
<script language="javascript" type="text/javascript">
    function init()
    {
        websocket = new WebSocket("ws://"+window.location.host+"/websocket");
        websocket.onmessage = function(evt) { location.reload(); };
    }
    window.addEventListener("load", init, false);
</script>

您可以找到完整的演示应用程序 here

在手表模式下优雅（在开发期间）

Suave in watch mode (during development)

f#

suave